HTML HEAD guidance

Kirby 3 Solved ✅
1

How to make your site sharable with site previews for social and apps?

In searching out the best setup for all of my websites to use the nearly bare minimum when it comes to these items, I have a few suggestions of where to search:

Reference

This one will guide you through creating your own:

This will give you a complete rundown on nearly every single HEAD item in sight (lol):
https://htmlhead.dev

Why here

What warrants a post in this forum is wrapping up a quick way to logically run through these items depending on if you’re on your homepage or a subpage (i.e.: grab the site social image or grab the article social image, etc.).

IF

What we need is a <?php if formula for populating the opengraph/twitter meta elements as well as any others.

We already have <?= $site->title() ?> and <?= $page->title() ?> to use, which makes that part easy…

Share your strategy

I’ve even seen that some people will use a plugin for all of this, or even add fields to the site.yml for this as well.

Have you set this up in your header.php snippet yet? Have some suggestions? Perhaps it should be in a new cookbook?

2

I like, and use, @pedroborges’ plugin for this: https://github.com/pedroborges/kirby-meta-tags

This allows me to replace the proliferation of all head-meta-items with this: <?= $page->metaTags() ?>, whilst remaining powerful by allowing per-template overrides (if necessary).

1 Like
3

i use @pedroborges meta tags plugin as well

1 Like
4

This is an excellent solution. Thanks, @bvdputte and @bnomei.