Come faccio a ottenere che le immagini contenenti testo vengano indicizzate dai motori di ricerca?

Sto costruendo un piccolo sito Web portfolio per un amico, e essendo nella pubblicità e tutto il resto, odia i caratteri standard e vuole che tutto sia scritto con un carattere personalizzato.

Dato che l'incorporamento dei font CSS non è in realtà un'opzione per il momento, tutti i testi (fortunatamente, non ce ne sono molti) verranno messi come immagini.

Come potrei ancora indicizzare il contenuto delle immagini? Per i piccoli testi (link, menu, ecc ...), inserisco il testo nell'attributo alt, ma per qualcosa di più lungo, non credo sia la soluzione. Cosa posso fare ? Metti il ​​testo in un div nascosto vicino all'immagine?

EMBED THE FONTS!

No, ma in realtà, i caratteri incorporabili funzionano su tutti i browser attuali (FF, Chrome, Safari, Opera) e IE5.5 + (sì, funziona in Internet Explorer dagli anni '90).

Ottieni il tuo TTF caricalo qui: http://www.kirsle.net/wizards/ttf2eot.cgi

Ti restituirà il codice e 2 file indietro (un TTF e quindi un EOT [M $ web font]) indietro. Copia, incolla, carica, fatto. Vinci, vinci!

E per favore, per favore, non usare le immagini :)

Se lo fai, scrivi il tuo markup come se NON STAI usando le immagini, quindi aggiungi immagini di sfondo a tutti gli elementi e usa il rientro del testo: -9999px per nascondere il testo. Ma per favore, usa solo caratteri incorporabili. Inoltre, se sei cliente / amico è un fotografo che probabilmente (non dovrebbe essere) utilizzando un browser antico (intendo, DAVVERO antico, come IE4 ...)

A meno che non stia vendendo i propri caratteri su questo sito Web, penso che entrambi potreste lavorare di più sull'incorporamento CSS (sì, ho letto che non è un'opzione per voi ora, ma insisto).

Se il caso è un lavoro grafico più pesante sui caratteri (colori sfumati, allineamento contorto, lucentezza, goffratura, incisione ...), che rende davvero impossibile rendere tutte le opzioni CSS di cui ha bisogno, allora consiglierei di fare quanto segue:

usa le immagini tramite CSS (forse uno sprite) e nascondi il testo di ancoraggio con 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;}

Questa è una tecnica. Sì, lo so, Google può punirlo, ma sai, non ho mai sentito parlare di un singolo sito penalizzato usando questo.

Un altro modo sarebbe usare il tag img all'interno del tag anchor ANCHE con il testo e quindi utilizzare CSS per nascondere il testo e correggere il posizionamento img, se necessario. Quest'ultima opzione ti dà la possibilità di aggiungere alt, titolo, longdesc all'immagine, aumentando la quantità di informazioni e la qualità da indicizzare.

Puoi anche andare oltre con quest'ultima opzione e cercare una soluzione ancora migliore e fresca: usare il tag figure, disponibile per HTML5, insieme a figcaption. L'idea è di mantenere anchor-> figure-> img + figcaption.

Figcaption renderebbe il ruolo del testo di ancoraggio e puoi usare CSS per nasconderlo.

Bene, 3 soluzioni. Sceglierne uno. Vorrei andare con l'ultimo.

Che schifo. Ha davvero bisogno di superare i suoi problemi di carattere mentre sta uccidendo l'accessibilità del suo sito e sta causando tutti gli altri tipi di problemi come rallentare il rendering delle sue pagine, ecc.

Detto questo, puoi provare ad aggiungere l' longdescattributo alle tue immagini. È difficile dire quanto peso, se del caso, i motori di ricerca gli danno, ma è probabilmente più di zero.

Mentre i font web sono praticamente standard in tutti i principali browser ora, capire le complessità cross-browser dei diversi formati di font può essere complicato.

Google fornisce un'API e una directory di font Web utili per aiutarti qui che potresti trovare utili.

L'uso delle immagini anche con i tag alt come unico modo per accedere ad altre pagine del sito non fornirà molta chiarezza a Google.

