Comment obtenir des images contenant du texte à indexer par les moteurs de recherche?

Je construis un petit site Web de portefeuille pour un ami, et étant dans la publicité et tout, elle déteste les polices standard et veut que tout soit écrit dans une police personnalisée.

Comme l'incorporation de polices CSS n'est pas vraiment une option pour le moment, tous les textes (heureusement, il n'y en a pas beaucoup) seront mis en images.

Comment pourrais-je toujours indexer le contenu des images? Pour les petits textes (liens, menu, etc ...), je mets le texte dans l'attribut alt, mais pour quelque chose de plus long, je ne pense pas que ce soit la solution. Que puis-je faire ? Placer le texte dans une div cachée à côté de l'image?

EMBED THE POLICES!

Non, mais vraiment, les polices embarquables 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 TTF, téléchargez-le ici: http://www.kirsle.net/wizards/ttf2eot.cgi

Il vous rendra le code et 2 fichiers (un TTF puis un EOT [M $ web font]). Copiez, collez, téléchargez, terminé. Gagner gagner!

Et s'il vous plaît, s'il vous plaît, n'utilisez pas d'images :)

Si vous le faites cependant, écrivez votre balisage comme si vous n'utilisez PAS d'images, puis ajoutez des images d'arrière-plan à tous les éléments et utilisez le retrait de texte: -9999px pour masquer le texte. Mais s'il vous plaît, utilisez simplement des polices incorporables. De plus, si vous êtes un client / ami est un photographe, elle (probablement ne devrait pas) utiliser un ancien navigateur (je veux dire, VRAIMENT ancien, comme IE4 ...)

Sauf si elle vend ses propres polices sur ce site, je pense que vous pourriez tous deux travailler davantage sur l'intégration CSS (ouais, je lis 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 (couleurs dégradées, alignement torsadé, brillant, gaufrage, gravure ...), ce qui rend vraiment impossible de rendre les options CSS complètes comme elle a besoin, alors je recommanderais de faire ce qui suit:

utilisez des images via CSS (peut-être un sprite) et masquez 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;}

C'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 utilisant cela.

Une autre façon serait d'utiliser la balise img à l'intérieur de la balise d'ancrage le long du texte, puis d'utiliser CSS pour masquer le texte et corriger le positionnement img si nécessaire. Cette dernière option vous donne la possibilité d'ajouter alt, title, longdesc à l'image, 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 fraîche: en utilisant la balise figure, disponible pour HTML5, avec figcaption. L'idée est de garder l'ancre-> figure-> img + figcaption.

Figcaption ferait 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 police car elle tue l'accessibilité de son site et cause tous les autres types de problèmes comme le ralentissement du rendu de ses pages, etc.

Cela dit, vous pouvez essayer d'ajouter l' longdescattribut à vos images. Il est difficile de dire quel poids, le cas échéant, les moteurs de recherche lui accordent, mais c'est probablement plus que zéro.

Bien que les polices Web soient à peu près standard dans tous les principaux navigateurs maintenant, il peut être difficile de déterminer les subtilités entre les différents navigateurs des différents formats de police.

Google fournit une belle API de polices Web et un 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 va pas vraiment apporter beaucoup de clarté à Google.

Le mieux est de convaincre votre ami que vous avez besoin de liens texte quelque part sur la page ou le site pour résoudre le problème. Par exemple, si vous pouvez configurer une page Sitemap avec tous les liens texte ou un menu déroulant sur chaque page avec tous les liens texte qui devraient fonctionner. Cela ne causera aucun dommage d'avoir cela en plus des images de lien.

Je suggère de ne pas utiliser de liens cachés car Google peut voir cela comme étant néfaste et réduire le classement 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 "sécurisées pour le Web". Il existe maintenant de nombreuses techniques de remplacement de polices qui fonctionneront de manière multi-navigateur. Pour un bon aperçu, consultez: le Guide du concepteur Web sur les méthodes de remplacement des polices . Vous n'avez pas à renoncer au référencement ou à recourir au référencement d'image. Vous pouvez avoir votre gâteau et le manger aussi.

J'avais l'habitude de le faire avec des images d'arrière-plan et des étendues imbriquées cachées. Est superbe pour les navigateurs de texte et les moteurs de recherche et propose des polices personnalisées pour les navigateurs 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; }

Production:

Voyez-le en action .

Il n'y a vraiment aucune limite à la quantité de texte que vous pouvez remplacer par 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 lui parler.

sFIR peut fonctionner à cet effet, mais son utilisation sera gourmande en ressources côté client et peut devenir délicate si vous devez intégrer des liens dans le texte.

1. Utilisez simplement les polices Web . Pratiquement n'importe quel navigateur les affichera correctement (si vous les mettez dans des formats alternatifs). Il suffit de les héberger en tant que fichiers réguliers (ce qu'ils sont). Voici un très bon tutoriel . Un autre avantage: vous n'avez pas besoin de penser à tromper Google

2. SIFR , Cufón , FLIR ou d'autres images-sprites - c'est vraiment du crabe-taureau à l'ancienne qui a été inventé pour des raisons inconnues;) ne l'utilisez pas.

3. Beaucoup de texte tapé dans quelques images c'est:

   • long temps de chargement
   • anti-seo (bien sûr, vous pouvez utiliser le camouflage et servir différents contenus au robot Google et à l'utilisateur, mais c'est juste plus de travail et de test et aussi risqué [les propriétaires de sites rivaux peuvent vous dire à google:])

Essayez d'utiliser la bibliothèque typeface.js ! Vous pouvez utiliser n'importe quelle police TrueType ou OpenType personnalisée simplement en incluant la bibliothèque en haut de votre page et en donnant à vos éléments à police spéciale une classe spéciale. Il est gratuit, open source, multiplateforme et les moteurs de recherche verront également votre texte. Aucune image nécessaire; la bibliothèque gère tout cela et vous la concevez simplement comme une page Web typique.

Beaucoup d'options intéressantes ici pour les réponses. Semble Font Squirrel (http://www.fontsquirrel.com/fontface/generator) mérite une mention. Et oui, les API Google Font sont également excellentes.

En ce qui concerne la substitution d'image, personnellement, je recommanderais une étendue dans un élément, avec l'image comme arrière-plan sur le parent de l'étendue. Mais au lieu de l'affichage: aucun sur la plage, position: absolu hors écran. De cette façon, les lecteurs d'écran obtiennent toujours ce contenu.

Je semble me souvenir d'avoir quitté l'écran pour l'emporter sur le retrait, mais peut-être que j'ai mon pantalon idiot.

Mais doublez aussi oui - intégrez ces polices.

Utilisez l'un des kits Font-Face de Font Squirrel . Le kit fournit 4 formats de police différents et le CSS correct requis pour les utiliser. Fonctionne dans tous les navigateurs modernes et dans les versions IE anciennes aussi!

Construisez le site avec des images. Puis dans les mois de rosée quand elle revient se plaindre de ne pas être retrouvée par les moteurs, reconstruisez le site avec du texte et facturez des frais supplémentaires!