Guía Técnica - Cómo usar meta tag con el gestor de contenidos Drupal

Resumen

Este documento describe el módulo Meta tag del gestor de contenidos Drupal: instalación y detalles básicos de uso; también incluye un resumen sobre los beneficios del uso de metaetiquetas en el proceso de optimización en motores de búsqueda (Search Engine Optimization o SEO) para mejorar el posicionamiento de un sitio web institucional.

Palabras clave: Meta tag, metaetiquetas, drupal, módulos seo en drupal, posicionamiento en la web.

1 Introducción

En inglés se llama Meta tags, y en español elementos meta o metaetiquetas, son códigos HTML que se insertan en una página web para incluir en ella información de referencia en forma de metadatos con la intención de que los motores de búsqueda la lean.

Las metaetiquetas son relevantes en el posicionamiento orgánico de un sitio web porque sirven como una primera impresión para el usuario cuando realiza una búsqueda y selecciona el sitio que le proporcione información más precisa.

Para colocar metaetiquetas en nuestro sitio web, no son necesarios conocimientos de programación o de carácter técnico; hoy en día se cuenta con herramientas de SEO, plugins o módulos que permiten incluirlas sin editar el código fuente de la página.

El uso de metaetiquetas aumenta la visibilidad web, por ello es importante conocerlas y adoptarlas para favorecer el posicionamiento de un sitio frente a los algoritmos de búsqueda. Su implementación facilita al usuario el acceso al contenido.

2 ¿Cuáles son las metaetiquetas más relevantes para un sitio web?

Las metaetiquetas se incorporan en el encabezado de una página web. Aunque invisibles para el usuario visitante, pero de gran utilidad para motores de búsqueda u otros programas que puedan aprovechar la información que contienen. A continuación, se enlista algunas de ellas y cómo pueden potenciar nuestro sitio web:

• Title
  
  Esta etiqueta expone la idea principal a los motores de búsqueda sobre el contenido de la página que va a rastrear. Se recomienda no exceder los 70 caracteres, de lo contrario se mostrará incompleta en las SERPs (resultados que aparecen en las páginas de buscadores como Google o Bing). Es relevante usar palabras clave que se necesitan posicionar en dicha etiqueta y tener claridad de lo que se quiere expresar al usuario.
   
• Description
  
  Es un complemento de la etiqueta Title. Ofrece más detalles sobre el contenido de nuestra página tanto al usuario como a los motores de búsqueda. Se recomienda un máximo de 160 caracteres de longitud en esta etiqueta.
  
  La descripción debe ser atractiva para convencer al usuario de visitar nuestra página por encima de otras que haya desplegado el motor de búsqueda.
   

• Robots meta tag
  
  Con esta etiqueta se indica a los buscadores cuál es el contenido que debe ser indexado y cuál no, así como los enlaces que deben ser seguidos o no.
  Los parámetros para esta etiqueta son los siguientes:
  
            - Index (se toma por defecto)
            - Follow (se toma por defecto)
            - Noindex (se debe especificar para que no indexe una página)
            - Nofollow (se debe especificar para que no siga los enlaces de una página)
  
  El uso de esta metaetiqueta es distinto al archivo Robots.txt; la primera sólo afecta a la página que contiene la etiqueta, mientras que el archivo Robots.txt impacta a todo el sitio web. Por ejemplo, con la metaetiqueta y el parámetro Noindex se indica que una url no se indexe ni aparezca en los resultados de búsqueda pero, a diferencia de lo que ocurre con el archivo robots.txt, sí será rastreada por los bots de Google. El archivo robots.txt es mucho más eficaz para bloquear un directorio completo, lo que te permite ganar tiempo de rastreo de las páginas en cada una de las visitas de los robots de Google

• Meta keywords
  
  Las meta keywords son una serie de etiquetas que incluyen palabras clave para indicar al buscador cuál es el contenido o temática de la página; surgieron en el año 1995. Al principio eran un elemento muy importante para el posicionamiento web, pero desde el 2009 motores de búsqueda como Google no las utilizan para este propósito. Otros buscadores, como el ruso Yandex, fomentan su uso, pero no son un factor determinante para que un sitio destaque sobre otros.

• Canonical
  
  Esta metaetiqueta indica a Google cual es la página original, en caso de que existan otras similares o idénticas. Mediante una etiqueta o atributo, un enlace canónico es descrito como el “principal” u “original” en un sitio web. Su uso contribuye a que una página sea percibida como prioritaria por los algoritmos de búsqueda.

3 Uso de Meta tag en el gestor de contenidos Drupal

Meta tag es un módulo que ofrece automáticamente metadatos estructurados, también conocidos como metaetiquetas, sobre un sitio web administrado con el gestor de contenidos Drupal.

