Elenco articoli. Titoli tra H2 ma sono immagini. Conviene?

[fuocorosso]

Elenco articoli. Titoli tra H2 ma sono immagini. Conviene?

In una pagina history ho un elenco degli ultimi 20 articoli inseriti, ogni articolo in elenco ha Titolo e sottotitolo.

Il titolo però è una immagine.

E' consigliato secondo voi inserire queta immagine tra tag H2?

E se così fosse cosa consigliate di mettere come attributi di questa immagine? title="" and alternate=""

<h2></h2>

Grazie,

fuocorosso

[everfluxx]

@fuocorosso said:

E' consigliato secondo voi inserire queta immagine tra tag H2?
No. I tag <H1>, <H2> ecc. sono fatti per contenere testo.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

[dell.orto.fabio]

Carissimo Fuocorosso, NO !!!!

Non servirebbe proprio a nulla, probabilmente neanche per lo spider di msn, che solitamente è estremamente generoso con i siti che fanno uso di forme obsolete di posizionamento, quale è appunto l'uso degli headline.

Con questa affermazione non voglio dire, che essi non servano più a nulla, qualche polvere probabilmente l'alzano ancora, soprattutto con msn e yahoo, sicuramente molto meno con lo zio GG ! per "Lui" ormai ci vuole ben altro.

[everfluxx]

@Dell'Orto Fabio said:

forme obsolete di posizionamento, quale è appunto l'uso degli headline.
L'uso (corretto) dei tag headline non è una "forma obsoleta di (tecnica di) posizionamento". E' semplicemente buon HTML.

[dell.orto.fabio]

Si certo la colpa è mia perchè non mi sono spiegato.

Volevo solo dire che "ieri" l'uso degli headline al fine di dare più rilevanza a una pagina, era molto più importante di quanto lo sia "oggi".

Ma è molto meglio così, si evitano pagine cariche di headline oltre la misura consentita dal solo buon senso... e tra quanti ne facevano uso smodato mi ci metto pure io.

[everfluxx]

@Dell'Orto Fabio said:

Volevo solo dire che "ieri" l'uso degli headline al fine di dare più rilevanza a una pagina, era molto più importante di quanto lo sia "oggi".
L'uso (corretto) dei tag headline --e del markup strutturale in genere-- riveste ancora oggi un'importanza fondamentale, anche dal punto di vista SEO. Ma attenzione a non confondere uso (corretto) e abuso (a fini SEO).

