Comment faire en sorte que les images contenant du texte soient indexées par les moteurs de recherche?
Je suis en train de construire un petit site Web pour un ami et, étant dans la publicité, elle déteste les polices standard et veut que tout soit écrit dans une police personnalisée.
Comme l'intégration des polices CSS n'est pas vraiment une option pour le moment, tous les textes (heureusement, ils sont peu nombreux) seront mis en images.
Comment pourrais-je toujours avoir le contenu des images indexé? Pour les petits textes (liens, menu, etc ...), je mets le texte dans l'attribut alt, mais pour quelque chose de plus, je ne pense pas que ce soit la solution. Que puis-je faire ? Mettre le texte dans un div caché à côté de l'image?
EMBED LES POLICES!
Non, mais vraiment, les polices incorporables fonctionnent sur tous les navigateurs actuels (FF, Chrome, Safari, Opera) et IE5.5 + (oui, cela fonctionne dans IE depuis les années 90).
Obtenez votre fichier TTF le télécharger ici: http://www.kirsle.net/wizards/ttf2eot.cgi
Il vous donnera le code et 2 fichiers (un fichier TTF, puis une police EOT [M $ web]). Copier, coller, télécharger, terminé. Gagner gagner!
Et s'il vous plait, n'utilisez pas d'images :)
Si vous le faites toutefois, écrivez votre balisage comme si vous n'utilisiez PAS d'images, puis ajoutez des images d'arrière-plan à tous les éléments et utilisez text-indent: -9999px pour masquer le texte. Mais s'il vous plaît, utilisez simplement des polices incorporables. De plus, si votre client/ami est un photographe, elle utilise probablement (ne devrait pas être) un ancien navigateur (je veux dire, VRAIMENT ancien, comme IE4 ...)
À moins qu'elle ne vende ses propres polices sur ce site Web, je pense que vous pourriez tous les deux travailler davantage sur l'intégration de CSS (oui, j'ai lu que ce n'est pas une option pour vous maintenant, mais j'insiste).
Si le cas est un travail graphique plus lourd sur les polices (dégradé de couleurs, alignement torsadé, lustrage, gaufrage, gravure ...), il est vraiment impossible de restituer les options CSS au besoin, puis je vous recommande de procéder comme suit:
utiliser des images via CSS (peut-être un Sprite) et masquer le texte d'ancrage avec text-ident. html
<a href="work1.html" title="My first work" id="firstWork">My first work</a>
css
#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}
Ceci est une technique. Oui, je sais, Google peut punir cela, mais vous savez, je n'ai jamais entendu parler d'un seul site pénalisé en l'utilisant.
Une autre solution consisterait à utiliser la balise img dans la balise anchor ALONG avec du texte, puis à utiliser CSS pour masquer le texte et corriger le positionnement de img si nécessaire. Cette dernière option vous permet d’ajouter alt, title, longdesc à l’image, en augmentant la quantité et la qualité des informations indexées.
Vous pouvez même aller plus loin avec cette dernière option et opter pour une solution encore meilleure et nouvelle: utiliser la balise figure, disponible pour HTML5, avec figcaption. L'idée est de garder l'ancre -> figure-> img + figcaption.
Figcaption donnerait le rôle de texte d'ancrage et vous pouvez utiliser CSS pour le masquer.
Eh bien, 3 solutions. Choisissez-en un. J'irais avec le dernier.
Beurk. Elle a vraiment besoin de surmonter ses problèmes de polices de caractères car elle tue l'accessibilité de son site et cause toutes sortes de problèmes, tels que le ralentissement du rendu de ses pages, etc.
Cela dit, vous pouvez essayer d’ajouter l’attribut longdesc à vos images. Il est difficile de dire quel poids les moteurs de recherche lui accordent, le cas échéant, mais il est probablement supérieur à zéro.
Bien que les polices Web soient à présent assez courantes dans tous les principaux navigateurs, il peut être délicat de comprendre la complexité des navigations croisées entre les différents formats de police.
Google fournit un Nice api de polices Web et répertoire de polices pour vous aider ici.
L'utilisation d'images, même avec des balises alt, comme seul moyen d'accéder à d'autres pages du site, ne donnera pas vraiment beaucoup de clarté à Google.
Votre meilleur pari est de convaincre votre ami que vous avez besoin de liens texte quelque part sur la page ou sur le site pour résoudre le problème. Par exemple, si vous pouvez configurer une page Sitemap avec tous les liens de texte ou un menu déroulant sur chaque page contenant tous les liens de texte devant fonctionner. Cela ne causera pas de dommage d'avoir cela en plus des images de lien.
Je suggérerais de ne pas utiliser de liens cachés, car Google peut considérer cela comme étant néfaste et réduire le rang de votre site ou le marquer comme spam.
Comme d'autres l'ont suggéré, vous n'avez pas besoin d'utiliser les polices standard "Web-safe". Il existe de nombreuses techniques de remplacement de polices disponibles qui fonctionneront dans plusieurs navigateurs. Pour un bon aperçu, consultez: Guide de Web Designer sur les méthodes de remplacement des polices . Vous n'avez pas à renoncer au référencement ou à recourir au référencement par image. Vous pouvez avoir votre gâteau et le manger aussi.
J'avais l'habitude de faire cela avec des images de fond et des étendues imbriquées cachées. Convient parfaitement aux navigateurs de texte et aux moteurs de recherche et possède des polices personnalisées pour les navigateurs les plus riches.
HTML:
<h1><span>Welcome to Hell on Wheels</span></h1>
CSS:
h1 {
background: url(welcome.gif) no-repeat;
display: block;
height: 68px;
width: 415px;
}
h1 span { display: none; }
Sortie:
Il n’ya vraiment aucune limite à la quantité de texte que vous pouvez remplacer avec cette méthode (balises appropriées et styles cachés de manière intelligente), mais honnêtement, la police personnalisée que votre client souhaite utiliser est probablement beaucoup moins lisible que toutes les polices Web courantes. Tu devrais vraiment essayer de la rabaisser.
sFIR pourrait fonctionner à cette fin, mais son utilisation nécessitera beaucoup de ressources du côté du client, ce qui risque de compliquer les choses si vous devez intégrer des liens dans le texte.
Il suffit d'utiliser webfonts . Pratiquement tous les navigateurs les afficheront correctement (si vous les mettez dans d'autres formats). Il suffit de les héberger en tant que fichiers réguliers (ce qu'ils sont). Voici très bon tutoriel . Un avantage supplémentaire: vous n'avez pas besoin de penser à tromper Google
sIFR , Cufón , FLIR ou d'autres images-images - c'est vraiment du style ancien, inventé pour des raisons inconnues;) don utilisez pas ça.
Beaucoup de texte tapé dans quelques images c'est:
- long temps de chargement
- anti-seo (bien sûr, vous pouvez utiliser cloaking et proposer un contenu différent à Google bot et à l'utilisateur, mais c'est plus de travail et de tests, mais aussi risqué [les propriétaires de sites rivaux peuvent vous dire d'aller sur Google:])
Utilisez l’un des kits Font-Face de Font Squirrel . Le kit fournit 4 formats de police différents et le code CSS requis pour les utiliser. Fonctionne dans tous les navigateurs modernes et dans les anciennes versions IE!
Essayez d’utiliser la bibliothèque typeface.js ! Vous pouvez utiliser n'importe quelle police TrueType ou OpenType personnalisée en incluant simplement la bibliothèque en haut de votre page et en attribuant une classe spéciale à vos éléments à polices spéciales. C'est gratuit, open source, multi-plateforme, et les moteurs de recherche verront aussi votre texte. Aucune image nécessaire la bibliothèque gère tout cela et vous la concevez simplement comme une page Web typique.
Beaucoup de bonnes options ici pour des réponses. Semble Font Squirrel (http://www.fontsquirrel.com/fontface/generator) mérite une mention. Et oui, les API de polices de Google sont également excellentes.
En ce qui concerne la substitution d'image, personnellement, je recommanderais une étendue dans un élément, avec l'image en tant qu'arrière-plan du parent de l'étendue. Mais au lieu d’affichage: aucun sur l’envergure, position: absolu en dehors de l’écran. De cette façon, les lecteurs d’écran obtiennent toujours ce contenu.
Il me semble que je me souviens d’être sorti de l’écran, mais j’ai peut-être enfilé mon pantalon idiot.
Mais double aussi ouais - intégrer ces polices.
Construisez le site avec des images. Puis, dans quelques mois, à son retour, elle se plaint de ne pas être retrouvée par les moteurs. Reconstruisez le site avec du texte et facturez des frais supplémentaires!