.

13 de mayo de 2014

Personalizar la etiqueta HTML Title: SEO para Bloggers

Escrito por
La etiqueta HTML Title es la que define el título de una página Web individual y por lo tanto es uno de los cambios más importantes que puedes hacer en la plantilla de tu blog de Blogger para aumentar el tráfico orgánico de tu blog de Blogger. Con este artículo vamos a aprender a personalizar la etiqueta HTML Title, que es uno de los cambios que puedes realizar con facilidad en la sencilla plantilla "herrerillo". Pero primero vamos a introducir a los principiantes que es la etiqueta HTML y cómo funciona.

La etiqueta HTML Title es la que da información a navegadores y buscadores. El navegador muestra el título en la barra de navegación y Google lo muestra en los resultados de búsqueda.  Este último punto es lo más importante, por dos motivos.
  • El título tiene una gran influencia en el SEO (optimización del posicionamiento en los buscadores). Las palabras que aparezcan en el título son las que Google considerará que son importantes en tu sitio Web.
  • El título es el punto más importante para que los internautas entren en tu blog una vez que ya apareces en la primera página de las búsquedas de SEO. Si tiene gancho puedes hacer que el % de clics en tu título aumenten.
La etiqueta Title cuando se escribe en una página Web sencilla se introduce en el HEAD de cada página Web (el HEAD es la parte "no visible" del código HTML de la página Web, que empieza con la etiqueta  <head> y se cierra con </head>). Lo único que hay que hacer es escribir el titulo entre <title> y </title>. Pero, en un blog de Blogger no podemos poner una etiqueta Title para cada artículo y cada página. Sólo existe la página de la plantilla, y si queremos un título diferente para cada artículo hay que programarlo desde la plantilla.

Personalizar la etiqueta Title en Blogger.

1. Título fijo para todo el blog.
1A. Tener el mismo título siempre en todas las entradas no es demasiado interesante, pero quizás a alguien le interese hacerlo y siempre es bueno empezar por lo códigos más sencillos, para que el aprendizaje se sólido. Existen dos opciones, la primera es escribir el título a mano, que es lo que tienes en la plantilla de la plantilla "hererrillo".

<title> el título que elijas </title>

1B. La segunda opción es indicar que el titulo será el que le indiquemos a través del editor de Blogger. Y el código es el siguiente. 

<title> <data:blog.title/> </title>


2. Títulos diferentes para cada artículo y sección.
Pero lo habitual es que cada página del blog tenga su propio nombre. Y para ello vamos a utilizar tres tipos de datos diferentes: el título del blog, el pageTitle y el pageName.

2A. Las plantillas habituales de Blogger usan los datos de pageTitle para confiugrar el título de cada página del blog. Esta opción lo que hace es poner en primer lugar el título del blog, seguido de un dato adicional. Por ejemplo, si es una página de archivo, añadirá una barra, el mes y el año. Si se trata de una etiqueta, se añadirá la palabra de la etiqueta y en el caso de los posts se añade el título del artículo.

 <title><data:blog.pageTitle/></title>

Los títulos quedarían así:
Blog en Internet: Julio 2014 (para una página de 
Blog en Internet: Colaboradores (para una página estática)
Blog en Internet: HTML (para una página de etiqueta)
Blog en Internet: 8 blogs con textos bonitos de amor (para un artículo

Esto puede ser interesante para SEO si para ti lo más importante es posicionar las palabras de tu título, por separado y asociadas a otras palabras. Por ejemplo si tuvieras un blog con el título vuelosbaratos.com y escribes artículos con nombres para los destinos, rutas y aerolíneas: como por ejemplo Barcelona-París, Madrid-Londres, Alicante-Roma, Málaga-Berlín, o Valencia-Mallorca. De esta forma los títulos quedarían así:
Vuelos Baratos: Barcelona - París.
Vuelos Baratos: Madrid - Londres.

2B. La segunda opción es usar directamente el nombre del artículo. Es una de las soluciones más sencillas y es una buena opción para SEO para todos los que quieran posicionar el blog a través de sus artículos. El nombre del artículo no incluye el nombre del blog, y así el título que se ve en Google sólo hace referencia al artículo. La etiqueta que tienes que pegar en la plantilla HTML es la siguiente:

<title><data:blog.pageName/></title>

Los resultados que se obtienen son como estos.
Julio 2014 (para una página de archivo).
Colaboradores (para una página estática).
HTML (para una página de etiqueta).
8 blogs con textos bonitos de amor (para un artículo)

2C. Tercera opción es incluir en título, el nombre del artículo y el nombre del blog. Para ello combinaremos dos códigos en una misma línea.

<title><data:blog.pageName/> / <data:blog.title/> </title>
o bien
<title><data:blog.pageName/> / Blog en Internet </title>


Julio 2014 / Blog en Internet (para una página de archivo)
Colabroadores / Blog en Internet: Colaboradores (para una página estática)
HTML / Blog en Internet: HTML (para una página de etiqueta)
8 blogs con textos bonitos de amor / Blog en Internet (para un artículo).


3. Títulos con condicionales en Blogger
El siguiente nivel de complejidad es utilizar los condicionales. Ahora damos dos instrucciones, si se abre una página del blog entonces das el título X, pero en cualquier otro caso das el título Y. Si quieres ver todas las etiquetas condicionales de Blogger, tienes este artículo.

3.1 Título con lema para la portada, y el nombre de la página para todo lo demás.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<title>Blog en Internet, noticias diarias de tecnología</title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>


3.2. Nombre del elemento para todos los artículos que tengan nombre, y el título para lo demás.

<b:if cond='data:blog.pageType'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


3.3. Otro condicional.

<b:if cond='data:blog.pageType  == "index" '> 
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>



Direcciones de internet
Lo bueno que tiene personalizar la etiqueta Title con los códigos condicionales, es que damos instrucciones para que cada que cada tipo de página muestre el nombre de una forma diferente. Como puedes ver en el ejemplo 3.1 se pueden añadir las palabras o frases que se desee, y esto es interesante para el posicionamiento SEO, porque podemos añadir alguna palabra que nos interese posicionar en Google.

Un ejemplo práctico. En mi blog imagenessincopyright.com, cada imagen se presenta con su propio artículo. Se podría crear un condicional que añadiera las palabras "libres de derechos de autor" o "sin copyright" a los títulos de cada uno de los artículos en vez de dejar el título entero del blog. Esto serviría para combinar las palabras "libre de derechos de autor" con títulos como "cantante en un concierto", "fotografía de un paisaje de Madrid", "la belleza de una mujer y la informática".  En la práctica no uso esta personalización para hacer SEO por no ser necesaria, ya que el blog está bien posicionado para estas palabras. Para este blog resulta más interesante que no aparezcan tanto los términos imágenes sin copyright, para que el posicionamiento SEO se dirija hacia las palabras clave del título.

¿Y qué es lo que tienes que hacer en tu blog? Eso es una decisión que tienes que tomar tu mismo. Sólo te puedo adelantar, que aunque encuentres en algunos sitios que usar unos códigos mejora el SEO, eso es siempre relativo. ¿Porqué? Al cambiar los título siempre estarás mejorando el posicionamiento para algunas palabras clave, mientras que otras se posicionarán peor. Para tomar una buena decisión es interesante que te informes primero sobre el SEO y la creación de enlaces.

0 comentarios:

Publicar un comentario

Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.