3.1 Instalación del módulo

Se debe de considerar lo siguiente:

• Verificar que las versiones de Meta tag y Drupal sean compatibles. Para ello se puede revisar el apartado Lanzamientos o Releases en la documentación del módulo de Meta tag. Observe la Figura 1.
   
• Previamente, se requiere instalar el módulo Token.

Figura 1. Lanzamiento de Meta tag en Drupal.

La instalación del módulo dependerá de cómo se administre el desarrollo del sitio en Drupal. Se tienen las siguientes opciones:

1) Instalación con Composer

Composer es una aplicación para línea de comandos, enfocada a la gestión de dependencias en proyectos basados en el lenguaje PHP. Consta de dos piezas clave: una herramienta por línea de comandos para gestionar estas dependencias e interactuar desde la consola de la terminal, además de un repositorio donde se almacenan los paquetes llamado Packagist.org

Al descargar el módulo con Composer se garantiza su compatibilidad con el core de Drupal. Para realizar la instalación, es necesario ingresar a la carpeta del proyecto y escribir el siguiente comando:

$ composer require 'drupal/metatag:^1.22'

Posteriormente, debe presionar la tecla Enter o Intro y la descarga del módulo comenzará.

2) Instalación con los enlaces de los archivos que ofrece cada versión en Drupal.org

Después de seleccionar el módulo, dar clic en la página donde es posible encontrar todas sus versiones: https://www.drupal.org/project/metatag/releases/8.x-1.21. Observe la Figura 2.

Figura 2. Vista de las versiones disponibles del módulo desde la URL de Drupal.org.

Hay dos opciones: copiar el enlace del archivo tar.gz o zip, o descargar cualquiera de los archivos. Después, en la sección Ampliar, dar clic en Agregar un nuevo módulo.

Se puede ingresar el link o el archivo de instalación que se haya descargado. Es importante que el archivo esté comprimido, como se muestra en la Figura 3. Posteriormente, debe dar clic en Continuar.

Figura 3. Sección para agregar el nuevo módulo en Drupal.

Una vez que concluyó la instalación, el módulo se puede localizar en la sección Ampliar. Ahí puede elegir el módulo principal, así como cualquier otro submódulo incluido en Meta tag.

En la Figura 4 se observa el apartado de SEO, donde se encuentran todos los submódulos relacionados con Meta tag.

Figura 4. Sección de SEO en el apartado Ampliar de Drupal.

3.2 ¿Cómo usar Meta tag?

En el apartado Búsqueda y meta datos de la configuración se encuentra la opción Metaetiqueta, que muestra sus valores por defecto para el sitio. (Figura 5)

En esta página aparecen diferentes opciones de configuración para Meta tag, que pueden ser globales o particulares para las secciones del sitio. Estas opciones pueden modificarse, seleccionando la opción Editar en la columna Operaciones. Aquí también es posible pueden incluir nuevas configuraciones por defecto para alguna sección del sitio, mediante la opción Añadir meta tags por defecto.

Figura 5. Apartado Meta tag para la configuración de metaetiquetas por default.

Si la configuración de nivel superior no es concreta, se pueden añadir configuraciones de metaetiquetas por defecto para un tipo específico de entidad o colección de campos de entidades, por ejemplo, para un tipo particular de contenido.

Meta tag cuenta con diversos submódulos, entre los que se pueden seleccionar los siguientes:

1. Meta tag: Administra las meta etiquetas para todas las entidades.
    
2. Meta tag Extended Permissions: Agrega permisos individuales para cada metaetiqueta, lo que permite el acceso detallado a las mismas. Esto puede provocar problemas de rendimiento en la página de administración de permisos.
    
3. Meta tag App Links: Ofrece compatibilidad con metaetiquetas de applinks.org
    
4. Meta tag Dublin Core: Proporciona las quince metaetiquetas Dublin Core Metadata Element Set 1.1 del Dublin Core Metadata Institute.
    
5. Meta tag Dublin Core Advanced: Proporciona cuarenta etiquetas meta adicionales del Dublin Core Metadata Institute.
    
6. Meta tag Facebook: Conjunto de metaetiquetas que controla la funcionalidad avanzada con Facebook.
    
7. Meta tag Favicons: Proporciona soporte para muchos favicons diferentes.
    
8. Meta tag Google Custom Search Engine (CSE): Da soporte a metaetiquetas utilizadas por el motor de búsqueda personalizado de Google..
    
9. Meta tag Hreflang: Brinda soporte a la metaetiqueta hreflang.
    
10. Meta tag Mobile & UI Adjustments: Confiere soporte a etiquetas meta utilizadas para controlar la experiencia del navegador móvil.
     
