HTML meta tags generator for Kirby. Supports Open Graph and Twitter Cards out of the box.
$ kirby plugin:install pedroborges/kirby-meta-tags
Basic Usage
After installing the Meta Tags plugin, you will need to add one line to the head element on your template, or header.php snippet:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <?php echo $page->metaTags() ?>
Default
The plugin ships with some default meta tags enabled for your convenience:
c::set('meta-tags.default', [
'title' => site()->title(),
'meta' => [
'description' => site()->description()
],
'link' => [
'canonical' => page()->url()
],
'og' => [
'title' => page()->title(),
'type' => 'website',
'site_name' => site()->title(),
'url' => page()->url()
]
]);
The meta-tags.default option is applied to all pages on your Kirby site. Of course you can and I encourage you to change these defaults. In order to do that, you just need to copy this example to your site/config/config.php and tweak it to fit your needs.
Templates
Following the flexible spirit of Kirby, you also have the option to add template specific meta tags:
c::set('meta-tags.templates', [
'article' => [ // template name
'og' => [ // tags group name
'type' => 'article', // overrides the default
'namespace:article' => function($page) {
return [
'author' => $page->author(),
'published_time' => $page->date('%F'),
'modified_time' => $page->modified('%F'),
'tag' => ['tech', 'web']
];
},
'namespace:image' => function($page) {
$image = $page->cover()->toFile();
return [
'image' => $image->url(),
'width' => $image->width(),
'height' => $image->height(),
'type' => $image->mime()
];
}
]
],
]);
When a template key matches the current page’s template name, it is merged and overrides any repeating properties defined on the meta-tags.default option so you don’t have to repeat yourself.
Result HTML
<!-- merged default definition -->
<title>Pedro Borges</title>
<meta name="description" content="My personal website">
<meta property="og:title" content="My blog post title">
<meta property="og:site_name" content="Pedro Borges">
<meta property="og:url" content="https://pedroborg.es/blog/my-article">
<!-- template definition -->
<meta property="og:type" content="article">
<meta property="og:article:author" content="Pedro Borges">
<meta property="og:article:published_time" content="2017-02-28">
<meta property="og:article:modified_time" content="2017-03-01">
<meta property="og:article:tag" content="tech">
<meta property="og:article:tag" content="web">
<meta property="og:image" content="https://pedroborg.es/content/blog/my-article/cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<link rel="canonical" href="https://pedroborg.es/blog/my-article">
There are a lot of more examples on the repo.
