Cómo Agregar Meta Tags en Laravel Usando @yield: Guía Paso a Paso para SEO

Autor: J. Luis

#Laravel

Agregar meta tags dinámicos en Laravel usando @yield. Mejora el SEO de tu sitio web con títulos, descripciones y palabras clave optimizadas. 💻✨

Suscríbete a nuestro canal en Youtube

La redacción y estructura SEO son esenciales para mejorar la visibilidad en internet e indexar contenidos en los buscadores con un objetivo definido

En este artículo, te mostraremos cómo usar @yield en Laravel para agregar meta tags dinámicos que optimicen tu sitio web para motores de búsqueda como Google.

¿Qué son los Meta Tags y por qué son importantes?

Los meta tags son etiquetas HTML que proporcionan información sobre una página web a los motores de búsqueda. Estas etiquetas no son visibles para los usuarios, pero juegan un papel crucial en el posicionamiento SEO

. Algunos de los meta tags más relevantes incluyen:

Título (title): Define el título de la página (entre 50 y 70 caracteres).
Descripción (description): Proporciona una breve descripción del contenido (entre 150 y 160 caracteres).
Palabras clave (keywords): Ayuda a identificar los temas principales de la página.
Open Graph y Twitter Cards: Mejoran la visibilidad en redes sociales.

Cómo Usar `@yield` para Agregar Meta Tags en Laravel

El uso de @yield en Laravel permite definir secciones en el layout principal que pueden ser rellenadas con contenido específico desde las vistas hijas. Esto facilita la gestión de meta tags dinámicos y personalizados para cada página.

Configurar el Layout Principal

En tu archivo de layout principal (por ejemplo, resources/views/layouts/app.blade.php), define las secciones para los meta tags utilizando @yield.

html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Título Predeterminado')</title>
    <meta name="description" content="@yield('description', 'Descripción predeterminada para SEO.')">
    <meta name="keywords" content="@yield('keywords', 'laravel, desarrollo web, seo')">
    <meta name="author" content="@yield('author', 'Tu Nombre')">
</head>
<body>
    @yield('content')
</body>
</html>

Este diseño modular garantiza que siempre haya valores predeterminados en caso de que no se especifiquen meta tags específicos.

Definir Meta Tags en las Vistas Hijas

En las vistas específicas, usa la directiva @section para proporcionar contenido personalizado para los meta tags.

Ejemplo: Vista de un Artículo de Blog

Supongamos que tienes una vista para un artículo de blog (resources/views/posts/show.blade.php):

php

@extends('layouts.app')

@section('title', 'Título del Artículo')
@section('description', 'Esta es la descripción optimizada para SEO del artículo.')
@section('keywords', 'artículo, blog, laravel, desarrollo')
@section('author', 'Nombre del Autor')

@section('content')
    <h1>Título del Artículo</h1>
    <p>Contenido del artículo...</p>
@endsection

Con este enfoque, cada página puede tener sus propios meta tags únicos, lo que mejora significativamente el SEO.

Usar Valores Dinámicos desde Controladores

Si los meta tags dependen de datos dinámicos (como el título o descripción de un post), puedes pasarlos desde el controlador a la vista.

Controlador:

php

public function showPost($id)
{
    $post = Post::find($id);

    return view('posts.show', [
        'post' => $post,
    ]);
}

Vista (`show.blade.php`):

php

@extends('layouts.app')

@section('title', $post->title)
@section('description', $post->excerpt)
@section('keywords', implode(', ', json_decode($post->tags)))
@section('author', $post->author)

@section('content')
    <h1>{{ $post->title }}</h1>
    <p>{{ $post->content }}</p>
@endsection

Esto permite que los meta tags sean completamente dinámicos y adaptables al contenido de cada página.

Agregar Open Graph y Twitter Cards con `@yield`

Para mejorar la visibilidad en redes sociales, también puedes incluir meta tags de Open Graph y Twitter Cards usando @yield.

Layout Principal:

html

<head>
    <meta property="og:title" content="@yield('og_title', 'Título Predeterminado')">
    <meta property="og:description" content="@yield('og_description', 'Descripción predeterminada.')">
    <meta property="og:image" content="@yield('og_image', asset('images/default.jpg'))">
    <meta property="og:url" content="@yield('og_url', url()->current())">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="@yield('twitter_title', 'Título Predeterminado')">
    <meta name="twitter:description" content="@yield('twitter_description', 'Descripción predeterminada.')">
    <meta name="twitter:image" content="@yield('twitter_image', asset('images/default.jpg'))">
</head>

Vista Específica:

php

@section('og_title', $post->title)
@section('og_description', $post->excerpt)
@section('og_image', asset('storage/' . $post->image))
@section('og_url', url()->current())

Esto asegura que tus enlaces se vean bien cuando se compartan en plataformas como Facebook o Twitter

Proporcionar Contenido Predeterminado con `@yield`

Si deseas proporcionar contenido predeterminado para ciertos meta tags, puedes hacerlo directamente en el layout principal. Por ejemplo:

html

<title>@yield('title', 'Mi Sitio Web')</title>
<meta name="description" content="@yield('description', 'Este es un sitio desarrollado con Laravel.')">

Esto garantiza que siempre haya un valor válido, incluso si no se especifica en la vista hija.

Consejos Adicionales para Optimizar Meta Tags

Encuentra temáticas que interesen a tu audiencia: Investiga palabras clave relevantes para tu nicho y úsalas en tus meta tags
Pon el foco en satisfacer la intención del usuario: Asegúrate de que tus meta tags reflejen claramente el contenido de la página.
Usa long-tail keywords: Las palabras clave largas y específicas tienen menos competencia y son más efectivas para atraer tráfico cualificado
Mantén la longitud adecuada: Los títulos deben tener entre 50 y 70 caracteres, y las descripciones entre 150 y 160 caracteres

Conclusión

Usar @yield para agregar meta tags en Laravel es una práctica recomendada porque permite mantener un diseño limpio y modular. Además, facilita la personalización de meta tags para cada página, mejorando tanto el SEO como la experiencia del usuario.

¡Implementa este enfoque en tu proyecto y optimiza tus meta tags hoy mismo! Si tienes preguntas o sugerencias, déjanos un comentario. 🚀

Leido 588 veces | 0 usuarios

Código fuente no disponible.

Compartir link del tutorial con tus amigos