Etiqueta H1 en HTML
Las etiquetas H1, H2, H3, H4, H5 y H6 se emplea en las páginas Webs para marcar el texto de un titular (se puede escribir indistintamente h1 o H1). De todas ellas la más importante es H1, y la de menor importancia será H6, aunque lo habitual es usar sólo hasta H4. En el lenguaje HTML de hace bastantes años esta etiqueta llevaba consigo algunas propiedades como por ejemplo el color o la alineación del texto, pero en HTML5 todas estas propiedades se asignan desde la hoja de estilos CSS. Lo que si es posible, es que el mismo texto de <h1> sirva de enlace para ir a la página principal, por lo que tendrá dos etiquetas, <h1> y <a>.Una de las diferencias entre H1 y la etiqueta <title>, es que H1 siempre forma parte del texto que podemos leer en la página Web, mientras que Title es una propiedad que leen los navegadores y la que se muestra en los resultados de búsqueda de Google.
Etiquetas H1 y SEO
Un uso inteligente de las etiquetas de titulares puede ayudar bastante a posicionar un blog para determinadas búsquedas. El titular pueden ser un par de palabras o una frase larga en las que muestre de que son los contenidos de lo que se trata el blog o Web, pero también pueden ser un títular que no sea demasiado descriptivo. Para realizar un mejor posicionamiento Web lo importante es saber estos puntos y aplicarlos.- H1, H2 y H3 mejoran el posicionamiento de las palabras y frases que van dentro de la etiqueta HTML.
- Hacer que H1 coincida en un grado importante con la propiedad Title de la página es positivo. Esto es importante para que la información que aparece en las búsquedas de Google sea la misma cuando entren en tu blog.
- H1 sólo debe usarse una única vez por página, ya que de hacerlo más veces a Google no le va a gustar y puede penalizar el posicionamiento del blog.
- Para optimizar el SEO. Dentro de una Web cada página debería tener un H1 propio.
Etiquetas H1 en Blogger y optimización
Esta etiqueta se muestra una única vez dentro de Blogger, nada menos que en el titulo principal del blog, que por ejemplo en mi blog es "Blog en Internet". De esta forma se cumple de forma automatizada las tres primeras premisas del SEO: uso de palabras clave, en Blogger el contenido de h1 y title son iguales, y sólo existe una etiqueta H1. ¡Bien!, la única que no se cumple la cuarta, porque se usa el mismo H1 para todas las entradas.Así que una opción es dejar los encabezados H1, H2 y H3 como están, porque está bastante bien. Lo que sí es muy importante y vuelvo a insistir, es que no hay que añadir la etiqueta H1 dentro de los posts usando el código HTML. Si se quiere mejorar lo que hay que hacer es que cada artículo tenga como etiqueta h1 su propio título. ¿Cómo? Para optimizar las etiquetas H1 para el SEO, Paul Andrade a desarrollado un cambio completo de la plantilla de Blogger. Con él los títulos de los artículos son el titular principal H1 (de normal son un titular h2 o h3), mientras que el título principal de Blogger sólo es H1 para la página principal.
Modificar el título H1 a través del CSS
Si tienes una plantilla básica de Blogger la forma más sencilla de modificar la propiedad h1 es a través del editor de plantillas. Vas al apartado del título y allí podrás cambiar el color, el tamaño y el tipo de letra, pero hay otras propiedades que no están disponibles, como por ejemplo hacer que el enlace del título cambie si se pasa el cursor por encima, o en el momento de activarse.Para cambiar otras propiedades se modifica directamente el código CSS.
En la plantilla podemos encontrar que existen hasta 5 selectores CSS para nuestro titular, ya que el titulo de Blogger lleva enlace <a>.
- .Header h1 , es el selector principal y el que se usa para casi todos los formatos CSS, incluyendo color y tipo de texto.
- .Header h1 a , es el selector del enlaces que se usa para quitar el subrayado al enlace.
- .Header h1 a:hover , el selector que añade cambios de formatos cuando el cursor se acerca al título.
- .Header h1 a:actived , es el selector que da formato durante unos instantes justo al activar en enlace.
- .Header h1 a:visited , es el selector que nos dice como quedará el enlace cuando ya se ha visitado.
Algunas modificaciones que puedes hacer con CSS.
1. Centrar el título, usando la propiedad text-align y darle el valor center.
.Header h1 {
font-family: garamond, serif;
font-size: 70px;
color: #3377cc;
text-align:center;
}
2. Añadir un fondo de color para el título con bordes redondeados. En este ejemplo el color es un gris suave y no hay que olvidarse de añadir un margen interior (padding) para separar el texto por la izquierda, y el tamaño para limitar el tamaño de la caja.
.Header h1 {
font-family: garamond, serif;
font-size: 70px;
color: blue;
background-color:#dddddd;
padding:0 0 0 50px;
border-radius: 12px;
width:540px;
}
3. Quitar el subrayado del enlace. Se emplea la propiedad text-decoration con el valor none, aunque en las plantillas básicas de Blogger esta propiedad suele estar activada. Para quitarla y que se vea el subrayado habitual sólo tienes que borrar las siguientes líneas.
.Header h1 a {
text-decoration:none;
}
4. Cambiar el color del título una vez ha sido visitado.
.Header h1 a:visited {
text-decoration:none;
color: #55cc55 ;
}
Hay muchos más cambios que se pueden hacer, cualquier cosa que permita el código CSS.
Holas, creo q lo q acabas de indicar no ayudara al posicionamiento de un blog, la razón es que solo te enfocaste en la apariencia o sea el CSS cosa q los motores de búsqueda no toman en cuenta. gracias espero tu comentario.
ResponderEliminarHola, sólo una parte del artículo tiene que ver con el posicionamiento y en el caso de los títulos de los posts más que ayudar al posicionamiento (SEO) del blog pueden ayudar al posicionamiento del post, ya que cada entrada es detectada como una página diferente por Google. Las etiquetas H1 y H2, a diferencia de otras etiquetas de CSS tienen influencia el posicionamiento porque son las que corresponden a los títulos. Es decir que Google tiene más en cuenta aquellas palabras que incluimos en los título que las que están en un texto. Gracias por tu comentario, un saludo.
Eliminar