Generate metatags in Laravel, ideal for SEO

SEO stands for Search Engine Optimization is a set of techniques that we use in our web pages that help them to position themselves naturally (without paying) in the first results of searches that are carried out in search engines such as Bing, Google or others, it is that simple Aspects such as that the content must contain keywords, H1s and others, a good organization... are the bases of SEO, and Laravel, being the quintessential PHP web framework, it is important how we can apply this type of practice.

If you have a blog, an online store and use Laravel, this package is ESSENTIAL to generate that metadata that Google and other engines need to index you.

Metatags are an essential element to give metadata or data to search engines, particularly search spiders like Google and that can obtain data about our web page, elements such as the title (which is not really a metatag), description, image, among others, are essential to give the first impression of our site and know what to do with it, therefore, as the development of Laravel go hand in hand for the creation of these types of sites, we will know how we can perform this integration without dying in the attempt.

There are multiple types of metadata that we can use, which in practice are HTML tags that are used to provide data, a description, a title, a reference to an image that alludes to the post (usually the famous main image of the post) before the so-called keywords or keywords that now no longer make much sense for engines like Google... and well, we can also customize some with the most famous social networks such as Twitter or Facebook using the prefixes og, twitter... in the aforementioned tags but in the end we put 3 types of data mainly:

Qualification
Description
Image

In this entry we are going to discuss how we can integrate a package that will facilitate the management of this type of components (metatags) easily on our site, using of course the Laravel environment in the process.

Install SEO tool package for Laravel

As we mentioned, we need a package that will speed up the whole process, we install it by composer in our Laravel project with:

composer create-project laravel/laravel seotools

Add the Provider

Then open the config/app.php file and add the following lines:

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

Configure package

Now run the command below; Since you will most likely be interested in making certain changes to indicate some default data:

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

It will create the configuration file config/seotools.php In the configuration file, you can define default values for SEO meta tags. Open the config/seotools.php file and edit the values to set this value as the default.

Add metadata to our site

In the controller or component, now we have to reference a set of classes to add the metas or data to our site, for this I suggest you go reviewing the official documentation, commenting and uncommenting some so you can see what is or is not reflected in the HTML once all this has been rendered... but the ones I use are the following:

        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");

I use these permanently, for a particular block in which I show the latest publications; but, for example, for my 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');

Already part of the content is dynamic, which makes up the post that is being displayed.

In the blade file, or master

Now, we can reference a blade file, which in most cases would be our template in Laravel to add the position where we are going to add the metas, which would generally be in the head:

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

And voila, with this you can easily use the tags to add metadata to your application in Laravel.

Bonus: Images

Very, very likely, you want to place references to the images in your metas, for that:

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

30-03-2023 - Andrés Cruz

En español

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy