How to manage meta tags in Laravel and improve SEO.
Pavel BuchnevBlockedUnblockFollowFollowingApr 1Hello 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.
What is Laravel meta tags manager?- Standard SEO- Facebook OpenGraph- Twitter Card- Links to CSS files- Links to JS files- Tools for webmasters- Extensions- Good documentationNow 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-tagsOnce the package is installed you need to register the service provider.
Just run artisan commandphp artisan meta-tags:installOnce that is done you can setup default application meta in config/meta_tags.
php config.
[ /* * Meta title section */ 'title' => [ 'default' => env('APP_NAME'), 'separator' => '-', 'max_length' => 255, ], /* * Meta description section */ 'description' => [ 'default' => null, 'max_length' => 255, ], /* * Meta keywords section */ 'keywords' => [ 'default' => null, 'max_length' => 255 ], 'charset' => 'utf-8', 'robots' => null, 'viewport' => Viewport::RESPONSIVE, 'csrf_token' => true,]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:use ButschsterHeadFacadesMeta;class HomeController extends Controller { public function index() { $news = News::paginate(); Meta::prependTitle('Home page') ->setPaginationLinks($news) ->setFavicon('/favicon-index.
ico') ->addMeta('robots', ['content' => 'noindex']); }}That’s it!But it’s only the beginning!You can do things like thisMeta::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.
// Service providerPackageManager::create('jquery', function($package) { $package->addScript( 'jquery.
js', 'https://code.
jquery.
com/jquery-3.
3.
1.
min.
js', ['defer'] );});PackageManager::create('bootstrap', function($package) { $package ->requires('jquery') ->addScript('bootstrap.
js', 'https://site.
com/bootstrap.
js') ->addStyle('bootstrap.
css', 'https://site.
com/bootstrap.
css'););And include them into your layout via config/** Default packages** Packages, that should be included everywhere*/'packages' => [ 'bootstrap'],Or via controllerMeta::includePackages('bootstrap')bootstrap package will automatically resolve all dependencies and will include all of them before including itselfPlacements!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>// ControllerMeta::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.
Meta::addMeta('author', [ 'content' => 'butschster',]);// <meta name="author" content="butschster">Meta::addLink('apple-touch-icon-precomposed', [ 'href' => 'http://site.
com', 'id' => 'id:213']);// <link rel="apple-touch-icon-precomposed" href="http://site.
com" id="id:213" />Most of meta tags packages don’t support extensions, but in this package you can use Laravel Macroable trait.
// Service providerMeta::macro('registerSeoMetaTagsForPage', function (AppPage $page) { $this ->prependTitle($page->title) ->setKeywords($page->meta_keywords) ->setDescription($page->meta_description); });// Controlleruse ButschsterHeadFacadesMeta;class PageController extends Controller { public function show(AppPage $page) { Meta::registerSeoMetaTagsForPage($page); }}Or you can your own class, that should implement interface ButschsterHeadContractsMetaTagsEntitiesTagInterfaceuse ButschsterHeadContractsMetaTagsEntitiesTagInterface;class FacebookPixelTag implements TagInterface { public function __construct(string $id) { .
} public function placement(): string { return 'footer' } public function toHtml() { return '<script type="text/javascript">.
</script>' }}Meta::addTag('facebook.
pixel', new FacebookPixelTag('42b3h23-34234'));// <script type="text/javascript">.
</script>More API and examples here https://github.
com/butschster/LaravelMetaTagsConclusion!Recently my friend has asked a question: What can I add multiply favicons?.Something like this:<link rel="icon" type="image/png" href="/favicon-16×16.
png" sizes="16×16" /><link rel="icon" type="image/png" href="/favicon-32×32.
png" sizes="32×32" /><link rel="icon" type="image/png" href="/favicon-64×64.
png" sizes="64×64" /><!–[if IE gt 6]><link rel="icon" type="image/png" href="/favicon-ie.
png" /><![endif]–>I said YES.
let’s Ross it!use ButschsterHeadMetaTagsEntitiesFavicon;use ButschsterHeadMetaTagsEntitiesConditionalComment;PackageManager::create('favicons', function($package) { $sizes = ['16×16', '32×32', '64×64'];foreach ($sizes as $) { $package->addTag('f.
'.
$size, new Favicon('/favicon-'.
$size.
'.
png', [ 'sizes' => $size ])); }$package->addTag('favicon.
ie', new ConditionalComment( new Favicon('/favicon-ie.
png'), 'IE gt 6' )); });}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?use ButschsterHeadMetaTagsEntitiesJavascriptVariables;$variables = new JavascriptVariables([ 'string' => 'Hello world', 'number' => 4815162342, 'bool' => true, 'nullable' => null]);// you can put new variable$variables->put('array', ['jquery', 'vuejs']);Meta::addTag('variables', $variables);// <script>// window.
array = ["jquery","vuejs"];// window.
string = 'Hello world';// window.
number = 4815162342;// window.
bool = true;// window.
nullable = null;// </script>.