(Tiempo estimado: 2 - 3 minutos)

En este artículo vamos a ver como agregar meta-etiquetas (meta-tags) desde cualquier fichero php de un componente Joomla!. Veremos el caso concreto de las etiquetas propias de facebook y cómo modificar las estándar de meta-description y meta-keywords.

Vamos a ver las meta-tags en Joomla!

API de Joomla!

En la biblioteca JFactory tenemos las funciones relacionadas con los "documentos" a través de getDocument(). Por lo tanto, lo primero que haremos será crear una variable para que podamos acceder a dichas funciones.

$doc = JFactory::getDocument();

La función que nos interesa para este caso addCustomTag.

Etiquetas de Facebook en Joomla!

Cuando compartimos algo en esta red social podemos seleccionar qué mostrar a partir de las etiquetas propias de Facebook. Estas etiquetas son las siguientes:

<meta property="og:title" content="Título del artículo"/>
<meta property="og:type" content="tipo"/>
<meta property="og:url" content="http://www.dominio.com/url-del-articulo"/>
<meta property="og:image" content="http://www.dominio.com/directorio/imagen-del-articulo.jpg"/>
<meta property="og:description" content="Texto introductorio del artículo que vamos a compartir"/>

Para generar estas etiquetas tendremos que añadir en nuestro código lo siguiente:

$doc = JFactory::getDocument();
$doc->addCustomTag( '<meta property="og:title" content="Título del artículo"/>' );
$doc->addCustomTag( '<meta property="og:type" content="tipo"/>' );
$doc->addCustomTag( '<meta property="og:url" content="http://www.dominio.com/url-del-articulo"/>' );
$doc->addCustomTag( '<meta property="og:image" content="http://www.dominio.com/directorio/imagen-del-articulo.jpg"/>' );
$doc->addCustomTag( '<meta property="og:description" content="Texto introductorio del artículo que vamos a compartir"/>' );

Con este código Joomla! añade las meta-etiquetas de Facebook entre de las etiquetasdel HTML que genera el artículo.

Etiquetas estándar en Joomla!

Muy parecido a lo que acabamos de ver para Facebook tendremos que hacer para modificar las etiquetas description y keywords. En este caso tendremos que hacer otra llamada a JFactory.

$app = JFactory::getApplication();
$app->addMetaTag('description', 'Descripción del artículo que se va a mostrar');
$app->addMetaTag('keywords', 'palabra clave1, palabra clave2, palabra clave3');

Esto generará entre las etiquetaslas siguientes meta-etiquetas:

<meta name="description" content="Descripción del artículo que se va a mostrar" />
<meta name="keywords" content="palabra clave1, palabra clave2, palabra clave3" />

[actualización - 16/12/2014] A petición de Manuel (BoleMC)

Cómo hacerlo de forma dinámica para que cada artículo tenga su propia personalización

Para realizar esta acción tendremos que hacer un override del componente com_content de la vista de artículos (article).

Para saber cómo crear un override os recomiendo hacer el curso sobre desarrollo de plantillas que os he preparado.

Una vez en el override, tendremos que añadir las siguientes líneas de código al inicio del fichero php (templates/tuplantilla/html/com_content/article/default.php):

$doc = JFactory::getDocument();
// extraemos las imagenes de intro y full text
$images  = json_decode($this->item->images);
$doc->addCustomTag( '<meta property="og:title" content="'.$this->item->title.'"/>' );
$doc->addCustomTag( '<meta property="og:type" content="tipo"/>' );
$doc->addCustomTag( '<meta property="og:url" content="'.JURI::current().'"/>' );
$doc->addCustomTag( '<meta property="og:image" content="'.JURI::base().$images->image_fulltext.'"/>' );
// Si queremos coger la imagen de intro tendríamos que cambiar $images->image_fulltext por $images->image_intro
$doc->addCustomTag( '<meta property="og:description" content="'.$this->item->metadesc.'"/>' );

[actualización - 11/07/2015] Tras un artículo de Guillermo Bravo

Vamos a poner las etiquetas de Twitter Card

$doc = JFactory::getDocument();
// extraemos las imagenes de intro y full text
$images  = json_decode($this->item->images);
$doc->addCustomTag( '<meta property="twitter:title" content="'.$this->item->title.'"/>' );
$doc->addCustomTag( '<meta property="twitter:card" content="summary_large_image"/>' );
$doc->addCustomTag( '<meta property="twitter:site" content="'.JURI::base().'"/>' );
$doc->addCustomTag( '<meta property="twitter:creator" content="@sergiois"/>' );
$doc->addCustomTag( '<meta property="twitter:url" content="'.JURI::current().'"/>' );
$doc->addCustomTag( '<meta property="twitter:image" content="'.JURI::base().$images->image_fulltext.'"/>' );
// Si queremos coger la imagen de intro tendríamos que cambiar $images->image_fulltext por $images->image_intro
$doc->addCustomTag( '<meta property="twitter:description" content="'.$this->item->metadesc.'"/>' );

