Reemplazar texto H1 con una imagen de logotipo: ¿el mejor método para SEO y accesibilidad?

Parece que hay algunas técnicas diferentes, así que esperaba obtener una respuesta "definitiva" sobre esto ...

En un sitio web, es una práctica común crear un logotipo que enlace a la página de inicio. Quiero hacer lo mismo, mientras optimizo mejor para motores de búsqueda, lectores de pantalla, IE 6+ y navegadores que han desactivado CSS y / o imágenes.

Ejemplo uno: no utiliza una etiqueta h1. No es tan bueno para SEO, ¿verdad?

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

Ejemplo dos: Encontré esto en alguna parte. El CSS parece un poco hacky.

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

Ejemplo tres: mismo HTML, enfoque diferente usando sangría de texto. Este es el enfoque "Phark" para el reemplazo de imágenes.

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

Ejemplo cuatro: El método Leahy-Langridge-Jefferies . Aparece cuando las imágenes y / o CSS están apagados.

<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 */
}

¿Qué método es el mejor para este tipo de cosas? Proporcione html y css en su respuesta.

Te estás perdiendo la opción:

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

¡El título en href e img a h1 es muy, muy importante!

Lo hago principalmente como el anterior, pero por razones de accesibilidad, necesito admitir la posibilidad de que las imágenes se deshabiliten en el navegador. Por lo tanto, en lugar de sangrar el texto del enlace de la página, lo cubro colocando absolutamente <span>el ancho y la altura completos del <a>y usando z-indexpara colocarlo sobre el texto del enlace en el orden de apilamiento.

El precio está vacío <span>, pero estoy dispuesto a tenerlo allí para algo tan importante como 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 */  }

Si las razones de accesibilidad son importantes, use la primera variante (cuando el cliente quiera ver una imagen sin estilos)

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

No es necesario cumplir con los requisitos imaginarios de SEO, porque el código HTML anterior tiene la estructura correcta y solo usted debe decidir si esto es adecuado para sus visitantes.

También puede usar la variante con menos código 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}

Tenga en cuenta que he eliminado todos los demás estilos y hacks de CSS porque no se correspondían con la tarea. Pueden ser útiles solo en casos particulares.

Entrando un poco tarde aquí, pero no pudo resistir.

Tu pregunta es medio defectuosa. Dejame explicar:

La primera mitad de su pregunta, sobre el reemplazo de imágenes, es una pregunta válida, y mi opinión es que para un logotipo, una imagen simple; un atributo alt; y CSS para su posicionamiento son suficientes.

La segunda mitad de su pregunta, sobre el "valor de SEO" del H1 para un logotipo, es el enfoque incorrecto para decidir qué elementos usar para diferentes tipos de contenido.

Un logotipo no es un encabezado principal, o incluso un encabezado en absoluto, y usar el elemento H1 para marcar el logotipo en cada página de su sitio hará (un poco) más daño que beneficio para su clasificación. Semánticamente, los encabezados (H1 - H6) son apropiados para, bueno, eso: encabezados y subtítulos para contenido.

En HTML5, se permite más de un encabezado por página, pero un logotipo no merece uno de ellos. Su logotipo, que podría ser un widget verde difuso y algo de texto está en una imagen al costado del encabezado por una razón: es una especie de "sello", no un elemento jerárquico para estructurar su contenido. El primero (si usa más depende de su jerarquía de encabezado) H1 de cada página de su sitio debe encabezar su tema. El encabezado principal principal de su página de índice podría ser 'La mejor fuente de widgets verdes difusos en Nueva York'. El encabezado principal en otra página podría ser 'Detalles de envío para nuestros widgets difusos'. En otra página, puede ser 'Acerca de Bert's Fuzzy Widgets Inc.'. Tienes la idea.

Nota al margen: por increíble que parezca, no busque en la fuente de las propiedades web propiedad de Google ejemplos de marcas correctas. Esta es una publicación completa en sí misma.

Para obtener el mayor "valor SEO" del HTML y sus elementos, eche un vistazo a las especificaciones HTML5 y tome decisiones de marcado basadas en la semántica (HTML) y el valor para los usuarios antes que los motores de búsqueda, y tendrá un mayor éxito con su SEO

Creo que te interesaría el debate H1 . Es un debate sobre si usar el elemento h1 para el título de la página o para el logotipo.

Personalmente, iría con su primera sugerencia, algo así:

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

Por supuesto, esto depende de si su diseño usa títulos de página, pero esta es mi postura sobre este tema.

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

Esta fue la buena opción para SEO porque SEO le da a la etiqueta H1 alta prioridad, dentro de la etiqueta h1 debe estar el nombre de su sitio. Si usa este método si busca el nombre del sitio en SEO, también mostrará el logotipo de su sitio.

desea ocultar el nombre del sitio O el texto, utilice sangría de texto en valor negativo. ex

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

Te perdiste el título en el <a>elemento.

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

Sugiero poner el título en el <a>elemento porque el cliente querría saber cuál es el significado de esa imagen. Debido a que lo ha configurado text-indentpara la prueba de ese <h1>modo, ese usuario front-end podría obtener información del logotipo principal mientras se desplazan sobre el logotipo.

¿Cómo funciona el W3C?

Simplemente eche un vistazo a https://www.w3.org/ . La imagen tiene un z-index:1, el texto está aquí pero detrás debido z-index:0alposition: absolute;

El HTML original:

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

El CSS original:

#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 que nadie ha mencionado es el hecho de que el atributo h1 debe ser específico para cada página y el uso del logotipo del sitio replicará efectivamente el H1 en cada página del sitio.

Me gusta usar el índice az oculto h1 para cada página, ya que el mejor SEO h1 a menudo no es el mejor para las ventas o el valor estético.

Se supone que un nuevo método (Keller) mejora la velocidad sobre el método -9999px:

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

recomendado aquí: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

No sé, pero este es el formato que he usado ...

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

Simple y no ha hecho ningún daño a mi sitio hasta donde puedo ver. Podrías css pero no veo que se cargue más rápido.

Por razones de 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>

Después de leer las soluciones anteriores, utilicé una solución CSS Grid.

1. Crea un div que contenga el texto h1 y la imagen.
2. Coloque los dos elementos en la misma celda y haga que ambos estén relativamente posicionados.
3. Use la técnica anterior de zeldman.com para ocultar el texto utilizando las propiedades de sangría de texto, espacio en blanco y desbordamiento.

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