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

20

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?

Wookai
la source
7
Pourquoi les polices Web ne sont-elles pas une option? S'agit-il d'un portfolio professionnel? Si c'est le cas, déboursez les 50 $ et obtenez un bel ensemble de polices Web intégrables. Heck, vous pourriez partager le coût avec elle et obtenir une licence de site illimitée que vous pourrez réutiliser sur de futurs sites. Il existe également des polices Web gratuites assez agréables. C'est bien mieux que d'utiliser des images pour le corps du texte.
Lèse majesté
+1 @ Lèse Vraiment, c'est la seule voie à suivre.
Virtuosi Media
Eh bien, ce n'est pas une option car il n'est pas pris en charge par les principaux navigateurs, n'est-ce pas?
Wookai
1
Oui, c'est tout le chemin du retour vers IE5.5 ... lire ma réponse ci-dessous :)
Oscar Godson
Wow, quelle catastrophe, c'est un bon exemple de la raison pour laquelle les professionnels du logiciel ne deviendront jamais obsolètes ... quelqu'un doit empêcher les gens d'affaires de faire des erreurs tragiques.
Mark Rogers

Réponses:

17

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 ...)

Oscar Godson
la source
1
Merci, je pensais vraiment que l'incorporation de polices n'était pas encore prise en charge! Je vais essayer votre site Web!
Wookai
Chose sûre! J'espère que ça aide: D
Oscar Godson
Il convient de noter que vous ne pouvez pas simplement utiliser n'importe quelle police en raison de problèmes de droit d'auteur - vérifiez d'abord les conditions de licence!
DisgruntledGoat
6

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.

Dave
la source
Merci beaucoup pour votre réponse ! Vos solutions sont vraiment intéressantes, surtout la dernière.
Wookai
5

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.

John Conde
la source
Eh bien, les balises alt ne sont-elles pas ici pour l'accessibilité? Merci pour le conseil longdesc cependant, je n'étais pas au courant de son existence.
Wookai
1
+1 Cela ressemble à une opportunité d'éduquer le client sur la façon dont ses polices idéales n'obtiendront pas des résultats idéaux ... bien que, malheureusement, certains clients soient très réticents à accepter comment les documents HTML sont "supposés" fonctionner.
danlefree
3

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.

Phil Mander
la source
2

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.

Ben Hoffman
la source
Je vais certainement mettre en place un plan du site, mais cela ne
résoudra
@wookai - Google indexera les liens d'images qu'il ne connaît peut-être pas autant à leur sujet. Par conséquent, si vous avez une page Sitemap avec du texte intégral dans chaque lien, cela donnera à Google plus d'informations sur les pages de votre site.
Ben Hoffman
2

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.

Virtuosi Media
la source
2

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:

Bienvenue sur Hell on Wheels

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.

Annika Backstrom
la source
Avez-vous testé cela sur des navigateurs de texte? Je sais que de nombreux lecteurs d'écran ignorent le display: nonetexte, et je pense que les navigateurs texte uniquement le font aussi.
Lèse majesté
Les deux lynxet linksafficher le texte. Si c'est un problème avec les lecteurs d'écran, j'utiliserais h1 span { position: absolute; left: -9999px; }. Cependant, je n'ai pas de lecteur d'écran à portée de main pour les tests.
Annika Backstrom
Je suppose que vous avez raison, mais sachez que cela ne fonctionnera pas sur la plupart des lecteurs d'écran: css-discuss.incutio.com/wiki/Screenreader_Visibility Aussi, j'utilise NVDA pour les tests sur Windows. C'est un lecteur d'écran FOSS si vous voulez le vérifier.
Lèse majesté
1

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.

danlefree
la source
1
Pourtant, c'est 100% mieux que d'avoir des images comme corps de texte. C'est probablement l'une des choses les moins professionnelles que vous puissiez faire sur un site Web - pas de mise en évidence, pas de copier-coller, pas de recherche, pas de redimensionnement ...
Lèse majesté
1
  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:])
Alex Bolotov
la source
1

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.

Ricket
la source
1
Brillant, mais très illégal dans la plupart des cas. = P Il y a très très peu de polices commerciales qui peuvent être intégrées directement sur les pages Web, même si vous avez acheté une licence pour celle-ci. J'imagine qu'une partie de la raison pour laquelle les fonderies de type ont finalement concédé aux polices Web est que les polices intégrées ne seraient pas (facilement) utilisables à d'autres fins. Mais si vous téléchargez une police OTF ou TTF, toute personne visitant votre site recevra une copie avec laquelle elle peut désormais faire ce qu'elle veut.
Lèse majesté
1

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.

folktrash
la source
oh, et voici mon vote contre sifr et cufon.
folktrash
1

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!

Lèse majesté
la source
0

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!

David Heffernan
la source
3
cela me semble un peu irresponsable, cependant ..
Jeff Atwood
OK, alors pourquoi ne pas créer un clone de son site Web préféré en utilisant des images pour le texte et modifier son hostsfichier pour pointer vers le clone, et la forcer à utiliser ce site pendant 2 semaines?
Lèse majesté
@Jeff bien, j'étais juste un peu ironique ......
David Heffernan