Generar metatags en Laravel, ideales para el SEO

05-08-2021 - Andrés Cruz

In english
Generar metatags en Laravel, ideales para el SEO

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

El SEO de las iniciales de de Search Engine Optimization, que significa optimización para motores de búsqueda. El SEO son un conjunto de técnicas que empleamos en nuestras páginas web que las ayudan a posicionarse de forma natural (no pagando) en los primeros resultados de las búsquedas que se realizan en motores de búsqueda como Bing, Google u otros, es así se simple, aspectos como que el contenido debe de contener palabras claves, los H1 y demás, una buena organización… son las bases del SEO, y Laravel, al ser el framework web en PHP por excelencia, es importante como podemos aplicar este tipo de prácticas.

Si tienes un blog, una tienda en linea y usas Laravel, este paquete es FUNDAMENTAL para generar esos metadatos que necesita Google y otros motores para indexarte.

Los metatags son un elemento primordial para dar, metadatos o datos a los motores de búsqueda, particularmente las arañas de búsqueda como Google y que puedan obtener datos sobre nuestra página web, elementos como el title (que realmente no es un metatag), description, image, entre otros, son fundamentales para dar la primera impresión de nuestro sitio y sepan qué hacer con él, por lo tanto, como el desarrollo de Laravel van de la mano para la creación de este tipos de sitios, vamos a conocer como podemos realizar esta integración sin morir en el intento.

Hay múltiples tipos de metadatos que podemos emplear, que en la práctica son etiquetas HTML que sirven para dar un dato, una descripción, un título, una referencia a una imagen que haga alusión al post (generalmente la famosa imagen principal del post) antes las llamadas keywords o palabras claves que ahora ya no tienen mucho sentido para motores como Google... y bueno, también podemos personalizar algunas con las redes sociales más famosas com Twitter o Facebook mediante los prefijos og, twitter... en las etiquetas anteriormente mencionadas pero que a la final colocamos 3 tipos de datos principalmente:

  1. Título
  2. Descripción
  3. Imagen

En esta entrada vamos a tratar como podemos integrar un paquete que nos facilitara la gestión de este tipo de componentes (metatags) fácilmente en nuestro sitio empleando por supuesto el entorno de Laravel en el proceso.

Instalar el paquete SEO tool para Laravel

Como mencionamos, necesitamos un paquete que nos agilizará todo el proceso, lo instalamos por composer en nuestro proyecto en Laravel con:

composer create-project laravel/laravel seotools

Agregar el Provider

Luego abra el archivo config/app.php y agregue las siguientes líneas:

'providers' => [
    Artesaos\SEOTools\Providers\SEOToolsServiceProvider::class,
],

Configurar paquete

Ahora ejecute el comando debajo; ya que muy seguramente te va a interesar realizar ciertos cambios para indicar algunos datos por defecto:

php artisan vendor:publish --provider="Artesaos\SEOTools\Providers\SEOToolsServiceProvider"

Creará el archivo de configuración config/seotools.php En el archivo de configuración, puede definir valores predeterminados para metaetiquetas de SEO. Abra el archivo config/seotools.php y edite los valores para establecer este valor como predeterminado.

Agregar metadatos a nuestro sitio

En el controlador o componente, ahora tenemos que referenciar a un conjunto de clases para agregar los metas o datos a nuestro sitio, para esto te sugiero que vayas revisando la documentación oficial, comentando y descomenta algunos para que veas lo que se refleja o no en el HTML una vez renderizado todo esto... pero, las que yo uso son las siguientes:

        SEOMeta::setTitle("Últimas publicaciones");
        SEOMeta::setDescription("Aquí encontrarás las últimas publicaciones que he subido a mi blog.");
        SEOTools::setDescription("Aquí encontrarás las últimas publicaciones que he subido a mi blog.");
        OpenGraph::setDescription("Aquí encontrarás las últimas publicaciones que he subido a mi blog.");
        OpenGraph::setTitle("Últimas publicaciones");
        OpenGraph::addProperty('type', 'articles');
        TwitterCard::setSite('@acy291190');
        TwitterCard::setTitle("Últimas publicaciones");

Esas las empleo de manera fija, para un bloque en particular en el cual muestro las ultimas publicaciones; pero, por ejemplo, para mis post:

        SEOMeta::setTitle($post->title);
        SEOMeta::setDescription($post->description);
        //SEOTools::setTitle($post->title);
        SEOTools::setDescription($post->description);
        OpenGraph::setDescription($post->description);
        OpenGraph::setTitle($post->title);
        OpenGraph::addProperty('type', 'articles');
        //OpenGraph::setUrl('http://current.url.com');
        TwitterCard::setTitle($post->title);
        TwitterCard::setSite('@acy291190');

Ya parte del contenido es dinámico, la cual compone el post que se está mostrando. 

En el archivo blade, o maestro

Ahora, podemos referenciar un archivo blade, que en la mayoría de los casos sería nuestro template en Laravel para agregar la posición en donde vamos a agregar los metas, que generalmente sería en el head:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
...
    @yield('headseo')
</head>

Y listo, ya con esto puedes emplear fácilmente las etiquetas para agregar metadatos en tu aplicación en Laravel.

Extra: Imágenes

Muy pero muy probablemente, quieres colocar referencias a las imágenes en tus metas, para eso:

OpenGraph::addImage(URL::to('/public/images/logo/logo.png'));
       TwitterCard::setImage(URL::to('/public/images/logo/logo.png'));
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 1 días!

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
!Web Alojada en Hostinger!