H1 vs H2 vs Otro para título / logo del sitio web y SEO

Es una práctica común para los desarrolladores front-end poner el título o el logotipo del sitio web en la etiqueta H1 y el título en H2. Pero la mayoría de las veces el título de la página / artículo es más importante porque lleva el valor del contenido. Entonces mi pregunta es cuál es el mejor enfoque desde el punto de vista semántico y SEO. Ejemplos:

• logo - H1, título - H1
• logo - H1, título - H2
• logotipo - H2, título - H1
• logo - otra etiqueta, título - H1

Proporcionó otras variantes si cree que tendrán un efecto mayor.

Por lo general, no pongo el logotipo o el título del sitio en un H1. La forma en que me gusta verlo es que cada página es un documento. Ese documento trata sobre un tema en particular, como se refleja en el título de la página y también en el encabezado principal. El sitio web en sí es solo el editor del documento. Entonces, semánticamente, es incorrecto usar el logotipo o el nombre del sitio como encabezado principal de cada página. Los logotipos se muestran de manera prominente para recordarle al usuario dónde se encuentran y para fines de marca, pero en realidad no son parte del contenido o documento.

Quiero decir, cuando miras una noticia, es posible que veas un pequeño logotipo del canal de noticias en la esquina, pero la noticia no se titulará "CNN" o "BBC News". El titular será sobre la historia, no sobre la red que publica la historia. Del mismo modo, cuando lee una revista, solo se utiliza el título del artículo en el encabezado, no el nombre de la publicación.

También es semánticamente incorrecto usar una etiqueta H1 para el logotipo / nombre del sitio y una para el título del documento. Los encabezados definen la estructura jerárquica del contenido en la página; usar uno para el nombre del sitio y otro para el título del documento es como decir, esta página tiene 2 secciones principales: "midominio.com" y "contáctenos".

Consulte la página 37 del documento de boleta de calificaciones de SEO de Google :

La mayoría de las páginas principales de productos tienen la oportunidad de usar una <h1>etiqueta, como en el ejemplo anterior, pero actualmente solo usan otras etiquetas de encabezado ( <h3>en este caso) o un estilo de fuente más grande. Si bien el diseño del texto para que parezca más grande podría lograr la misma presentación visual, no proporciona el mismo significado semántico al motor de búsqueda que una <h1>etiqueta. El nombre del producto y / o algunas palabras sobre sus características son geniales para tener en una <h1>etiqueta para la página principal del producto.

Según el propio análisis de Google de sus ofertas, llegaría a la conclusión de que Google espera que aparezca un valor único específico de la página en un H1 (la ilustración en el documento vinculado ilustra esto).

Aquí hay una buena razón: su logotipo es una imagen, no un <h1>

Semánticamente, <h1>debe usarse para el título de la página, y el título de la página debe ser único por página. Su logotipo o nombre del sitio no es el título de la página (aparte de quizás la página de inicio).

Su logotipo / nombre del sitio debe estar en un div simple, tal vez con ID de 'encabezado'. O la <header>etiqueta si usa HTML5.

En mi opinión, solo debe haber un H1 en la página. Y el H1 siempre debe estar antes del H2, para mantener una jerarquía correcta de su contenido.

El logotipo a menudo se repite en cada página y, como usted dice, en la mayoría de las páginas el título es casi siempre más importante.

En la página de inicio consideraría usar:
logo / title - H1 [, title - H2]
Aunque, en su página de inicio, el logo podría ser su título.

Sin embargo, en todas las páginas siguientes elegiría:
logotipo - otra etiqueta, título - H1
Incluso teniendo el logotipo como imagen de fondo si corresponde.

Lo que realmente está buscando en su etiqueta H1 es el título de la página o lo que hace que esta página sea única. Si está utilizando una imagen, debe hacerlo con un método alternativo para la degradabilidad:

<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>

<h1><span>Unique Page Title</span></h1>

De esta forma, puede configurar una imagen para que aparezca en el H1 (que las personas a menudo usan mal como el área del logotipo) y aún tener un buen contenido dentro para las personas que usan experiencias degradadas de Internet. También hace feliz tu valor de SEO.