11. Meta tag Open Graph: Proporciona soporte a metaetiquetas Open Graph Protocol.
     
12. Meta tag Open Graph Products: Ofrece metaetiquetas adicionales de Open Graph Protocol para describir productos.
     
13. Meta tag Page Manager: Proporciona compatibilidad con metaetiquetas para las variantes de Page Manager.
     
14. Meta tag Pinterest: Soporta metaetiquetas personalizadas de Pinterest.
     
15. Meta tag Twitter Cards: Da soporte a las metaetiquetas para Cards de Twitter.
     
16. Meta tag Verification: Corrobora la propiedad de un sitio en motores de búsqueda y otros servicios.
     
17. Meta tag Views: submódulo que proporciona un complemento para que los usuarios agreguen metaetiquetas a las páginas de tipo Vista.

3.3 Cómo configurar un campo en un tipo de contenido para utilizar Meta tag

En la sección Estructura se visualiza la pestaña Tipos de contenido, donde es posible administrar los campos de artículos, páginas básicas o cualquier otro contenido creado al que también se puede añadir la etiqueta Meta tag.

Seleccione la opción Administrar campos en algún tipo de contenido, después elija Añadir un campo, en la configuración de este apartado podemos reutilizar un campo o añadir uno nuevo. Al añadir un nuevo campo escoja la opción de Metaetiquetas para asignar una, como se observa en la Figura 6.

Figura 6. Apartado “Añadir un campo” en un tipo de contenido.

Después de Guardar y Continuar, ingrese un texto de ayuda que describa la etiqueta; al guardar la configuración, el campo podrá ser utilizado para el tipo de contenido que se modificó. En la sección Contenido, seleccione la opción Añadir contenido en algunos de los tipos que se modificaron con el campo Metatag; al editar un contenido éste se debe visualizar como se observa en la Figura 7.

Figura 7. Apartado que muestra Metatag para utilizarse al agregar o editar un tipo de contenido.

Aquí se podrán añadir desde las metaetiquetas básicas hasta las que corresponden a los submódulos más específicos para tipos de contenido específicos. Esto es de gran ayuda cuando se requiere que una página tenga etiquetas particulares para el contenido.

4 Ejemplo

En el sitio https://www.visibilidadweb.unam.mx/ se ha configurado este módulo para que el tipo de contenido Página básica cuente con un campo vinculado a Meta tag, como se observa en la Figura 8.

Figura 8. Apartado donde observamos a Meta tag como un campo dentro del contenido: Página básica.

Con lo anterior, al incluir un nuevo contenido del tipo página básica o editar contenido dado de alta previamente, se podrá ver el apartado Meta tag (Figura 9). Esto permite agregar las metaetiquetas que se consideren necesarias; en este caso se incorpora la meta descripción de la página.

Figura 9. Incorporación de la metaetiqueta de descripción con Meta tag.

Se observa la etiqueta “<meta name=”description” content=”...”>” y la descripción específica que se agregó a la página a través del campo con el tipo de contenido Página básica.
 

Figura 10. Al inspeccionar el código fuente de la página se observa la meta descripción.

Después de guardar es posible ver la etiqueta en el código fuente de la página, como se muestra en la Figura 10.

REFERENCIAS

[1] Flores, J. (2022, abril). Meta tags: todo lo que necesitas saber sobre las etiquetas SEO. SEOptimer. https://www.seoptimer.com/es/blog/meta-tags-todo-lo-que-necesitas-saber-sobre-las-etiquetas-seo/
[2] Álvarez, L. (2020, Mayo). Meta keywords: qué son y mitos tras la palabra clave meta. Semrush Blog. https://cutt.ly/FVaelOV
[3] SISTRIX Team, “¿Qué elementos Meta (Meta-Tags) son relevantes para SEO y cuáles no?”, 2021. Recuperado de: https://www.sistrix.es/preguntale-a-sistrix/optimizacion-onpage/los-elementos-meta-meta-tags/que-elementos-meta-meta-tags-son-relevantes-para-seo-y-cuales-no/
[4] Woorank, “Cómo usar la etiqueta meta robots para SEO”, 2022. Recuperado de: https://www.woorank.com/es/edu/seo-guides/etiqueta-meta-robots-seo
[5] Webwash, “Getting Started with Metatag Module in Drupal”, 2021. Recuperado de: https://www.webwash.net/getting-started-with-metatag-module-in-drupal/
[6] Referencias a la documentación de Metatag en Drupal y módulos que son requeridos como
- Documentación de Metatag: https://www.drupal.org/project/metatag
- Módulo requerido para su instalación Token: https://www.drupal.org/project/token