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

Installs: 78

Dependents: 0

Suggesters: 0

Stars: 2

Watchers: 0

Forks: 0

Open Issues: 1


1.7.4 2019-02-19 15:31 UTC


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)

bnomei.htmlhead.opengraph (template only)

  • default: see snippet, false to disable


  • default: []
  • array of css files URIs


  • default: []
  • array of js files URIs


  • 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.