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

240

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.

Andrés
fuente
debe consultar este tema en: stackoverflow.com/questions/1874895/…
meo
15
Matt Cutts contestando esta pregunta. youtu.be/fBLvn_WkDJ4
troynt
2
¿No es el titleatributo debe estar en el <a>?
bobo
23
Esta pregunta no debe marcarse como fuera de tema. Es una pregunta bastante clara sobre CSS y la optimización de motores de búsqueda. El hecho de que no sea C # no significa que no sea código.
MikeMurko
3
@troynt Encuentro que Matt Cutts a veces da consejos engañosos. Como tal, tiendo a no mirarlo.
TheBlackBenzKid

Respuestas:

221

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!

Rahul
fuente
12
¿envolver un h1 alrededor de una imagen con texto alternativo tiene el mismo peso (seo-wise) que el texto plano envuelto con un h1?
Andrew
11
Por cierto, es relevante, un logotipo es parte del contenido de su sitio web, no se usa para decoración, así que use <img> con el atributo alt no CSS para su logotipo.
Boris Guéry
14
Matt Cutts contestando esta pregunta. youtube.com/user/GoogleWebmasterHelp#p/search/0/fBLvn_WkDJ4
troynt
34
Lamentablemente, el enlace en el comentario dejado por @troynt ahora está roto. Aquí hay un nuevo enlace permanente al contenido: youtu.be/fBLvn_WkDJ4
ahsteele
10
Para todos los que se preguntan qué hay en el video vinculado: Matt Cutts básicamente dice, debe usar el atributo alt de la etiqueta img en lugar de ocultar el texto con css.
bjunix
17

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 */  }
Rob Knight
fuente
1
¿Qué tiene de malo la sangría? Mi suposición era que los lectores de pantalla y los rastreadores aún captan el texto a pesar de la sangría.
ckarbass
2
Lo siento, me tomó tanto tiempo volver aquí. El único problema con la sangría es si las imágenes están deshabilitadas en el navegador del usuario pero CSS está activado, no aparece nada, texto o imágenes. Es una especie de caso marginal, pero es importante tenerlo en cuenta para mí, trabajar en un sitio web de la universidad.
Rob Knight el
hmm ... no pude hacer que esto funcione. El texto de anclaje seguía apareciendo en la parte superior de la imagen.
Andrew
<nitpicker> use #logo span en su lugar, será más eficiente para el navegador renderizar </nitpicker>
Chris Missal
1
En algunos casos, necesita un {top: 0} para #logar un lapso.
Marcus
11

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.

se_pavel
fuente
3
display:noneno es accesible.
KPM
El mejor método es envolver el logotipo bajo div debido a su accesibilidad, usabilidad y optimización SEO, y se usa principalmente en grandes organizaciones web. Twitter, Amazon, Mozilla no usan <h1> para sus logotipos, sino los encabezados principales para capturar mejor el valor de la página. bit.ly/1MR4fr5
Oriol
4

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

Mattypants
fuente
1
Además de esto, todo esto es cierto, y el logotipo no debe ser el h1 en ninguna otra página, excepto en la página de inicio (e idealmente no en una página de inicio). Sin embargo, a menudo en una página de inicio, el lugar más relevante para el h1 será el logotipo, ya que el contenido del banner del héroe puede no ser lo suficientemente específico para el tema del sitio web (es decir, puede estar relacionado con un servicio o producto actual que se está promocionando en lugar de El tema central del sitio). Si el sitio solo tiene un área de enfoque (por ejemplo, un sitio para una aplicación), el área de héroe puede funcionar para el h1. Cuando no funciona, una imagen con alt envuelta en h1 es mejor que nada.
elmarko
3

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.

Ross
fuente
Estoy bastante seguro de que los IMG se consideran contenido, mientras que las imágenes de fondo CSS no lo son. Es por eso que tiendo a inclinarme hacia imágenes de fondo para imágenes de todo el sitio y cosas de esa naturaleza que no son explícitamente para el contenido de esa página.
Joe Phillips
@ d03boy: Bueno, en ese caso, podrías hacer un div en línea que tenga el tamaño correcto para el tamaño del logotipo y darle ese fondo. Un espacio en su interior (que tiene visibilidad: oculto;) proporcionará un reemplazo de "texto alternativo".
Ross
66
El debate del primer semestre ahora es un enlace muerto
alex
3
<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;
}
Vishal Gupta
fuente
2

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.

30ml
fuente
2

¿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;
}
Sebastien Horin
fuente
1

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.

DFA
fuente
Siempre puede usar H1 para el logotipo solo en la página principal.
Mariusz Jamro
0

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.

Taswiz
fuente
0

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>
Potky
fuente
0

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;
}
Dani Amsalem
fuente
-1
<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});
}
Rodrigo Reis
fuente
Es mejor no usar sangrías de texto masivas como esta, ya que causa un gran impacto en el rendimiento. Explicación detallada aquí .
Nick F
-1
<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;
}
Daniel Boundy
fuente