Sostituzione del testo H1 con un'immagine del logo: metodo migliore per SEO e accessibilità?

Sembra che ci siano alcune tecniche diverse là fuori, quindi speravo di ottenere una risposta "definitiva" su questo ...

Su un sito Web, è pratica comune creare un logo che rimanda alla homepage. Voglio fare lo stesso, ottimizzando al meglio i motori di ricerca, gli screen reader, IE 6+ e i browser che hanno disabilitato CSS e / o immagini.

Esempio uno: non utilizza un tag h1. Non buono per il SEO, giusto?

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Esempio due: trovato questo da qualche parte. Il CSS sembra un po 'confuso.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

Esempio tre: stesso HTML, approccio diverso usando text-indent. Questo è l'approccio "Phark" alla sostituzione delle immagini.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

Esempio quattro: il metodo Leahy-Langridge-Jefferies . Viene visualizzato quando le immagini e / o i CSS sono disattivati.

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

Qual è il metodo migliore per questo genere di cose? Fornisci html e css nella tua risposta.

Ti manca l'opzione:

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

il titolo in href e img in h1 è molto, molto importante!

Lo faccio principalmente come quello sopra, ma per motivi di accessibilità, devo supportare la possibilità che le immagini siano disabilitate nel browser. Quindi, piuttosto che indentare il testo dal link fuori dalla pagina, lo copro posizionando in modo assoluto <span>la larghezza e l'altezza dell'intero <a>e usando z-indexper posizionarlo sopra il testo del link nell'ordine di sovrapposizione.

Il prezzo è uno vuoto <span>, ma sono disposto ad averlo lì per qualcosa di importante come un <h1>.

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }

Se i motivi di accessibilità sono importanti, utilizza la prima variante (quando il cliente desidera vedere l'immagine senza stili)

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Non è necessario conformarsi a requisiti SEO immaginari, perché il codice HTML sopra ha una struttura corretta e solo tu dovresti decidere che è adatto a te visitatori.

Inoltre puoi usare la variante con meno codice HTML

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>

/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

Si prega di notare che ho rimosso tutti gli altri stili e hack CSS perché non corrispondono all'attività. Possono essere utili solo in casi particolari.

Rimproverando un po 'tardi qui, ma non ho resistito.

La tua domanda è mezzo imperfetta. Lasciatemi spiegare:

La prima metà della tua domanda, sulla sostituzione delle immagini, è una domanda valida, e la mia opinione è che per un logo, un'immagine semplice; un attributo alt; e CSS per il suo posizionamento sono sufficienti.

La seconda parte della tua domanda, sul "valore SEO" di H1 per un logo, è l'approccio sbagliato nel decidere quali elementi utilizzare per diversi tipi di contenuti.

Un logo non è un'intestazione principale, o addirittura un'intestazione, e l'uso dell'elemento H1 per contrassegnare il logo su ogni pagina del tuo sito farà (leggermente) più danni che benefici per le tue classifiche. Semanticamente, i titoli (H1 - H6) sono appropriati, beh, proprio per questo: titoli e sottotitoli per i contenuti.

In HTML5, è consentita più di un'intestazione per pagina, ma un logo non merita una di esse. Il tuo logo, che potrebbe essere un widget verde fuzzy e un po 'di testo è in un'immagine a lato dell'intestazione per un motivo: è una sorta di "timbro", non un elemento gerarchico per strutturare il tuo contenuto. Il primo (se ne usi di più dipende dalla gerarchia delle intestazioni) H1 di ogni pagina del tuo sito dovrebbe intitolarne l'argomento. L'intestazione principale principale della pagina dell'indice potrebbe essere "La migliore fonte di Fuzzy Green Widgets a New York". L'intestazione principale in un'altra pagina potrebbe essere "Dettagli di spedizione per i nostri widget fuzzy". In un'altra pagina, potrebbe essere "Informazioni su Fuzzy Widgets Inc. di Bert". Ti viene l'idea.

Nota a margine: per quanto possa sembrare incredibile, non guardare alla fonte delle proprietà web di proprietà di Google per esempi di markup corretti. Questo è un intero post a se stesso.

Per ottenere il maggior "valore SEO" dall'HTML e dai suoi elementi, dai un'occhiata alle specifiche HTML5 e prendi decisioni di markup basate sulla semantica (HTML) e sul valore per gli utenti prima dei motori di ricerca, e avrai un successo migliore con il tuo SEO.

Penso che saresti interessato al dibattito sull'H1 . È un dibattito sull'opportunità di utilizzare l'elemento h1 per il titolo della pagina o per il logo.

Personalmente vorrei seguire il tuo primo suggerimento, qualcosa del genere:

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

Naturalmente questo dipende dal fatto che il tuo design utilizzi i titoli di pagina, ma questa è la mia posizione su questo problema.

<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

Questa è stata la buona opzione per SEO perché SEO dà priorità al tag H1, all'interno del tag h1 dovrebbe esserci il nome del tuo sito. Usando questo metodo se cerchi il nome del sito in SEO, verrà mostrato anche il logo del tuo sito.

vuoi nascondere il nome del sito O il testo, utilizza il rientro del testo in valore negativo. ex

h1 a {
 text-indent: -99999px;
}

Hai perso il titolo <a>nell'elemento.

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

Suggerisco di mettere il titolo <a>nell'elemento perché il cliente vorrebbe sapere qual è il significato di quell'immagine. Poiché è stato impostato text-indentil test <h1>, l'utente front-end potrebbe ottenere informazioni sul logo principale mentre passa con il mouse sul logo.

Come funziona W3C?

Dai un'occhiata a https://www.w3.org/ . L'immagine ha un z-index:1, il testo è qui ma dietro a causa dell'accoppiamento z-index:0alposition: absolute;

L'HTML originale:

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

Il CSS originale:

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}

Un punto su cui nessuno ha toccato è il fatto che l'attributo h1 dovrebbe essere specifico per ogni pagina e l'utilizzo del logo del sito replicherà efficacemente l'H1 su ogni pagina del sito.

Mi piace usare l'indice az nascosto h1 per ogni pagina poiché il miglior SEO h1 non è spesso il migliore per vendite o valore estetico.

Un nuovo metodo (Keller) dovrebbe migliorare la velocità rispetto al metodo -9999px:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

consigliato qui: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Non lo so ma questo è il formato utilizzato ...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

Semplice e non ha fatto del mio sito alcun danno per quanto posso vedere. Potresti css ma non lo vedo caricare più velocemente.

Per motivi SEO:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>

Dopo aver letto le soluzioni di cui sopra, ho usato una soluzione Grid CSS.

1. Crea un div contenente il testo h1 e l'immagine.
2. Posiziona i due oggetti nella stessa cella e rendili entrambi relativamente posizionati.
3. Usa la vecchia tecnica di zeldman.com per nascondere il testo usando le proprietà di rientro del testo, spazio bianco e overflow.

<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>

.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

<h1><a href="/" title="Some title">Name</a></h1>

h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}

<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>

#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}