Esta es una pregunta excelente, debido a las prácticas (y plantillas) que existen.

Personalmente, me gusta referirme a la lógica "Esquema 101", considerando lo siguiente:

H1 es como un título (ciertamente le gusta complementar su título HTML) y debe haber solo uno por página, al igual que una página solo tiene un título

H2 es algo así como los números romanos en el esquema: I., II., III., Etc.

H3 sería el esquema equivalente de A., B., C.

A menudo, el uso práctico de esta lógica es difícil de aplicar exactamente en una página web: hay tantos fragmentos incidentales de información que simplemente no se acumulan en esa jerarquía. Sin embargo, si te sientas y tratas de romperlo con esa lógica, siento que hay un beneficio para la disciplina.

Estoy h1por el título principal. Y el título principal es el nombre del sitio decorado, o como lo llamas, logotipo. Aquí está el punto: en el encabezado del sitio web, el logotipo no es en realidad un logotipo, es el encabezado ilustrado del sitio. A los diseñadores les gusta diseñarlo como logotipo.

¿Qué hay de malo con LOGO -> H1?

<div>Google</div>
<h1>About Us</h1>

Ahora, como h1es la sección más importante, ya que le dice al visitante de qué se trata, el visitante no puede entender la página, porque h1es demasiado específica. ¿Sobre quien?

<h1>Google</h1>
<h2>About Us</h2>

Esta página es sobre Google. Aquí está la sección sobre nosotros. ¿Ves, no hay duda? Todo está claro.

Segundo punto.

Estructura de la página. Si coloca el encabezado principal del sitio en div o p, no hay nada con lo que asociarlo.

<p>Google</p>
<h1>About us</h1>

¿Cómo puedo asociar "Acerca de U" con Google si h1viene después? Porque todo lo que viene DESPUÉS H1está asociado con él, no con lo que se convierte antes.

<h1>Google</h1>
<h2>About Us</h2>

"Acerca de nosotros" pertenece a Google. Sin preguntas.

Tercer punto

HTML es lenguaje para DESCRIBIR información. Por lo tanto, no muestra información, la describe. Y cada página es independiente. Por lo tanto, describe una página porque no hay asociaciones entre páginas. Solo enlaces que enlazan páginas individuales.

<p>Google</p>
<h1>About us</h1>

Esta página es sobre nosotros. Quien / que es Poco claro. Simplemente describe algo llamado "Acerca de nosotros".

<h1>Google</h1>
<h2>About Us</h2>

Este sitio describe google. Y hay una sección sobre nosotros. Us = probablemente google, porque la estructura lo describe de esa manera.

Espero haber hecho mi punto :)

¡PD! No puede usar h2- h1, h3ya que es ilógico, por lo tanto, un gran fracaso. El hecho de que w3c no haya dicho que no está permitido, no lo hace válido. Es ilógico, piénsalo.

Logotipo como etiqueta h2?

Estaba navegando por SitePoint (www.sitepoint.com), que es un blog de WordPress con una combinación de páginas y blogs normales. En general, descubrí que tienen el título de la página como etiqueta h1 y el logotipo configurado como h2. Puede ver esto en una página de blog como www.blogs.sitepoint.com/category/design/. Navegando por el sitio encontrará diferentes configuraciones. A menudo no pude encontrar la etiqueta h1, como ejemplo en la página principal del producto (http://products.sitepoint.com/). Aunque desde esa página, si hace clic en un producto en particular para obtener más información www.sitepoint.com/books/design2/, vuelve a encontrar que h1 es el título de la página, h2 es el logotipo. Una página web típica es similar al blog (consulte www.sitepoint.com/help/). En este caso, los temas de las preguntas frecuentes son todas etiquetas h2.

Tom Rogers

No es necesario que su logotipo esté anidado en un encabezado: basta con una simple imagen vinculada header. Pero tanto el título de su sitio como el de la página / artículo deberían serlo <h1>. Este artículo es informativo: La verdad sobre las múltiples etiquetas H1 en la era HTML5 .