Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
tannerdolby opened this issue Sep 6, 2021 · 0 comments
Open

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

tannerdolby opened this issue Sep 6, 2021 · 0 comments

Comments

@tannerdolby
Copy link
Contributor

tannerdolby commented Sep 6, 2021 •
edited

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tannerdolby