Devisto provides a meta() helper on which you can call several methods to include meta data in your project. You can call these methods anywhere in your project. Each call saves the info in a global object, but doesn't render anything at that moment. At the end all registered info can be rendered in one chunk by using the @meta directive.
Below we list all available methods. Each time we show you how to use it, along with the output it generates for you.
// Title has several extra methods to chunk things up
meta()->title('My Title')->append('My Website')->separator(' - ');
// This allows for overriding of one part without losing the rest
meta()->title(page()->title);{{-- Output --}}
<title>My Title - My Website</title>
<meta property="og:title" content="My Title - My Website">
<meta name="twitter:title" content="My Title - My Website">// Use a fixed string
meta()->description('My Description');
// Use a page field
meta()->description(page()->description);{{-- Output --}}
<meta name="description" content="My Description">
<meta property="og:description" content="My Description">
<meta name="twitter:description" content="My Description">// Use the default
meta()->charset();
// Or specify something else
meta()->charset('some-other-charset');{{-- Output --}}
<meta charset="utf-8">// Use the default
meta()->viewport();
// Or specify something else
meta()->viewport('some-other-viewport');{{-- Output --}}
<meta name="viewport" content="width=device-width, initial-scale=1">// Use a path to an asset
meta()->image('path/to/asset.jpg');
// Or use an asset object
meta()->image($asset);{{-- Output --}}
<meta name="image" content="https://.../path/to/asset.jpg">
<meta property="og:image" content="https://.../path/to/asset.jpg">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="768">
<meta name="twitter:image" content="https://.../path/to/asset.jpg">// Any meta tag
meta()->tag('robots', 'noindex');{{-- Output --}}
<meta name="robots" content="noindex">// Twitter specific meta tag
meta()->twitter('card', 'summary_large_image');{{-- Output --}}
<meta name="twitter:card" content="summary_large_image">// Open Graph meta tag
meta()->og('type', 'website');{{-- Output --}}
<meta name="og:type" content="website">// Some canonical URL
meta()->canonical('...');{{-- Output --}}
<meta rel="canonical" href="...">// Use a path to an asset
meta()->favicon('path/to/favicon.png');
// Or use an asset object
meta()->favicon($asset);{{-- Output --}}
<link rel="apple-touch-icon" sizes="57x57" href="https://.../path/to/favicon.png?w=57&h=57&fit=crop">
<link rel="apple-touch-icon" sizes="60x60" href="https://.../path/to/favicon.png?w=60&h=60&fit=crop">
<link rel="apple-touch-icon" sizes="72x72" href="https://.../path/to/favicon.png?w=72&h=72&fit=crop">
<link rel="apple-touch-icon" sizes="76x76" href="https://.../path/to/favicon.png?w=76&h=76&fit=crop">
<link rel="apple-touch-icon" sizes="114x114" href="https://.../path/to/favicon.png?w=114&h=114&fit=crop">
<link rel="apple-touch-icon" sizes="120x120" href="https://.../path/to/favicon.png?w=120&h=120&fit=crop">
<link rel="apple-touch-icon" sizes="144x144" href="https://.../path/to/favicon.png?w=144&h=144&fit=crop">
<link rel="apple-touch-icon" sizes="152x152" href="https://.../path/to/favicon.png?w=152&h=152&fit=crop">
<link rel="icon" type="image/png" sizes="16x16" href="https://.../path/to/favicon.png?w=16&h=16&fit=crop">
<link rel="icon" type="image/png" sizes="32x32" href="https://.../path/to/favicon.png?w=32&h=32&fit=crop">
<link rel="icon" type="image/png" sizes="96x96" href="https://.../path/to/favicon.png?w=96&h=96&fit=crop">
<link rel="icon" type="image/png" sizes="160x160" href="https://.../path/to/favicon.png?w=160&h=160&fit=crop">
<link rel="icon" type="image/png" sizes="196x196" href="https://.../path/to/favicon.png?w=196&h=196&fit=crop">
<meta name="msapplication-TileImage" content="https://.../path/to/favicon.png?w=144&h=144&fit=crop">The meta helper is built in such a way that all info that is added, will never be overwritten by later calls to the same methods. So when you call the title() method in a page template, and later on that same method is called in a master template, the value set on the page will still be present. Only if there hasn't been a call to title() before, the value set in the master template will be used. This way, you can set global values in your master template, but still specify other values on specific pages when necessary.
To illustrate, let's assume this is your master template:
@php
meta()->title('Website Title')->append('My Website')->separator(' - ');
meta()->description('Website Description');
@endphp
<html>
<head>
@meta
...
</head>
<body>
...
@yield('body')
...
</body>
</html>If you do no calls to meta() in your page template, the title of the page will be Website Title - My Website and the description will be Website Description:
@extends('master')
@section('body')
...
@endsectionBut when you set specific values on the page, these will take precedence. So the following will result in a title Page Title - My Website and a description Page Description:
@php
meta()->title('Page Title');
meta()->description('Page Description');
@endphp
@extends('master')
@section('body')
...
@endsectionNote that calls on meta() never render any HTML code. Use the built-in @meta directive in your <head> tag to render all specified tags:
<html>
<head>
@meta
...
</head>
...
</html>