web-dev-qa-db-fra.com

Texte alternatif vs sprites CSS (SEO vs vitesse)

Je retravaille notre site pour réduire les requêtes HTTP et les bloquer en concaténant JS, css, gzipping, chargeant tous les JS via LABjs et utilisant des sprites CSS pour les images chargées individuellement via les balises <img>.

Les progrès ont été remarquables jusqu'à présent - amélioration des performances de chargement des pages 5x. Cependant, nous sommes dans le top 5 des moteurs de recherche organiques dans Google pour de nombreux mots clés et expressions ciblés. Je crains que l'élimination de tant de balises img avec des attributs alt puisse nuire à notre référencement.

Quelqu'un at-il une expérience avec la manipulation/suppression de balises alt et effets sur les positions SEO? Le rang précédent est-il "collant"?

seocsssprite
5
leeoniya

En général, vous ne devriez utiliser que des images-objets pour des images non tangentielles telles que des icônes. Les images liées au contenu doivent rester en tant que balises img.

Cela dit, vous n'avez probablement pas à vous soucier de perdre quelques mots clés. L'utilisation d'une balise de titre est une bonne idée d'accessibilité.

5
DisgruntledGoat

1: Le texte alternatif est nécessaire pour Google SEO, mais uniquement parce que Google aime les sites Web conçus pour différents types de navigateurs et de capacités utilisateur, par exemple: navigateurs en mode texte uniquement, javascript désactivé, etc. vos résultats de recherche organiques dans leur ensemble.

2: L'utilisation de mots-clés dans le texte alternatif est acceptable, mais uniquement si le texte alternatif est utilisé pour décrire précisément le contenu de l'image, d'où l'objectif du texte alternatif. En d'autres termes, si l'objectif du texte alternatif n'est pas la densité de mots clés. Conseil: si vous avez un contenu de qualité, pertinent et original, vous ne devriez même pas vous soucier de la densité des mots clés.

3: La vitesse de la page est un autre facteur dans l'algorithme de Google. En effet, la vitesse favorise l'expérience utilisateur. Les sprites CSS aident à réduire la vitesse de la page en réduisant les requêtes http. De nombreux sites Web majeurs, y compris Google, les utilisent.

Cela étant dit, j'aimerais pouvoir offrir plus d'informations, car je les cherche ici aussi.

mettre à jour:

lisez le post ci-dessous car il peut avoir plus d'informations sur ce sujet

cliquez ici pour un autre article relatif à cette question

4
joe

Au lieu d'utiliser les attributs alt pour fournir du texte de remplacement aux navigateurs, lecteurs d'écran, moteurs de recherche, etc., vous pouvez simplement insérer du contenu texte ordinaire dans l'élément que vous utilisez pour afficher le Sprite CSS et le masquer. avec CSS.

Une des manières les plus simples de faire ceci est avec quelque chose comme ceci:

.Sprite {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}

D'autres solutions possibles incluent de placer le texte dans un span à l'intérieur de l'élément Sprite, puis d'utiliser un positionnement absolu pour le déplacer en dehors de la zone d'écran ou de définir son opacité sur 0 ou tout simplement avec visibility: hidden.

N'oubliez pas que vous ne devez probablement pas abuser de ces techniques: si une partie importante de votre contenu est masquée avec CSS, les moteurs de recherche peuvent penser que vous essayez de les duper.

N'oubliez pas non plus que vous pouvez définir les attributs title sur à peu près n'importe quel élément HTML et que la plupart des navigateurs les afficheront sous forme d'infobulles flottantes.

2
Ilmari Karonen

Cacher du contenu, des mots-clés, en particulier sur votre page, uniquement pour donner à Google plus de mots-clés à explorer, n'est pas une bonne idée, comme l'a suggéré Karonen. Vous ne devez pas tromper Google en cachant des mots clés dans votre contenu. Si les progrès vont bien, continuez. Vous améliorez le temps de chargement de votre site, ce qui est un avantage pour Google. Plus que les attributs alt de vos tags img, votre classement organique entre en jeu. Si vous êtes inquiet au sujet de la baisse du classement, essayez d’obtenir un peu plus de pertinents backlinks qui sont dofollow

2
Anagio

Vous résolvez cela en repensant vos options.

Vous créez une zone définie avec un <a> avec display:block; ou <div> et utilisez overflow hidden; pour masquer le débordement et position:relative;.

Ensuite, vous placez votre <img> image Sprite à l'intérieur d'une position absolue, ce qui est possible depuis que vous avez positionné le parent.

Ensuite, utilisez :hover sur l'image pour changer de position.

Maintenant, votre Sprite est basé sur une balise img, vous pouvez donc utiliser votre texte alt.

L'exemple suivant est basé sur un sprite Facebook avec deux versions de l'icône superposées, chaque 50px sur 50px, la hauteur totale de l'image étant 100px:

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="Sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
1
Paul