web-dev-qa-db-fra.com

Les liens annexes dans les résultats de recherche Google associent des mots lorsque j'utilise un <span> dans <a> dans <nav>

J'ai la structure suivante dans mon menu de navigation: Il y a une étendue dans une balise d'ancrage qui améliore l'apparence de la navigation.

<nav class="navbar-collapse navbar-collapse-header collapse">
    <div class="navbar-right yamm dropdownnav" >
        <ul class="nav navbar-nav smart-menu dd-menu">
            <li><a href="https://www.example.com/hosting">Try & Buy<span class="subline">Hosting List</span></a></li>
            <li><a href="https://www.example.com/products">Shop<span class="subline">Webshop</span></a></li>
            <li><a href="https://www.example.com/features">Features<span class="subline">Features</span></a></li>
        </ul>
    </div>

Mais cela a un impact négatif sur les liens annexes:

enter image description here

Est-ce que Google prend en compte quoi que ce soit à l'intérieur d'une balise d'ancrage? Existe-t-il un moyen de conserver la conception et d'améliorer l'aspect des liens de site?

Voici à quoi ressemble ma navigation sur mon site:

enter image description here

seogooglesitelinks
7
Harit

Les balises <span> n'ajoutent généralement pas d'espace blanc autour des éléments. Il semble que vous utilisiez peut-être votre code CSS pour le rendre ainsi. Les navigateurs de texte et Google ne sont toutefois pas susceptibles d'ajouter de l'espace autour des plages. Il serait préférable dans votre balisage de mettre dans un espace:

Try & Buy <span class="subline">Hosting List</span>

Au lieu de:

Try & Buy<span class="subline">Hosting List</span>

Il n'y a rien de mal à avoir une étendue dans vos liens. L'ajout de cet espace vous permettrait de le faire tout en laissant mieux apparaître les liens de votre site (et le texte d'ancrage) à Googlebot. Ensuite, Googlebot verrait le texte d'ancrage de ce lien sous le nom "Try & Buy Hosting List".

Il semble que votre lien de fonctionnalités ne serait toujours pas génial comme lien de site, même avec l'espace. Vous utilisez deux fois le même mot dans le lien, car vous le dupliquez dans la sous-liste. Peut-être qu'il serait logique de diviser cela en deux liens?

<a href="https://www.example.com/features">Features</a>
<a href="https://www.example.com/features"><span class="subline">Features</span></a>
3
Stephen Ostermiller

Si ces informations supplémentaires servent uniquement à des fins visuelles, vous pourriez peut-être envisager d'utiliser du contenu pseudo-CSS (je pense que Google l'ignorera mais qu'il n'a pas été testé, il pourrait donc se tromper).

En parallèle, il semble que presque tous ces éléments dupliquent le texte au-dessus. Je me demande simplement si cela ajoute réellement de la valeur à vos utilisateurs ou si cela prend simplement de la place utile à l'écran. Cela mérite une pensée.

3
Kessa

Comme d'autres l'ont déjà noté, Google voit vos liens de site comme ils étaient tous en texte brut - cela ne prend généralement pas en compte les feuilles de style. (En effet, Google ne peut pas formatez réellement les liens de site de la façon dont vous les avez stylés sur votre site, et rien ne permet de dire comment devrait les formater à la place.)

Une solution que vous pourriez envisager serait d’écrire d’abord vos liens de manière à ce qu'ils aient un sens en clair. Dans votre cas, vos liens semblent se composer d’un titre principal et d’un sous-titre descriptif; un choix naturel serait de les séparer par deux points, comme ceci:

Try & Buy: Hosting List
Shop: Webshop

Ajoutez ensuite des étendues pour indiquer les différentes parties, par exemple comme ça:

<li><a href="https://www.example.com/hosting">
  Try &amp; Buy<span class="separator">: </span><span class="subline">Hosting List</span>
</a></li>
<li><a href="https://www.example.com/products">
  Shop<span class="separator">: </span><span class="subline">Webshop</span>
</a></li>

Et enfin, ajoutez une règle à votre feuille de style pour rendre les deux points invisibles une fois stylés:

.nav li a .separator { display: none }

En prime, vos pages seront désormais aussi (légèrement plus) accessibles dans les navigateurs en mode texte uniquement, et avec d'autres agents utilisateurs moins courants.

(Notez que cela, par lui-même, ne complètement résout pas votre problème - Features: Features a toujours l’air assez idiot, si ce n’est presque aussi idiot que FeaturesFeatures. Cela dit, ça ne marche pas. Si vous voulez vous en tenir à la structure titre/sous-titre pour plus de cohérence, il vaudrait mieux que vous trouviez des sous-titres moins répétitifs.)

3
Ilmari Karonen

Comme vous pouvez le constater, le contenu apparaît sous forme de texte brut, qu’il s’agisse d’une étendue ou non. Vous verrez la même chose qu'un utilisateur, à la différence que vous avez modifié visuellement l'étendue pour créer une distinction.

Cependant, les en-têtes qu'ils vous montrent dans votre image doivent être tirés des pages elles-mêmes et non de l'ancre. Vous voudrez peut-être vérifier si vous avez les bons <title> et <h1> (un par page!), Cela vous aidera davantage que de modifier du texte dans une ancre.

Pensez-y, votre lien interne pourrait pointer vers cette page, à partir de pages différentes sur votre site, quel texte devraient-ils prendre? Le texte d'ancrage aide pour la valeur du mot clé, mais c'est l'en-tête lui-même qui détermine le résultat dans Google (si correctement mis en œuvre).

2
Martijn