Diferente 'Title' y Título del Post, en Blogger

2.4.18

Coding

Debo ser sincera, jamás se me había pasado por la cabeza que alguien tuviera la necesidad de tener distinto contenido en el título de su post y en el Meta Título.

Pero resulta que sí, que para algunos esto puede ser una prioridad en sus espacios, pues me he encontrado con esta duda en el Foro de Blogger.

Estaba redactando mi respuesta, pero pensé en escribirle aquí en el blog primero para poder compartir luego en mis redes sociales por si es de ayuda para otras personas que no frecuenten el foro.

Diferente Title y Título en Blogger


Primero debo explicar, que 'Meta Title' es de esas barbaridades que muchos siguen propagando aunque no sirva para nada. Quizá es que simplemente mezclan la etiqueta title, que es la correcta, con las etiquetas metas (meta robots, meta description...) ya que todas van en el head de cualquier página web.

Además, no debe confundirse con el Headline (titular) que creamos desde el editor de la entrada/página y que va dentro del body de la página web. Son dos cuestiones distintas, pero que en Blogger podemos hacer que muestren exactamente lo mismo.

Esto es porque en la Edición de la Plantilla, podemos colocar el siguiente código:
<title>
<b:if cond='data:view.isMultipleItems'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='!data:view.isError'>
<data:blog.pageName/>
<b:else/>
404 - NO EXISTE
</b:if>
</b:if>
</title>

Si notas el fragmento <data:blog.pageName/>, este es una etiqueta data de Blogger y que toma la información cuando en el Editor de entradas escribimos 'el título de la entrada'.

Cómo dije antes, el title y el título son distintos en sus funcionalidades, porque resulta que el primero, el que va en el head (y oculto a nuestra vista), es el que los buscadores usan para mostrar en sus resultados (y vemos en la pestaña misma), mientras que el segundo es más para cuestiones de maquetación que sí vemos, pero que aprovechamos con el uso de la etiqueta h1 para indicar al navegador su relevancia.

De allí que la 'norma' sea que tanto el title como el título de la página (sea de una entrada, del blog entero, de una página estática) sean exactamente los mismos.



Cambiando el title y el título

A veces resulta que tener lo mismo en title y título no es lo deseado, independientemente de las razones que tenga, así que hoy compartiré un truco para ello.

Lo que haremos es dejar tal cuál está el head de la plantilla, pues conviene usar la etiqueta data que Blogger proporciona.

Entonces, en Edición HTML de la plantilla, localiza <b:includable id='post' var='post'>, y dentro de éste a <data:post.title/>. Según la plantilla que uses verás o no código alrededor suyo, esto es lo que has de editar para que quede así.
<span style='display:none;'><data:post.title/></span>

Esto si se desea mantener el 'contenido del título' visible aún para el navegador, pero oculto para el resto y siendo un span sencillamente (sin relevancia SEO). También se puede eliminar.

Ahora, en teoría se ha quedado la entrada sin título, pero esto se soluciona cuando editando la misma entrada y desde edición HTML colocamos esto al principio:
<h1>TU TÍTULO DISTINTO...</h1>

Queda hacer que coincidan los estilos, si en el primer paso el código incluía una class o un ID, hay que asignarlo al h1 que se ha creado en la edición de Entrada. Como se ve, no es algo automático, aunque mediante Javascript se podría hacer pero no le recomiendo.


Observaciones

  • Este truco sólo es efectivo en cada entrada o página estática, para hacer lo mismo en las páginas index (que muestren el título que asignas) se requeriría una codificación más específica, probablemente crear un script para este caso particular.
  • Las plantillas suelen variar en su construcción; por ejemplo, las nuevas de Blogger contienen el <data:post.title/> en un b:includable distinto al que menciono.
  • Por lo anterior, es posible que tengas más de una etiqueta data post.title, asegúrate de tocar sólo la que se mostraría en su respectiva entrada.
  • Si haces este truco, asegúrate de tener activada la meta descripción y de usarle en cada post; en caso contrario, el título que has asignado se mostrará en la descripción automática que genera Blogger.
  • El título 'original', el que se crea en el campo asignado para ello en el editor, seguirá siendo usado por navegadores y redes sociales para compartir (porque será el que muestra la etiqueta title), ten siempre esto en cuenta.


---


Cómo dije antes, esto no es algo que 'yo pensaría que necesito hacer', pero con gusto doy mis ideas cuando otro la requiera. Y si llegas a necesitar una codificación más específica y cuidada, con gusto estoy con mi Servicio Express a la distancia de un correo.







yo, cyball

Escrito por Cyball Ruiz

Creadora de ANMATT Studio donde encuentras recursos y consejos para tu espacio en Blogger.






Otros artículos...