web-dev-qa-db-fra.com

Responsive design, injection de code via Javascript: est-ce une mauvaise pratique?

Le code ci-dessous est-il problématique en ce qui concerne le référencement et Google?

Ceci est un petit exemple de la façon dont j'ai l'intention de transformer mon site Web non compatible avec les appareils mobiles en un accès convivial pour mobiles à l'aide de requêtes multimédia CSS et de javascript.

La raison pour laquelle je souhaite opter pour ce type de code est bien sûr d'éviter les doublons de contenu en ce qui concerne à la fois le code HTML et la maintenance du code. Le code de la version mobile du site Web sera "extrait" de la version de bureau, injecté dans des espaces réservés.

Cela me permettra de garder la version de bureau intacte, d'ajouter un certain nombre d'espaces réservés pour la version mobile et de les renseigner de la manière suivante.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style>
@media (max-width: 360px)
{
    #ul-desktop
    {
        display: none;
    }
}
</style>

<html>
    <ul id="ul-desktop">
        <li>Bullet #1</li>
        <li>Bullet #2</li>
        <li>Bullet #3</li>
        <li>Bullet #4</li>
    </ul>

    <ul id="ul-mobile"></ul>

    <script type="text/javascript">
        if($(window).width()<=360)
        {
            $("#ul-desktop li").each
            (
                function (index)
                {
                    $("#ul-mobile").append("<li>" + $(this).html() + "</li>");
                }
            );
        }
    </script>
</html>


Modifier

Bien sûr, je pourrais aussi bien choisir deux versions différentes de la page, une pour le bureau et une pour le mobile, avec un gros avantage: les utilisateurs mobiles n'auront pas à télécharger mes gros fichiers CSS/JS utilisés par le bureau, ils téléchargeront un beaucoup, beaucoup plus légère version de mes pages.

Mais j'ai des restrictions de serveur, telles que je ne peux pas implémenter de redirections d'agent utilisateur côté serveur. J'ai donc besoin d'aide:

  1. Existe-t-il une différence entre mobile.mydomain.com et mydomain.com/mobile en ce qui concerne le référencement? En raison des restrictions du serveur, je crains de ne pouvoir opter que pour ce dernier.

  2. Une redirection window.location fonctionnerait-elle dans mon cas? Je pensais utiliser la fonction JavaScript matchMedia (), masquer tout le contenu, afficher un petit indicateur avec "Chargement de la version mobile" et effectuer la redirection. Mais cette solution ne téléchargerait-elle pas deux versions des pages, le bureau et le mobile, une fois la redirection terminée?

seogoogleduplicate-content
4
WPRookie82

L'idée de rendre un site compatible avec les appareils mobiles est excellente, mais je ne pense pas que votre méthode soit la meilleure, surtout si vous décidez plus tard de monétiser votre site Web avec adsense pour les raisons suivantes:

  1. Vous écrivez sur votre site pour que le texte soit masqué si une résolution d'écran est sous une valeur spécifique. Il se peut que Google pense que vous jouez à des jeux lorsque vous utilisez cette technique et que, par conséquent, votre site est plus bas dans son index.

  2. Le nombre d'octets requis pour traiter la page comprendra trop d'octets inutiles car le client doit tout télécharger, y compris le texte masqué, pour que le chargement de la page soit complet. Si le texte caché devient énorme, les utilisateurs de mobiles auront peut-être une grosse facture à payer en fonction de leur forfait.

Il y a deux façons de résoudre votre situation.

  1. Créez une page distincte pour les utilisateurs de bureau et une page distincte pour les utilisateurs mobiles et envoyez les utilisateurs à la page appropriée via des techniques de détection de navigateur Web. (Il existe des scripts pour cela sur le net).

Ou. 2. Suivez votre méthode mais ne modifiez que les propriétés de l'objet au lieu d'un texte lisible par l'utilisateur. Par exemple, affichez le même texte pour les utilisateurs mobiles et de bureau et définissez une image de sorte que la source de celui-ci diffère d'un mobile à l'autre. Vous pouvez aussi faire de même avec la taille de l'image si vous le souhaitez.

6
Mike

Peut-être que c'est juste votre exemple simplifié, mais votre exemple peut être réécrit pour utiliser uniquement des requêtes CSS et multimédia, aucun JavaScript n'est requis ici et aucun changement de la source.

Vous utilisez "à moitié" une requête multimédia pour masquer le code HTML du poste de travail et JavaScript pour copier le contenu de ce dernier (dans son intégralité) dans un conteneur pour mobile, qui est vraisemblablement stylé pour mobile. Sauf si vous allez réellement modifier le balisage HTML de la version mobile (de manière radicale), vous pouvez simplement utiliser les requêtes CSS et multimédia pour le styler ...

<style>
#ul-desktop
{
    /* Default style for desktop */
}
@media (max-width: 360px)
{
    #ul-desktop
    {
        /* Override style for mobile */
    }
}
</style>

<html>
    <ul id="ul-desktop">
        <li>Bullet #1</li>
        <li>Bullet #2</li>
        <li>Bullet #3</li>
        <li>Bullet #4</li>
    </ul>
</html>

Mais peut-être que votre code actuel ne ressemble pas vraiment à votre exemple et est trop impliqué pour être manipulé avec CSS?

De même, votre exemple de code sera probablement OK pour le référencement puisque le contenu pour ordinateur et mobile est identique. Cette déclaration était peut-être un peu hâtive/trop simplifiée. Si les moteurs de recherche regardent simplement la source HTML (comme ils le faisaient auparavant et certains le font encore), le contenu des ordinateurs de bureau et des mobiles sera considéré comme identique - le code source HTML est identique. Cependant, certains essaieront d'interpréter les CSS et "peut-être" JavaScript (dans une certaine mesure) et c'est là que des problèmes pourraient survenir dans votre exemple initial.

Dans votre exemple, si un bot SE pouvait traiter vos requêtes de média CSS (ce qui cache le contenu du bureau) mais ne traitait pas votre JavaScript (soit parce qu'il ne traite tout simplement pas JS, soit parce que le JS est trop complexe pour processus), vous risquez de ne plus avoir de contenu sur votre site mobile.

5
MrWhite

Voici une réponse à la deuxième question de WPRookie82 ci-dessus:

J'ai deux versions de mon site sur des pages distinctes, mais je les génère à l'aide de PHP, de sorte que je n'ai pas besoin de pages html distinctes. Mais si le contenu vous appartient, paraphrassez-le un peu, mais surtout, modifiez les balises de titre et les balises de description méta pour indiquer que c’est la version mobile.

Voici un exemple de ce que je veux dire. Je l'ai fait ridiculement simple pour que les gens comprennent.

Code HTML du site de bureau:

<html>
<head>
<title>Sports site</title>
<meta name="description" content="This sports site for your desktop computer is cool">
</head>
<body>
Welcome to the special sports site designed perfectly for your desktop computer. bla bla bla .....
</body>
</html>

Code HTML du site mobile:

<html>
<head>
<title>Sports site - Mobile Edition</title>
<meta name="description" content="This sports site for your mobile device is cool">
</head>
<body>
Welcome to the special sports site designed perfectly for your cell phone or smartphone. bla bla bla .....
</body>
</html>
2
Mike