SERGIOIGLESIAS

Blog sobre Joomla

Cómo crear, agregar y modificar meta-etiquetas personalizadas en Joomla!

@sergiois Tips Joomla 2 - 3 minutos Visto: 19991

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( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );

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( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
// Si queremos coger la imagen de intro tendríamos que cambiar $images->image_fulltext por $images->image_intro
$doc->addCustomTag( '' );

[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( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
// Si queremos coger la imagen de intro tendríamos que cambiar $images->image_fulltext por $images->image_intro
$doc->addCustomTag( '' );

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

¿Te ha gustado el artículo?

Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un Curso de desarrollo de plantillas Joomla.

32 comentarios

  • /// -- CODIGO EN COMUN --- <br />$doc = JFactory::getDocument();<br />$images = json_decode($item->images);<br />$output = preg_match_all( '//i', $this->item->introtext, $src);<br />$first_img = $src[1][0];<br />/// -- fin CODIGO EN COMUN --- <br /><br />/// -- OPCION 1<br />$doc->addCustomTag( '' ); <br /><br />/// -- OPCION 2 <br />$doc->addCustomTag( '' );<br /><br />/// -- OPCION 3 <br />$doc->addCustomTag( '' );<br /><br />/// -- OPCION 4 <br />$doc->addCustomTag( '' );<br /><br />/// -- OPCION 5 <br />$doc->addCustomTag( '' );<br /><br />/// -- OPCION 6 (muestro la línea que modifiqué)<br />$doc->addCustomTag( '' );<br /><br />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.<br />Saludos.
  • 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.<br /><br />Saludos.
  • 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.<br /><br />Pongo la solución aquí para quien le suceda lo mismo:<br /><br />// código para extraer la imagen del texto dentro de un artículo<br />$output = preg_match_all('//i', $this->item->introtext, $src);<br />$first_img = $src[1][0];<br /><br />Y por supuesto, el metatag:<br /><br /><br /><br />Gracias Sergio por dejar el cajón abierto ;)<br /><br />sergiois.wordpress.com
  • [quote name=&quot;ferfer&quot;]¿Como puedo añadir una meta etiqueta proporcionada por zanox en mi cuenta de instagram? Muchas gracias![/quote]<br /><br />Hola!<br />No entiendo bien lo que pretendes y qué tiene que ver instagram con Joomla.<br />Si me puedes dar más información al respecto...<br /><br />Un saludo,
  • 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???
  • [quote name=&quot;Javier Salda&ntilde;a&quot;]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???[/quote]<br /><br />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.<br />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).<br />Un saludo y gracias por escribir!
  • [quote name=&quot;Jose Miguel&quot;]Como puedo y donde tendría que hacer esto para compartir un producto de virtuemart?<br />Muchas gracias[/quote]<br />Hola Jose Miguel. Gracias por comentar.<br />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/views/productdetails/tmpl/' (si no ha cambiado en la versión que estés utilizando).<br /><br />Y si no quieres meterte en códigos, siempre puedes usar extensiones como estas:<br />- https://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/phoca-open-graph/<br />- https://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/vm-og-meta-tag/<br /><br />Un saludo,
  • Hola Sergio, no me ha funcionado, añadi en las primeras líneas los códigos, sin embargo al abrir los articulos se observa en las primeras lineas del mismo el código escrito.
  • [quote name=&quot;Luigi Rivero&quot;]Hola Sergio, no me ha funcionado, añadi en las primeras líneas los códigos, sin embargo al abrir los articulos se observa en las primeras lineas del mismo el código escrito.[/quote]<br />Hola Luigi. Gracias por escribir en los comentarios.<br />No sé cómo has añadido esas líneas, pero sí te comento que tienen que ir entre etiquetas para poder ejecutarse al tratarse de código PHP.<br />Espero haberte ayudado.<br />Un saludo,

Artículos relacionados

Solicita presupuesto

¿Quieres una página web que funcione?

Contacta conmigo y hablemos de tu proyecto.