How to manage meta tags in Laravel and improve SEO.

3 min readApr 1, 2019

Hello world, everyone!
I have a lot of experience in Laravel. There are landing pages, blogs, shops, News portals, and many other sites. And the main problem of developing these sites was SEO. I hated this abbreviation.

Someday I decided to make a good package that can help me to solve all problems with SEO in Laravel. It was a very long way. There was the first version of my package (kodicms/laravel-assets) on packagist.org and It was about 72k times downloaded, but I didn’t like it. It had a lot of problems, with tests, codebase, but the main problem was documentation. And I’ve decided to develop a new better version of the tool for managing meta tags, styles, scripts, OpenGraph, Twitter cards, e.t.c. with super documentation, by using TDD.

And finally let me introduce my new package butschster/meta-tags for managing meta tags and other tags in Laravel, that can help you save 90% of the time.

Now lets jump to the interesting part on how we can use this package in your laravel applications. At first you have to run the following command to include this package via Composer;

composer require butschster/meta-tags

Once the package is installed you need to register the service provider. Just run artisan command

php artisan meta-tags:install

Once that is done you can setup default application meta in config/meta_tags.php config.

Once configuration is complete you can then add the below at the meta area of the main layout you want to include meta tags;

<html lang="en">
    <head>
        @meta_tags
    </head>
</html>

Now you can manage meta in your controllers like this:

That’s it!

But it’s only the beginning!

You can do things like this

Meta::addScript('bootstrap.js', 'https://site.com/bootstrap.js')
    ->addStyle('bootstrap.css', 'https://site.com/bootstrap.css');

Packages!

Or… What about this?

You can group your meta tags, links, script into packages with names and set dependencies.

And include them into your layout via config

/*
* Default packages
*
* Packages, that should be included everywhere
*/
'packages' => [
     'bootstrap'
],

Or via controller

Meta::includePackages('bootstrap')

bootstrap package will automatically resolve all dependencies and will include all of them before including itself

Placements!

Scripts have to be in footer! You say: “Dude, what should I do, I want to place my scripts in footer”

No problem! :) Use custom placements!

By default all scripts use the footer placement, but you can change it! All other meta tags use head placement.

// Layout
<body>
   @meta_tags('my_custom_awesome_place')
   ...
   @meta_tags('footer')
</body>// Controller
Meta::addScript('calendar.js', 'https://site.com/calendar.js', [], 'head')Meta::addScript('calendar.js', 'https://site.com/calendar.js', [], 'my_custom_awesome_place')

Extending!

At first you can create any meta tags and links. It’s very simple.

Most of meta tags packages don’t support extensions, but in this package you can use Laravel Macroable trait.

Or you can your own class, that should implement interface \Butschster\Head\Contracts\MetaTags\Entities\TagInterface

More API and examples here https://github.com/butschster/LaravelMetaTags

Conclusion!

Recently my friend has asked a question: What can I add multiply favicons? Something like this:

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" /><link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" /><link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64" /><!--[if IE gt 6]>
<link rel="icon" type="image/png" href="/favicon-ie.png" />
<![endif]-->

I said YES. let’s Ross it!

I conclusion I have to say, this approach allows developers to use flexible meta tags, create reusable packages, and share them with you friends.

It took me some time to come up with this solution and i hope you like it.

Enjoy!

P.S. What about JavaScript variables?