Potentially abstract the meta tag generation in <hea... | 11ty/docs

Thoughts on replacing the hardcoded document metadata (generic, Open Graph, and Twitter <meta> tags) in the <head> with a plugin/shortcode call which generates meta tags dynamically?

Lines 23-43 in the base layout base.njk are the main tags being replaced but L14-15 and L18-20 also were removed as they would be generated as well.

Proposed Change: Replace the code snippet below, e.g. the hardcoded <meta> tags in document metadata inside base.njk (L23-43) with a plugin/shortcode call.

{%- set subtitle %}{{ newstitle or searchTitle or relatedTitle or tiptitle or eleventyNavigation.key or title }}{% endset %}
{%- set subtitleText %}{% if subtitle and subtitle != "Eleventy Home" %}{{ subtitle }}—Eleventy,{% else %}Eleventy is{% endif %} a simpler static site generator.{% endset %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- set subtitle %}{{ newstitle or searchTitle or relatedTitle or tiptitle or eleventyNavigation.key or title }}{% endset %}
{%- set subtitleText %}{% if subtitle and subtitle != "Eleventy Home" %}{{ subtitle }}—Eleventy,{% else %}Eleventy is{% endif %} a simpler static site generator.{% endset %}
<title>{{ subtitleText }}</title>
<meta name="title" content="{{ subtitleText }}">
<meta name="description" content="{{ subtitleText }}">
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.png">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.11ty.dev/">
<meta property="og:site_name" content="Eleventy">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="{{ subtitle }}">
<meta property="og:description" content="{{ social.description }}">
<meta property="og:image" content="{{ social.imgsrc }}">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="640">
<meta property="og:image:alt" content="{{ social.imgalt }}">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="@eleven_ty">
<meta property="twitter:creator" content="@zachleat">
<meta property="twitter:url" content="https://www.11ty.dev/">
<meta property="twitter:title" content="{{ subtitleText }}">
<meta property="twitter:description" content="{{ social.description }}">
<meta property="twitter:image" content="{{ social.imgsrc }}">
<meta property="twitter:image:alt" content="{{ social.imgalt }}">

Instead use a plugin to remove all of the hardcoded <meta> tags and generate the tags dynamically producing the same output:

{%- set subtitle %}{{ newstitle or searchTitle or relatedTitle or tiptitle or eleventyNavigation.key or title }}{% endset %}
{%- set subtitleText %}{% if subtitle and subtitle != "Eleventy Home" %}{{ subtitle }}—Eleventy,{% else %}Eleventy is{% endif %} a simpler static site generator.{% endset %}
{% metagen title=subtitleText, desc=subtitleText, url="https://www.11ty.dev/", site_name="Eleventy", twitter_card_type="summary_large_image", twitter_handle="eleven_ty",
    creator_handle="zachleat", og_title=subtitle, og_desc=social.description, twitter_desc=social.description, img=social.imgsrc, img_alt=social.imgalt, img_width=1280,
    img_height=640, attr_name="property", comments=true, og_comment="Open Graph / Facebook"
%}

output:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overview—Eleventy, a simpler static site generator.</title>
<meta name="title" content="Overview—Eleventy, a simpler static site generator.">
<meta name="description" content="Overview—Eleventy, a simpler static site generator.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.11ty.dev/">
<meta property="og:site_name" content="Eleventy">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="Overview">
<meta property="og:description" content="A docs page for Eleventy v0.12.1, a simpler static site generator.">
<meta property="og:image" content="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fdocs%2F/opengraph/">
<meta property="og:image:alt" content="The 11ty logo text with a small floating possum on a balloon">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="640">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="@eleven_ty">
<meta property="twitter:creator" content="@zachleat">
<meta property="twitter:url" content="https://www.11ty.dev/">
<meta property="twitter:title" content="Overview—Eleventy, a simpler static site generator.">
<meta property="twitter:description" content="A docs page for Eleventy v0.12.1, a simpler static site generator.">
<meta property="twitter:image" content="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fdocs%2F/opengraph/">
<meta property="twitter:image:alt" content="The 11ty logo text with a small floating possum on a balloon">
<link rel="canonical" href="https://www.11ty.dev/">

(Note: Comments were in the initial hardcoded meta tags but can be excluded by removing comments=true as its false by default in the plugin when undefined.)

Utilizing the metagen plugin shrinks the document metadata down a bit, saving 20 lines (which isn't all that big of a deal) but makes the previously hardcoded <meta> tags a bit more dynamic and that is pretty nice. I have a branch with these changes running locally and everything is working nicely but I wanted to wait to submit a PR until we discussed things.

This is not necessarily an issue, just something I wanted to run by you to get your feedback. Thanks! 🎈

cc @zachleat

Potentially abstract the meta tag generation in <head> to plugin

Description

Contributor guide

First steps

Research direction

Assessment