Share
Ya sea que sea un webmaster o un diseñador web, hay una pregunta que probablemente haya formulado o contestado muchas veces a lo largo de los años. Esa pregunta es, "¿Cuántos ¿Puedo usar las etiquetas por página y cómo debo implementarlas exactamente? "
En general, hay dos razones por las que se hace esta pregunta. El primero y más común es para fines de SEO; Asegurar que el contenido esté formateado de la mejor manera posible para ayudar a la indexación de los motores de búsqueda. El segundo es la corrección técnica; Asegurarse de que el marcado esté escrito de acuerdo con las especificaciones W3C apropiadas.
Con la llegada de HTML5, la respuesta a esta pregunta ha cambiado significativamente tanto en SEO como en aspectos técnicos. Ahora no solo es posible tener múltiples encabezados de nivel por página web que tendrán sentido para los motores de búsqueda, pero en la mayoría de los casos es el curso recomendado.
Sin embargo, debido a que la especificación de HTML5 aún no se comprende del todo, todavía hay muchos consejos flotando, algunos incluso escritos recientemente, basados en las reglas del diseño web pre-HTML5..
En este tutorial vamos a aclarar algunos conceptos erróneos. Vamos a echar un vistazo en profundidad a lo que significa HTML5 para uso de etiquetas, así como la forma en que puede aprovechar las mejoras ahora disponibles para crear páginas web que son más semánticamente ricas y bien estructuradas que nunca.
Durante mucho tiempo se consideró una de las reglas principales de HTML y SEO de que cada página individual de un sitio debería tener una. encabezado de nivel, y uno solo. Adicionalmente, la norma prescribe que este singular. El encabezado debe denotar el tema principal de la página..
En general, se siguió esta regla con el objetivo de ayudar a los motores de búsqueda a comprender mejor el tema principal de cada página, de modo que pudieran determinar su relevancia para varias frases de búsqueda, mejorar la precisión del motor de búsqueda y, por lo tanto, mejorar la clasificación de sitios bien diseñados.
Consideremos un ejemplo de sitio web de negocios pre-HTML5. En este sitio de ejemplo, el nombre del negocio se muestra en la sección del encabezado en todas las páginas, la página de inicio presenta una descripción del negocio y en otra área del sitio se publican artículos de expertos..
En seguir el "Single Etiqueta "regla, la página de inicio de este sitio web tiene Etiquetas aplicadas al nombre de la empresa en la sección de encabezado, indicando que la empresa en sí es el tema principal de esa página.
Sin embargo, en un artículo publicado en otro lugar de ese mismo sitio web., las etiquetas se eliminan del nombre de la empresa en el encabezado y, en cambio, se aplican al título del artículo. Esto se hace porque el título del artículo proporciona una etiqueta más representativa para el tema principal de la página, que ahora es el contenido del artículo en lugar de la descripción del negocio que estaba en la página de inicio.
Por lo tanto, una versión pre-HTML5 de este sitio web se marcaría como esto:
A pesar del fuerte enfoque de larga data en Las etiquetas, nunca fueron un elemento que funcionó de forma aislada, independientemente del resto del documento. Hay una razón detrás de la importancia de la colocación cuidadosa de las etiquetas de encabezado en las eras HTML5 y pre-HTML5, y esa es la generación de contornos de documentos.
Los esquemas de los documentos son algo parecido a una tabla de contenidos para un sitio web. Se generan automáticamente desde el marcado en cualquier página web dada.
Antes de HTML5, los contornos de los documentos se generaban a partir del uso de las etiquetas de encabezado. a través de . Cada uso de un encabezado implicaría el comienzo de una nueva sección de contenido.
Tomemos, por ejemplo, el siguiente html, señalando la ubicación de , y Etiquetas, que determinarán el contorno del documento:
Ejemplo de marcado pre-HTML5 El uso adecuado de los cacahuetes.
Cómo comer cacahuetes
Los cacahuetes se pueden comer con sal.
Este es un uso aceptable de cacahuetes..
Métodos superiores de comer maní
Los cacahuetes son infinitamente mejores cuando se combinan con el chocolate..
Recomendamos este enfoque para obtener mejores resultados.
Aplicación incorrecta de los cacahuetes.
Los cacahuetes no deben usarse para llenar los parquímetros..
No serán efectivos en esta capacidad..
Pre-HTML5, el marcado anterior generaría un esquema del documento de la siguiente manera:
El primero El elemento es considerado la etiqueta para todo el documento. Los encabezados posteriores se consideran las etiquetas para las secciones de contenido dentro de ese documento, formando un árbol debajo de él.
El ejemplo anterior es bastante simple, pero en las páginas web salvajes rara vez son tan simples. Cuando necesitamos una presentación de contenido más complejo, nos encontramos con el gran problema con el marcado pre-HTML5, y la razón era que antes solo era necesario utilizar uno. encabezado de nivel por página.
En el ejemplo anterior tenemos un solo tema en discusión: "El uso correcto de los cacahuetes". Pero, ¿qué pasa si este tema se discute en una página con varios artículos de igual importancia, como puede ver en un blog, por ejemplo??
Tome este html con un segundo artículo mostrado, (cada artículo está envuelto en Los cacahuetes se pueden comer con sal. Este es un uso aceptable de cacahuetes.. Los cacahuetes son infinitamente mejores cuando se combinan con el chocolate.. Recomendamos este enfoque para obtener mejores resultados. Los cacahuetes no deben usarse para llenar los parquímetros.. No serán efectivos en esta capacidad.. Seamos honestos, lleva años. Aconsejamos simplemente comprar frijoles enlatados en su lugar. Pre-HTML5, este marcado habría generado el siguiente esquema del documento: Ahora, aunque hay dos artículos de igual importancia en la página, el encabezado del primer artículo "El uso correcto de los cacahuetes" todavía se interpreta como la etiqueta que representa todo el documento simplemente porque es el primero que se encuentra. Esto indicaría, por lo tanto, que todo el tema de la página es "El uso correcto de los cacahuetes", aunque el segundo artículo trata sobre un tema totalmente diferente.. La forma típica de combatir esto era crear un encabezado general con Los cacahuetes se pueden comer con sal. Este es un uso aceptable de cacahuetes.. Los cacahuetes son infinitamente mejores cuando se combinan con el chocolate.. Recomendamos este enfoque para obtener mejores resultados. Los cacahuetes no deben usarse para llenar los parquímetros.. No serán efectivos en esta capacidad.. Seamos honestos, lleva años. Aconsejamos simplemente comprar frijoles enlatados en su lugar. Tenga en cuenta la adición de la generalizada Ahora se generaría el siguiente esquema del documento: Este resumen del documento, aunque es lo mejor que se podría hacer antes de HTML5, presenta algunos problemas importantes: Aquí es donde viene HTML5 para salvar el día y resolver cada uno de estos problemas.. Si considera cada uno de los problemas que acabamos de describir, todos tienen una raíz común y algo simple: La suposición de que cada página web es un documento singular con un tema singular que requiere solo una etiqueta singular. La solución igualmente simple para estos problemas provendría de la capacidad de indicar si una página web tenía secciones discretas, potencialmente con varios temas, cada uno con su propia etiqueta significativa.. Si fuera posible especificar que cada artículo en una página fuera separado, esto permitiría etiquetarlos con encabezados significativos que representaban con precisión su contenido y dar a cada uno el mismo peso de importancia.. Si fuera posible aclarar cuándo el título de un sitio no era representativo del contenido de la página, se resolvería el problema de diluir la relevancia. Con una indicación clara en lugar de la diferencia entre el título del sitio, los artículos y los títulos de los artículos, ya no sería necesario cambiar el marcado de un área a otra. UNA Y como quedaría claro si el título del sitio no representaba el contenido del artículo en la página, sería posible configurarlo para cualquier cosa, sin importar cuán abstracto sea.. HTML5 hace que todo esto sea posible a través de la introducción de sus elementos semánticos y el algoritmo de esquema de documento HTML5.. Si bien el esquema del documento pre-HTML5 se extrajo únicamente de etiquetas de encabezado, el algoritmo del esquema del documento HTML5 utiliza los siguientes aspectos clave: Comprender cómo se utilizan estos aspectos de HTML5 es relativamente sencillo, y el proceso generalmente es muy parecido a esto: Hay muchos otros aspectos del algoritmo de esquema de documento HTML5. En el W3C se encuentra disponible una amplia información sobre estos temas.. Sin embargo, con solo los aspectos enumerados anteriormente, podemos resolver todos los problemas descritos en la sección anterior de este tutorial.. Echemos otro vistazo a nuestro "Blog de literatura de leguminosas", ya que podría estar marcado con HTML5. Se han realizado las siguientes modificaciones simples: Los cacahuetes se pueden comer con sal. Este es un uso aceptable de cacahuetes.. Los cacahuetes son infinitamente mejores cuando se combinan con el chocolate.. Recomendamos este enfoque para obtener mejores resultados. Los cacahuetes no deben usarse para llenar los parquímetros.. No serán efectivos en esta capacidad.. Seamos honestos, lleva años. Aconsejamos simplemente comprar frijoles enlatados en su lugar. Ahora el algoritmo de esquema de documento HTML5 nos daría lo siguiente: Lo primero que puede notar es la aparición de la Tenga en cuenta que en HTML5, La aparición de la Esto significa que todos los problemas que describimos anteriormente en este tutorial se resolvieron de inmediato: Ahora también puede ver en el esquema del documento HTML5 generado por nuestro marcado que está perfectamente bien utilizar tantos También puede ver en este ejemplo cómo sería menos correcto utilizar solo un conjunto de Si todavía tuvieras Esto se debe a que al marcar los titulares de sus artículos con A su vez, los subtítulos de segundo nivel de sus artículos se marcarán necesariamente con Está permitido por la especificación HTML5 usar encabezados de nivel más bajo que Lo mejor que se puede hacer en todos los casos es considerar cuidadosamente el contenido a la mano y determinar la mejor manera de dividirlo y etiquetarlo según lo que ahora sabe sobre el algoritmo de esbozo de documentos HTML5.. Sí, es verdad. Ahora puedes usar tantos conjuntos de Así como había reglas de Aquí están de un vistazo: Como mencioné anteriormente, las etiquetas de sección no lo hacen absolutamente tener ser Pero si decides usar una etiqueta que no sea Solo hay cuatro conjuntos de etiquetas de elementos que puedes usar para denotar secciones de contenido dentro de tu página web, pero pueden ser un poco difíciles de entender al principio.. Son: Los dos que es más probable que utilices son Para obtener ejemplos detallados sobre cómo usar cada una de estas etiquetas, tómese un momento para ver estas páginas de W3C: Para más información sobre Ahora sabemos que en HTML5 podemos usar felizmente W3C tiene esto que decir: Los elementos h1-h6 no se deben utilizar para marcar subtítulos, subtítulos, títulos alternativos y líneas de etiqueta, a menos que se intente que sean el título de una nueva sección o subsección.. La razón de esto es que el esquema del documento HTML5 siempre interpreta una etiqueta de encabezado como el comienzo de una nueva sección de contenido, ya sea que las etiquetas de contenido de sección estén envueltas alrededor de ellas o no.. Por un tiempo hubo una solución a este problema por el cual Así que ahora la mejor manera de manejar los taglines es usar En este tutorial nos hemos centrado en Sin embargo, sería negligente si no te indicara la dirección correcta en algunas de las etiquetas HTML5 más valiosas que puedes emplear en tu marca para hacerla aún más rica en términos semánticos.. los Si está mostrando un grupo de artículos, se ajustará a todos esos artículos. Por ejemplo: Los cacahuetes se pueden comer con sal. Este es un uso aceptable de cacahuetes.. Los cacahuetes son infinitamente mejores cuando se combinan con el chocolate.. Recomendamos este enfoque para obtener mejores resultados. Los cacahuetes no deben usarse para llenar los parquímetros.. No serán efectivos en esta capacidad.. Seamos honestos, lleva años. Aconsejamos simplemente comprar frijoles enlatados en su lugar. Más información: El elemento principal los Podría usarlo para ajustar el título y el lema de su sitio, o el título de un artículo y la categoría de blog. Por ejemplo: Hemos estado frijoles luvin Categoría: Mean Beans Seamos honestos, lleva años. Aconsejamos simplemente comprar fr
etiquetas):
El uso adecuado de los cacahuetes.
Cómo comer cacahuetes
Métodos superiores de comer maní
Aplicación incorrecta de los cacahuetes.
Hervir los frijoles
Es realmente vale la pena hervir frijoles?
etiquetas dondequiera que se mostraran múltiples secciones de contenido de igual importancia, en un intento por representarlas en la mayor medida posible. Por ejemplo:
Blog de literatura de leguminosas
El uso adecuado de los cacahuetes.
Cómo comer cacahuetes
Métodos superiores de comer maní
Aplicación incorrecta de los cacahuetes.
Hervir los frijoles
Es realmente vale la pena hervir frijoles?
encabezado etiquetado, y la degradación de cada encabezamiento subsiguiente un nivel.
Problemas causados por los esquemas de documentos pre-HTML5
Tenemos el El título etiquetado como "Legume Literature Blog" actúa como la etiqueta de toda la página y, sin embargo, el texto de este encabezado proporciona solo una representación generalizada del contenido. Esto diluye la capacidad de los motores de búsqueda para interpretar el tema real en la página y, a su vez, su relevancia para las frases de búsqueda..
No hay manera de distinguir los dos artículos en la misma página como entidades igualmente importantes y autocontenidas. Ambos son vistos como parte de una sola pieza de contenido general, a pesar de que no son.
En caso de que un visitante vea uno de los artículos por sí mismo, como se puede hacer en un blog típico, el marcado debería modificarse para que Las etiquetas se aplican al título del artículo en lugar del título del sitio, como lo demostré con el sitio web de mi negocio de ejemplo en la sección anterior.
En muchos casos, el título de un sitio (que tiende a desempeñar el papel de etiqueta de documento incluso en HTML5), puede no estar relacionado con el contenido de una página de manera significativa. Por ejemplo, podría publicar un blog con el título del sitio "Kezz dice" y podría mostrar un artículo sobre la codificación HTML y otro sobre cachorros lindos. En este caso, no tendría sentido que el título del sitio se interpretara como una representación de cualquiera de estos artículos, por lo que tendría que cambiar el nombre de mi blog. Esto puede ser un problema, especialmente si un sitio desea marcarse con un nombre que pueda ser memorable, pero no necesariamente significativo..
El algoritmo de esquema de documento HTML5
El título del sitio etiquetado podría mantener su etiquetas en todo el sitio.Aspectos clave del algoritmo de esbozo de documentos HTML5
etiquetas, por lo que siempre hay un esquema generado para cualquier página web, a partir de la etiquetas y trabajando a través de las secciones se divide en.
, , , ,
, , ,
, , , , ,
etiquetas. etiquetas.Resolviendo los Problemas del Esquema del Documento Antiguo
añadido para invocar HTML5 Se han agregado etiquetas que envuelven cada artículo, reemplazando el genérico. etiquetas
hasta etiquetas
Legumbres Whackamoon!
El uso adecuado de los cacahuetes.
Cómo comer cacahuetes
Métodos superiores de comer maní
Aplicación incorrecta de los cacahuetes.
Hervir los frijoles
Es realmente vale la pena hervir frijoles?
(artículo) Elemento en el esquema, y junto a ellos los encabezados de cada uno de nuestros artículos.. las etiquetas se usan específicamente para indicar "una composición completa o autocontenida en un documento, página, aplicación o sitio y es, en principio, distribuible o reutilizable de forma independiente, por ejemplo, en una sindicación. Esto podría ser una publicación del foro, una artículo de revista o periódico, una entrada de blog, un comentario enviado por el usuario, un widget o dispositivo interactivo, o cualquier otro elemento de contenido independiente ". (fuente: W3C)(artículo) El elemento junto a los encabezados de nuestros artículos, en lugar de las etiquetas de encabezado que vimos antes, nos dice que estas cosas están ocurriendo ahora en el esquema:
Ya no tenemos ninguna dilución de relevancia de las etiquetas generalizadas, ya que la etiqueta de cada artículo está claramente asociada con ella..
La página ya no se ve como una pieza singular de contenido, porque la presencia de las etiquetas del artículo indica dónde se divide la página en secciones independientes.
Porque todo el Las etiquetas utilizadas en el marcado ahora se interpretan correctamente, y ya no tenemos que preocuparnos de que las etiquetas diluyan la relevancia, ya no necesitamos aplicar etiquetas diferentes al título del sitio, ya que pueden permanecer etiquetadas en nivel a lo largo.
Debido a que el título del sitio ya no se interpreta como una etiqueta para el contenido del artículo, podemos establecerlo como nos guste. Ya no tiene que actuar como un representante general para todo el contenido de la página, por lo que puede ser un título abstracto o de marca que no se relaciona con el contenido del artículo en absoluto..
Por que multiple
Las etiquetas son correctas
etiquetas como lo requiere su documento; es decir, una por raíz de sección o sección de contenido. etiquetas en este ejemplo, y que múltiples conjuntos de Las etiquetas representan con mayor precisión el contenido.. etiquetas aplicadas solo al título del sitio, y etiquetas aplicadas a los títulos de sus artículos, el esquema de sus artículos se desecharía. las etiquetas que efectivamente dice que son encabezados de nivel dos, aunque en realidad son encabezados de nivel uno dentro del alcance de la sección. Las etiquetas las establecieron incorrectamente en el nivel tres, sus encabezados de tercer nivel están marcados con etiquetas y así sucesivamente. para etiquetar una sección, y en ocasiones es posible que desee hacerlo por motivos de presentación, como mostrar un encabezado de menor tamaño en una sección de blogroll de barra lateral. Sin embargo, recomendaría hacer esto solo en el caso de secciones secundarias, sin artículos / contenido de su sitio, donde no es una prioridad para los niveles de encabezado producir un resumen del documento que forme efectivamente una tabla de contenido..
Nuevo de HTML5
Reglas de uso
Las etiquetas que sean necesarias, a través de HTML5. Pero eso no significa que deban ser agregados libremente en ubicaciones arbitrarias. uso de etiquetas que proviene de los esquemas de documentos antiguos, por lo que ahora también hay nuevas reglas basadas en el algoritmo de esbozo de documentos HTML5.
Etiquetas por sección de raíz o sección de contenido. Nivel de partida entre la apertura. etiqueta y la primera sección de contenido, para etiquetar el documento general. el encabezado de nivel se usa para etiquetar una sección de contenido, debe ser el primer encabezado que aparece en la sección, porque el primer encabezado siempre se interpreta como la etiqueta de la sección. el encabezado de nivel se usa para etiquetar una sección de contenido, cualquier otro encabezado usado en esa sección debe ser H2 o inferior para crear un resumen preciso del documento. etiquetas La especificación HTML5 permite que cualquier etiqueta de encabezado actúe como la etiqueta de una sección, desde a través de . Una vez más, sin embargo, siempre recomiendo usar etiquetas de nivel para marcar el contenido del artículo. para una etiqueta de sección, solo asegúrese de seguir las mismas reglas que se enumeran anteriormente, reemplazando en cada regla con su etiqueta elegida.
Acerca de las etiquetas de elementos de contenido de sección
y etiquetas Son similares entre sí, pero con una importante distinción.. las etiquetas se deben utilizar donde se pueda sacar una parte del contenido de una página completamente y aún así tener sentido por sí misma sin contenido circundante. Las etiquetas, por otro lado, deben usarse para el contenido que se agrupa de acuerdo con un tema, pero tiene sentido solo en el contexto del contenido que lo rodea..
las etiquetas están diseñadas para indicar los principales bloques de navegación en una página web, como una barra de menú o una paginación. No deben aplicarse a enlaces regulares, solo a secciones importantes que están totalmente dedicadas a la navegación. las etiquetas podrían describirse efectivamente como el elemento "todo lo demás" para el contenido que no es artículo, sección ni navegación. W3C prescribe esta etiqueta para su uso cuando algo está relacionado tangencialmente con el contenido que lo rodea, pero está separado del contenido principal de la página, como barras laterales, blogs, etc.. y etiquetas visitar:
Consejo rápido: Tratar con los taglines
Etiquetas en los títulos de nuestro sitio en cada área de nuestros sitios. Sin embargo, a pesar de ser una práctica común, técnicamente hablando Las etiquetas no deben usarse para subtítulos independientes o líneas de etiqueta..
las etiquetas se podrían usar para un lema si se agruparan con el encabezado principal dentro de un conjunto de etiquetas sin embargo, el se está eliminando de la especificación HTML5 y su uso hará que el código no pase las verificaciones de validación. o
aplique etiquetas y aplique CSS para que se vean como frases, logrando su objetivo de presentación sin afectar negativamente el esquema de su documento.
Otros elementos HTML5 para emplear
Las etiquetas en HTML5 y cómo funciona el nuevo algoritmo de esbozo de documentos. Por esa razón, no he tocado ningún elemento HTML5 que no esté evaluado por el algoritmo de esbozo de documentos.los
El elemento debe usarse una vez por página para indicar el área de contenido principal de esa página.
Legumbres Whackamoon!
El uso adecuado de los cacahuetes.
Cómo comer cacahuetes
Métodos superiores de comer maní
Aplicación incorrecta de los cacahuetes.
Hervir los frijoles
Es realmente vale la pena hervir frijoles?
los Elemento
El elemento se puede utilizar al principio de cualquier raíz de sección o sección de contenido para agrupar el contenido introductorio de esa sección..
Legumbres Whackamoon!
Hervir los frijoles
Es realmente vale la pena hervir frijoles?
Accentsconagua