La soluzione migliore è convincere il tuo amico che hai bisogno di link di testo da qualche parte sulla pagina o sul sito per risolvere il problema. Ad esempio, se sei in grado di impostare una pagina Sitemap con tutti i link di testo o un menu a discesa su ogni pagina con tutti i link di testo che dovrebbero funzionare. Non provocherà alcun danno oltre a quello delle immagini dei collegamenti.

Suggerirei di non utilizzare collegamenti nascosti poiché Google può considerarlo nefasto e ridurre il ranking del tuo sito o contrassegnarlo come spam.

Come altri hanno suggerito, non è necessario utilizzare i caratteri standard "sicuri per il web". Ci sono molte tecniche di sostituzione dei caratteri disponibili ora che funzioneranno in modo cross-browser. Per una buona panoramica, consulta: La guida del web designer ai metodi di sostituzione dei caratteri . Non devi rinunciare al SEO o ricorrere all'immagine SEO. Puoi avere la tua torta e mangiarla anche tu.

Lo facevo con immagini di sfondo e intervalli nidificati nascosti. Sembra fantastico per i browser di testo e i motori di ricerca e ha caratteri personalizzati per browser più ricchi.

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; }

Produzione:

Guardalo in azione .

Non c'è davvero alcun limite alla quantità di testo che puoi sostituire con questo metodo (tag appropriati e stili nascosti in modi intelligenti) ma onestamente il carattere personalizzato che il tuo cliente desidera utilizzare è probabilmente molto meno leggibile rispetto a tutti i caratteri Web comuni. Dovresti davvero provare a parlarle.

sFIR potrebbe funzionare a questo scopo, ma utilizzarlo richiederà molte risorse sul lato client e potrebbe risultare complicato se è necessario incorporare collegamenti nel testo.

1. Usa solo i caratteri web . Praticamente qualsiasi browser li visualizzerà correttamente (se li metti in formati alternativi). Ospitali semplicemente come file normali (che sono). Ecco un ottimo tutorial . Un altro vantaggio: non devi pensare a come ingannare Google

2. sIFR , Cufón , FLIR o altri sprite di immagini - questo è davvero un granchio vecchio stile che è stato inventato per ragioni sconosciute;) non usarlo.

3. Un sacco di testo digitato in un paio di immagini è:

   • lungo tempo di caricamento
   • anti-seo (ovviamente puoi usare il cloaking e offrire contenuti diversi al bot e all'utente di Google, ma è solo più lavoro e test e anche rischioso [i proprietari di siti concorrenti possono dirti su google:])

Prova a utilizzare la libreria typeface.js ! Puoi utilizzare qualsiasi tipo di carattere TrueType o OpenType personalizzato semplicemente includendo la libreria nella parte superiore della pagina e assegnando ai tuoi elementi con caratteri speciali una classe speciale. È gratuito, open source, multipiattaforma e i motori di ricerca vedranno anche il tuo testo. Nessuna immagine necessaria; la libreria gestisce tutto questo e tu semplicemente lo progetti come una tipica pagina web.

Molte opzioni fantastiche qui per le risposte. Sembra che Font Squirrel (http://www.fontsquirrel.com/fontface/generator) meriti una menzione. E sì, anche le API di Google Font sono fantastiche.

Per quanto riguarda la sostituzione delle immagini, personalmente consiglierei un intervallo in un elemento, con l'immagine come sfondo sul genitore dell'intervallo. Ma invece di visualizzare: nessuno sull'intervallo, posizione: assolutamente fuori dallo schermo. In questo modo gli screen reader ottengono comunque quel contenuto.

Mi sembra di ricordare di essermi allontanato dallo schermo vincendo per trattino, ma forse ho i miei pantaloni stupidi.

Ma raddoppia anche sì - incorpora quei caratteri.

Utilizzare uno dei kit Font-Face di Font Squirrel . Il kit fornisce 4 diversi formati di carattere e il CSS corretto richiesto per usarli. Funziona su tutti i browser moderni e anche nelle versioni legacy di IE!

Costruisci il sito con immagini. Poi, nei mesi di rugiada, quando ritorna lamentandosi di non essere stata trovata dai motori, ricostruisce il sito con il testo e addebita un'altra tariffa!