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

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 fuera de la página, lo cubro colocando absolutamente el <span> al ancho y alto completo del <a> y usando z-index para colocarlo encima del texto del enlace en el orden de apilamiento.

El precio es uno vacío <span>, pero estoy dispuesto a tenerlo allí por 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 hay necesidad de conformar requisitos imaginarios de SEO, porque el código HTML anterior tiene la estructura correcta y solo usted debe decidir hace esto adecuado para usted visitantes.

También puede utilizar 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 CSS y hacks porque no se correspondían con la tarea. Le sólo puede ser útil en casos particulares.

Creo que le 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 me gustaría ir con su primera sugerencia, algo en este sentido:

<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 utiliza títulos de página, pero esta es mi postura sobre este tema.

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

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

Sugiero poner title en el elemento <a> porque el cliente querría saber cuál es el significado de esa imagen. Debido a que ha establecido text-indent para la prueba de <h1> por lo tanto, ese usuario final podría obtener información del logotipo principal mientras se ciernen sobre el logotipo.

Estoy un poco tarde, pero no pude resistirme.

Tu pregunta es medio defectuosa. Permítanme explicar:

La primera mitad de su pregunta, sobre el reemplazo de imagen, 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 SEO" del H1 para un logotipo es el enfoque equivocado para decidir qué elementos usar para diferentes tipos de contenido.

Un logotipo no es un encabezado principal, ni siquiera un encabezado, y usar el elemento H1 para marcar el logotipo en cada página de tu sitio hará (ligeramente) más daño que bien para tus clasificaciones. Semánticamente, los encabezados (H1-H6) son apropiados para, bueno, solo eso: encabezados y subtítulos para el 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 fuera del lado del encabezado por una razón: es una especie de" sello", no un elemento jerárquico para estructurar tu contenido. La primera (si se utiliza más depende de su jerarquía de encabezados) H1 de cada página de su sitio debe encabezar su tema. El encabezado 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 ' Sobre Borroso de Bert Widgets Inc.'. Entiendes la idea.

Nota al margen: Por increíble que suene, no mires la fuente de las propiedades web propiedad de Google para ver ejemplos de marcado correcto. Esto es todo un puesto en sí mismo.

Para obtener el mayor "valor SEO" de 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 mejor éxito con su SEO.

<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. Usando este método, si busca el nombre del sitio en SEO, también mostrará el logotipo de su sitio.

Si desea ocultar el nombre del sitio O el texto, utilice text-indent en valor negativo. ex

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

Un punto que nadie ha tocado 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 un índice z h1 oculto para cada página, ya que el mejor SEO h1 a menudo no es el mejor para las ventas o el valor estético.

Creo que el ejemplo uno es más que suficiente ya que se mostrará texto alternativo si las imágenes están deshabilitadas. Esto también ayudará a los motores de búsqueda a conocer su sitio.

Actualización : Parece que me equivoqué. Compruebe este artículo.

No lo sé, pero este es el formato que han utilizado...

<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 por lo que puedo ver. Podrías css, pero no veo que se cargue más rápido.

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 /

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

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>