Espero que os haya resultado sencillo este tip para Joomla!. Cualquier comentario ya sabéis que es bienvenido.

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Comentarios

#29 sergiois 01-08-2019 08:21
Cito a Jose Miguel:
Como puedo y donde tendría que hacer esto para compartir un producto de virtuemart?
Muchas gracias

Hola Jose Miguel. Gracias por comentar.
En el caso de Virtuemart, que ya hace tiempo que no trabajo con él, tendrías que hacerlo en el override de 'components/com _virtuemart/vie ws/productdetai ls/tmpl/' (si no ha cambiado en la versión que estés utilizando).

Y si no quieres meterte en códigos, siempre puedes usar extensiones como estas:
- https://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/phoca-open-graph/
- https://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/vm-og-meta-tag/

Un saludo,
Citar
#28 Jose Miguel 31-07-2019 23:12
Como puedo y donde tendría que hacer esto para compartir un producto de virtuemart?
Muchas gracias
Citar
#27 sergiois 13-09-2018 19:27
Cito a Javier Saldaña:
Que tal Sergio me ha servido la parte de ingresar los metas, sin embargo de manera dinámica no me funciona, pues ingreso el código ,$this->item->title, pero verifico y los quedan en blanco, tengo joomla 3.812, sera q en esta versión sigue sirviendo???


Hola Javier, tal y como te he comentado, dependerá del framework que utilices y la plantilla que hayas instalado. Al decirme que usas T3, me lo he bajado y lo he probado. Funciona correctamente. La plantilla que trae por defecto no tiene ningún override de la vista de artículo. Se crea y se añade el código y, como te comento, va bien.
Te recomiendo también el plugin de Ciro (https://github.com/CiroArtigot/aixeenaseometas). Funciona muy bien (tanto de forma automática como personalizada por cada artículo).
Un saludo y gracias por escribir!
Citar
#26 Javier Saldaña 13-09-2018 16:51
Que tal Sergio me ha servido la parte de ingresar los metas, sin embargo de manera dinámica no me funciona, pues ingreso el código ,$this->item->t itle, pero verifico y los quedan en blanco, tengo joomla 3.812, sera q en esta versión sigue sirviendo???
Citar
#25 sergiois 27-01-2017 14:48
Cito a ferfer:
¿Como puedo añadir una meta etiqueta proporcionada por zanox en mi cuenta de instagram? Muchas gracias!


Hola!
No entiendo bien lo que pretendes y qué tiene que ver instagram con Joomla.
Si me puedes dar más información al respecto...

Un saludo,
Citar
#24 ferfer 27-01-2017 13:57
¿Como puedo añadir una meta etiqueta proporcionada por zanox en mi cuenta de instagram? Muchas gracias!
Citar
#23 Dario Finelli 22-06-2016 01:47
Sergio querido, al final pude resolverlo, me faltaba un pedacito de código que googleando lo encontré en el cajón desastre de un gran maestro desarrollador.

Pongo la solución aquí para quien le suceda lo mismo:

// código para extraer la imagen del texto dentro de un artículo
$output = preg_match_all( '//i', $this->item->in trotext, $src);
$first_img = $src[1][0];

Y por supuesto, el metatag:



Gracias Sergio por dejar el cajón abierto ;)

sergiois.wordpress.com
Citar
#22 Dario Finelli 21-06-2016 21:19
Me quedó cortado el comentario anterior, quería decir que no me había funcionado ninguna de las opciones que probé, pero de todas maneras agradezco tu ayuda.

Saludos.
Citar
#21 Dario Finelli 21-06-2016 21:18
/// -- CODIGO EN COMUN ---
$doc = JFactory::getDocument();
$images = json_decode($item->images);
$output = preg_match_all( '//i', $this->item->in trotext, $src);
$first_img = $src[1][0];
/// -- fin CODIGO EN COMUN ---

/// -- OPCION 1
$doc->addCustom Tag( '' );

/// -- OPCION 2
$doc->addCustom Tag( '' );

/// -- OPCION 3
$doc->addCustom Tag( '' );

/// -- OPCION 4
$doc->addCustom Tag( '' );

/// -- OPCION 5
$doc->addCustom Tag( '' );

/// -- OPCION 6 (muestro la línea que modifiqué)
$doc->addCustom Tag( '' );

Sin ánimo de seguir molestando, si ves que hay algún error y puedes indicármelo te lo agradecería, sino de todas maneras agradezco mucho tu ayuda.
Saludos.
Citar
#20 sergiois 21-06-2016 11:44
Hola Dario,
Gracias por escribir. Lo que necesitas para extraer la primera imagen del texto es el siguiente código:

$output = preg_match_all( '//i', $this->item->in trotext, $src);
$first_img = $src[1][0];

Espero que te sirva.

Salu2!!
Citar

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.

 

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo