Skip to content
Kirby Plugin for a best-practice HTML Head Element extendable with snippets
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Kirby 3 HTMLHead

GitHub release License Kirby Version Kirby 3 Pluginkit

Kirby 3 Plugin for a best-practice HTML Head Element extendable with snippets.

Commercial Usage

This plugin is free but if you use it in a commercial project please consider to


  • unzip as folder site/plugins/kirby3-htmlhead or
  • git submodule add site/plugins/kirby3-htmlhead or
  • composer require bnomei/kirby3-htmlhead

Key Features

  • basic metatags
  • js and css
  • rss feed (xml)
  • opengraph
  • webfontloader to load and track webfonts
  • loadjs to load js and css
  • a11y.css when config debug => true
  • Unregistered Snippet examples for google-analytics and google-tag-manager. You need to copy them to your /site/snippets folder.


In any template or your header snippet call the page method right after the tags that should come first.

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
<base href="<?= site()->url() ?>'">'
<link rel="canonical" href="<?= $page->url() ?>">'
<title><?= $page->title() ?></title>
<?= $page->htmlhead_snippets() ?>

Or if you would use these meta tags anyway you can use

<?= $page->htmlhead_alpha($page->title()) ?>
<?= $page->htmlhead_snippets() ?>
// or just
<?php snippet('plugin-htmlhead') ?>

You can also provide custom metatags and on-the-fly options.

    $metatags = [
        '<meta name="robots" content="noindex, nofollow">',
        '<meta name="keywords" content="Kirby,Plugin,Html,Head,Meta,Snippets">',
    $options = [
        'htmlhead/seo' => false,
        'htmlhead/opengraph' => false,
<?= $page->htmlhead_alpha($page->title(), $metatags) ?>
<?= $page->htmlhead_snippets($options) ?>
// or just
<?php snippet('plugin-htmlhead', [
    'metatags' => $metatags, 
    'options' => $options
]) ?>

There is a language helper available as well.

<html <?= site()->attrLang() ?>>
<!-- ... ->

Extending with Snippets

If you have your own snippets you want to have called at the header simply add them to the bnomei.htmlhead.snippets setting. For example you could create a snippet/matomo.php with your piwik/matomo tracking code and just add that to the config.

return [
    'bnomei.htmlhead.snippets' => [
    // ... other options


You can set these in your site/config/config.php or in your template code since $page has to exist.


  • default: []
  • this will call all snippets of this plugin. add the name of your snippet without its file-extension.

bnomei.htmlhead.seo (template only)

Example: site/plugins/ogtags/index.php

Kirby::plugin('myname/ogtags', [
    'pageMethods' => [
        'head_author' => function () {
            return site()->author()->isNotEmpty() ? site()->author()->value() : null;
        'head_description' => function () {
            return $this->description()->isNotEmpty() ? $this->description()->value() : site()->description()->value();
        'head_image' => function () {
            return $this->seoimage()->isNotEmpty() ? $this->seoimage()->toFile() : $this->images()->first();

bnomei.htmlhead.opengraph (template only)

  • default: see snippet, false to disable


  • default: []
  • array of css files URIs

TIP: use | to add SRI to external stylesheets. example:|sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC


  • default: []
  • array of js files URIs

TIP: use | to add SRI to external scripts.


  • default: false
  • URI for application/rss+xml feed page object.


  • default: option('debug', false)
  • a11y.css will only be loaded if debug is enabled.



TIP: if loading assets from other servers consider using fingerprint plugin with SRI instead.

return [
    'bnomei.htmlhead.loadjs' => [
        'home' => [ // custom id
            'template' => ['home', 'projects'], // templates
            'dependencies' => [
                '/assets/css/flickty.min.css', // css too!
        '*' => [ // fallback
            'template' => [], // all templates
            'dependencies' => [
    // ... other options


  • default: false
  • set a string to be echoed example
return [
    'bnomei.htmlhead.webfontloader' => 
        "google: {
            families: ['Droid Sans']
        custom: {
            families: ['My Font', 'My Other Font:n4,i4,n7'],
            urls: ['/fonts.css']
    // ... other options


  • default: 'en' as fallback in non multilang setups


This plugin is provided "as is" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. If you find any issues, please create a new issue.



It is discouraged to use this plugin in any project that promotes racism, sexism, homophobia, animal abuse, violence or any other form of hate speech.

You can’t perform that action at this time.