A tal proposito vi rimando agli [url=http://www.giorgiotave.it/forum/viewtopic.php?p=88822#88822]ottimi consigli di LowLevel.

[lowlevel]

@Everfluxx said:

No. I tag <H1>, <H2> ecc. sono fatti per contenere testo.

Secondo te, tenendo in considerazione la funzione del tag H1, che è strettamente semantica, il seguente codice:

<h1>Addio mia bella Napoli</h1>

...possiede la stessa valenza semantica del codice seguente?

<h1></h1>

(a prescindere da ciò che i motori poi relamente valutano o premiano)

[everfluxx]

E' una domanda difficile.

Mi chiedi se, secondo me, un'immagine circondata da tag <H1> possiede la stessa valenza semantica di un testo, nello stesso tag. E di darti questa valutazione "a prescindere da ciò che i motori poi realmente valutano o premiano".

Devo perciò interpretare la tua domanda come segue: "dimmi se per te un'immagine circondata da tag <H1> ha lo stesso significato di un header testuale".

Se la mia interpretazione della tua domanda è corretta, la risposta è quasi ovvia: no, certo che no. Da utente, non ho alcun modo di vedere, senza guardare il sorgente dell'HTML, se un'immagine è inclusa fra tag <H1> oppure no, mentre solitamente posso identificare "a colpo d'occhio" come intestazione di pagina il testo contenuto nel tag <H1>, grazie alla sua presentazione visuale (sebbene questa dipenda dal foglio di stile eventualmente associato al documento), e interpretarlo quindi come tale.

Un caso leggermente diverso è questo:

<h1>![image](img/addio-napoli.jpg)Addio mia bella Napoli</h1>

In questo caso l'immagine inclusa nel tag <H1> viene presentata a fianco dell'intestazione, e diventa quindi molto più facile associarla (visualmente e semanticamente) a quest'ultima. Ma la presenza di un contenuto testuale nel tag <H1> rimane comunque, a mio avviso, imprescindibile.

[everfluxx]

OK, ho capito solo ora la tua domanda, rileggendola per la terza volta.

Tu volevi da me una risposta astratta, non la mia opinione personale.

Se è questo che vuoi, la risposta "astratta" è: avendo i tag heading una funzione prettamente strutturale/semantica, sì, un'immagine inclusa fra tag <H1> ha lo stesso significato astratto di un contenuto testuale nello stesso tag; pertanto, può avere senso includere l'immagine fra tag heading quando, come nel caso di Fuocorosso, tale immagine riveste la funzione di intestazione nel contesto del documento in cui appare.

Fuocorosso, però, voleva sapere cos'è meglio fare dal punto di vista dei motori di ricerca.

E io gli ho consigliato quello che secondo me è meglio fare in generale (per i motori di ricerca e per gli utenti), secondo la mia interpretazione della specifica HTML 4.01.

Ho fatto male?

[everfluxx]

Un'ultima postilla:

La risposta più corretta alla tua domanda è: dipende.

Infatti, trovo molto più sensato (e coerente con la sua funzione) usare il tag <H1> intorno a un'immagine come questa:

che non, ad esempio, intorno a un'immagine come questa:

[everfluxx]

OK, OK, OK, OK.

Ho detto una ca@ata, e anche grossa (probabilmente ne dico in continuazione, e ringrazio LowLevel per avermi fatto ragionare e accorgermi dell'errore): il fatto è che avevo letto distrattamente il quesito di Fuocorosso, e non avevo prestato la necessaria attenzione a questo:

@Fuocorosso said:

Il titolo però è una immagine.
(Una cosa fondamentale che anche tu però, permettimi Low, hai tralasciato di indicare nella tua domanda).

La mia risposta "definitiva" al quesito di Fuocorosso è perciò: se l'immagine ha la funzione di titolo/sottotitolo, allora va inclusa fra tag <H1>/<H2>. (L'accendiamo? Sì).

Questa è sicuramente la cosa migliore e più corretta da fare, da tutti i punti di vista: quello "astratto" (dell'interpretazione della specifica HTML), quello dell'usabilità/accessibilità, e quello dei motori di ricerca.

Per gli utenti che utilizzano browser grafici non farà una grossa differenza il fatto che l'immagine-titolo sia inclusa in un tag <H1> o meno; la potrà fare, però, per chi utilizza altri tipi di client e per i motori di ricerca, i quali potranno interpretare correttamente il testo alternativo associato all'immagine (contenuto dell'attributo "alt") come titolo della pagina o del paragrafo.

Fermo restando, ovviamente, che:

1. -ove possibile- è sempre preferibile usare un testo, e non un'immagine, come titolo o sottotitolo;
2. non bisogna abusare dei tag heading, mettendoli alla rinfusa o usandoli su elementi (grafici o testuali) che non hanno la funzione di titolo o sottotitolo nel contesto del documento.

Ma questo dovrebbe essere l'ABC del web designer, prima ancora che del SEO.

[lowlevel]

@Everfluxx said:

E' una domanda difficile.

E' anche colpa mia, perché ho posto la domanda in maniera molto generica.

Chiarisco subito che mi interessava la tua opinione personale, visto che mi pare tu sia ferrato in materia. Insomma, avevo voglia di fare solo un po' di brainstorming assieme.

Circa la domanda, la ripropongo in questa forma: "E' corretto ritenere che un tag H1 debba attribuire la proprietà di intestazione tanto ad un testo quanto ad un alternative text?"

@Everfluxx said:

Da utente, non ho alcun modo di vedere, senza guardare il sorgente dell'HTML, se un'immagine è inclusa fra tag <H1> oppure no

Eppure esiste una differenza visuale tra il seguente codice:

Paragrafo di testo bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.

...ed il codice seguente:

Paragrafo di testo bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <h1></h1> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.

@Everfluxx said:

Infatti, trovo molto più sensato (e coerente con la sua funzione) usare il tag <H1> intorno a un'immagine come questa: [...]

Concordo. Allora estendiamo l'analisi ad un caso leggermente più specifico, includendo nel tag IMG le dimensioni visuali dell'immagine:

<h1>![image](img/addio-napoli.jpg)</h1>

Ciò che mi piacerebbe capire è:

1. se ha senso usare il tag H1 per attribuire la proprietà di intestazione ad un alternative text

2. se ha senso per un motore di ricerca considerare intestazione un'immagine ed il contenuto del suo attibuto ALT nel caso in cui il motore sia in grado di determinare se l'immagine appare visualmente come un'intestazione (semplificando: separata dal testo sia sopra che sotto), a prescindere dall'uso dei tag Hx.

[everfluxx]

@LowLevel said:

Chiarisco subito che mi interessava la tua opinione personale, visto che mi pare tu sia ferrato in materia. Insomma, avevo voglia di fare solo un po' di brainstorming assieme.
Ti ringrazio molto per la stima, che con ogni probabilità non merito (se fossi davvero "ferrato", avrei risposto subito correttamente e senza tante esitazioni).

Circa la domanda, la ripropongo in questa forma: "E' corretto ritenere che un tag H1 debba attribuire la proprietà di intestazione tanto ad un testo quanto ad un alternative text?"
Ti rispondo con un piccolo test: http://everfluxx.googlepages.com/addio-mia-bella-napoli.html

Il sorgente della pagina è questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Addio mia bella Napoli</title>
</head>
<body>
<h1>![image](addio-napoli.jpg)</h1>
<h1>Addio mia bella Napoli</h1>
</body>
</html>

Il primo tag <H1> contiene un'immagine che non esiste sul server.

Come puoi vedere, a differenza di Explorer, Firefox renderizza il contenuto dell'attributo "alt" associato all'immagine nel primo tag <H1> con lo stesso font size usato per il secondo tag <H1> (che contiene invece il testo "Addio mia bella Napoli").

Quella di Firefox è, a mio modesto avviso, l'interpretazione visuale più corretta, che mi porta a ritenere che la risposta alla tua domanda sia sì.

Eppure esiste una differenza visuale tra il seguente codice: [...] ...ed il codice seguente:
Hai ragione: un tag <H1> produce sempre un'interruzione di linea (e una spaziatura verticale sopra e sotto), e questo è percepibile visualmente.

includendo nel tag IMG le dimensioni visuali dell'immagine:
Ciò che mi piacerebbe capire è:

1. se ha senso usare il tag H1 per attribuire la proprietà di intestazione ad un alternative text
   IMHO, sì (vedi sopra: ho incluso appositamente quegli attributi "width" e "height" nell'immagine nel primo tag).

2. se ha senso per un motore di ricerca considerare intestazione un'immagine ed il contenuto del suo attibuto ALT nel caso in cui il motore sia in grado di determinare se l'immagine appare visualmente come un'intestazione (semplificando: separata dal testo sia sopra che sotto), a prescindere dall'uso dei tag Hx.
   IMHO, probabilmente sì. A mio avviso è ragionevole pensare che Google assegni minore rilevanza a un'immagine di piccole dimensioni rispetto a un'immagine che, per dimensioni e proporzioni, può essere interpretata come un'intestazione o un altro elmento importante del documento. Per contro, è altrettanto probabile che Google non veda di buon occhio immagini molto piccole (es. 1x1 pixel o 2x2 pixel) "caricate" di attributi alt particolarmente verbosi (specialmente quando a quelle immagini è associato un link).

</my opinion>

[everfluxx]

E' un po' OT, ma cercando su Google qualche altra opinione sull'argomento ho trovato un articolo molto interessante su A List Apart: [url=http://www.alistapart.com/articles/dynatext]Dynamic Text Replacement.

L'articolo spiega come creare titoli grafici con PHP (e la [url=http://www.boutell.com/gd/]libreria grafica GD), mantenendo il completo controllo sul loro aspetto visuale (font, dimensioni ecc.), e sostituendo dinamicamente (con JavaScript) il contenuto testuale dei tag heading (<H1>, <H2> ecc.) con l'immagine-titolo corrispondente.

La demo dello script è qui: http://www.stewartspeak.com/projects/dtr/examples/

Se guardate il sorgente HTML, noterete che i titoli che appaiono in grafica sono in realtà dei normali tag heading:

<h1>Dynamic Text Replacement</h1>

<h2>Fight Font-Ache: Control Your Typeface</h2>

Ricaricando la pagina col supporto JavaScript disabilitato, vedrete infatti i titoli come testo, così come li "vedranno" i crawler dei motori di ricerca.

Questo metodo può essere un buon compromesso nel caso in cui, per esigenze di visual design, non si possa fare a meno di utilizzare titoli grafici con un certo font, ma si voglia comunque mantenere l'intero contenuto della pagina editabile (direttamente o via CMS) e accessibile ai motori di ricerca.

<added>A questo punto Stuart interverrà per spiegarci come sia possibile fare la stessa cosa, e meglio, in Flash. :)</added>

[stuart]

@Everfluxx said:

<added>A questo punto Stuart interverrà per spiegarci come sia possibile fare la stessa cosa, e meglio, in Flash. :)</added>
Una piccola digressione off topic che però mi faccio perdonare fornendo una gustosa info. Ricordate quando si diceva che Google indicizza gli attributi ALT delle immagini solo se le immagini sono usate come collegamento ipertestuale? Bene, non è più così. Non so da quanto, credo non tantissimo comunque, ma ora indicizza anche l'ALT delle immagini non linkate.
[url=http://www.google.com/search?sourceid=navclient-ff&ie=UTF-8&rls=GGGL,GGGL:2006-11,GGGL:en&q=%22pagerank+revealed+easy%22]"pagerank revealed easy"

Anyway, per i grafici che -cordialmente- odiano il look e le limitazioni dei font classici per il web (verdana, arial, times new roman...) esiste il Scalable Inman Flash Replacement (sifR), arrivato alla versione 2.0, il cui sito ufficiale è questo:
http://www.mikeindustries.com/sifr/
Il principio di funzionamento è pressochè identico al Dynamic Text Replacement indicato da Everfluxx con il vantaggio però che non richiede php e le GD libraries.

In pratica, tramite css e javascript, i font presenti in una pagina web vengono sostituiti da font in Flash. Dal punto di vista codice html però tutto resta assolutamente search engine friendly.

Ho usato il sifR per il sito dei fattori arcani, che ne rappresenta una simpatica demo
http://xoomer.alice.it/ultratasted/fattori-arcani/

Se controllate il sorgente pagina, notate che i testi sono normalmente formattati con h1, h2....(come per l'esempio postato da Everfluxx)
**
Vantaggi:** si può usare qualsiasi font, anche non presente sul pc dell'utente, è facile da usare. Qualsiasi sito può implementarlo, visto non richiede linguaggi server side.
Svantaggi: le pagine che includono lo scripting sifR non possono essere validate W3C xhtml1.0, l'accesso alla pagina è -di poco- rallentato.

Check it out

Cordialmente,
Stuart

[catone]

Dirò una stupidaggine, Everfluxx sopportami :D.

Mi chiedo però se sia effettivamente necessario utilizzare un'immagine per un titolo. Probabilmente vi sono casi in cui un layout ne ha effettiva necessità, ma credo siano molto molto rari, molto più di quanto si creda.

Quello che voglio dire, se partiamo dal presupposto che un sito debba essere ben posizionato per generare ROI, allora, secondo me, l'aspetto grafico e l'estetica dovrebbero, se serve, essere subordinati a tutti quegli interventi necessari ad un posizionamento.
Di conseguenza, essendo certa la valenza di un h1 su di un'immagine o per meglio dire, non essendo certi che, in valore assoluto, sia la stessa di un h1 testuale, io propenderei sempre per un h1 testuale.

Altro quesito: poniamo che io inserisca l'immagine in h1 e vi inserisca anche un titolo testuale in uno span poi nascosto, come viene interpretata dai motori tale tecnica, ammettendo che in misura percentuale la quantità di testo nascosto sia infinitesimale?
E ancora creando un titolo in flash con tag object e inserendo l'h1 testuale giusto prima della chiusura del tag non otterrei due piccioni con una fava: ho codice valido, non posso essere accusato di utilizzare tecniche scorrette, se il browser non vede il titolo allora riproduce il testo ad esso associato.

[everfluxx]

@Catone said:

Quello che voglio dire, se partiamo dal presupposto che un sito debba essere ben posizionato per generare ROI, allora, secondo me, l'aspetto grafico e l'estetica dovrebbero, se serve, essere subordinati a tutti quegli interventi necessari ad un posizionamento.
In linea di massima sono d'accordo con te; bisogna però riconoscere che in alcuni settori (es. design, architettura, arredamento) l'aspetto grafico può rivestire un'importanza imprescindibile ai fini della comunicazione, e perciò anche del marketing.

In tutti quei casi in cui non si può fare a meno di utilizzare titoli grafici, le tre tecniche appena discusse (header tag su immagini, dynamic text replacement, sifR) possono costituire una soluzione efficace al dilemma "accessibilità [non solo per i motori di ricerca] vs. coerenza visuale".

Altro quesito: poniamo che io inserisca l'immagine in h1 e vi inserisca anche un titolo testuale in uno span poi nascosto, come viene interpretata dai motori tale tecnica, ammettendo che in misura percentuale la quantità di testo nascosto sia infinitesimale?
Impossibile quantificartela con esattezza, ma direi che l'uso di contenuti nascosti comporti sempre una certa percentuale di rischio, perciò personalmente me ne terrei bene alla larga. E poi, a che pro includere un testo nascosto, quando sappiamo che Google indicizza anche il contenuto degli attributi ALT delle immagini non linkate (vedi sopra --thanks Stuart)?

E ancora creando un titolo in flash con tag object e inserendo l'h1 testuale giusto prima della chiusura del tag non otterrei due piccioni con una fava: ho codice valido, non posso essere accusato di utilizzare tecniche scorrette, se il browser non vede il titolo allora riproduce il testo ad esso associato.
Credo che il posto più indicato dove includere un contenuto alternativo a un oggetto Flash sia il tag NOEMBED (vedi [url=http://www.google.it/search?q=noembed+site:www.giorgiotave.it%2Fforum%2F]topic precedenti su questo forum).

[catone]

Non mi funziona il quote.
Ok per tutto, però il noembed non lo uso perchè elimino sempre l'embed altrimenti non valido e con il solo object posso cmq inserire qualsiasi tag html, anche se propriamente dovrei inserire del contenuto alternativo all'animazione flash.

[everfluxx]

@Catone said:

Non mi funziona il quote.
Neanche a me. Si tratta di un fastidioso bug di phpBB: rispondendo a un post contenente più citazioni, il quote va fatto a mano.

Ok per tutto, però il noembed non lo uso perchè elimino sempre l'embed altrimenti non valido e con il solo object posso cmq inserire qualsiasi tag html, anche se propriamente dovrei inserire del contenuto alternativo all'animazione flash.
Hai ragione, dimenticavo il problema della validazione XHTML:
@Stuart said:
Per il contenuto alternativo è possibile utilizzare il tag NOEMBED (anche se deprecato nelle specifiche xhtml 1.0) oppure inserendo direttamente dei contenuti alternativi nel tag OBJECT (metodo validabile xhtml 1.0).
http://www.giorgiotave.it/forum/viewtopic.php?p=71351#71351

[everfluxx]

@Stuart said:

Svantaggi: le pagine che includono lo scripting sifR non possono essere validate W3C xhtml1.0, l'accesso alla pagina è -di poco- rallentato.
Una precisazione, riguardo al problema del rallentamento: anche la tecnica Dynamic Text Replacement comporta un rallentamento nella visualizzazione degli elementi grafici. Il rallentamento è direttamente proporzionale al numero di titoli grafici presenti su una data pagina moltiplicato per il numero di richieste concorrenti di tale pagina, poiché le immagini vengono generate on-the-fly da PHP, perciò lato server.

I contenuti in Flash, invece, come sappiamo vengono generati lato client, perciò l'eventuale rallentamento nel rendering dei testi sifR varierà in base alla velocità di processore e scheda grafica del computer di ciascun navigatore.