fix(core): allow overriding ssr/dev template meta tags #7952

slorber · 2022-08-12T11:43:37Z

Motivation

Related to #7944

Move robots and viewport meta to <Head> so that we can more easily override them

Keep charSet and generator in the static templates for now, until a solution is found (we want them at the very top)

Test Plan

Manual 😅 Inspecting preview metadata, comparing to prod

Test page for overrides: https://deploy-preview-7952--docusaurus-2.netlify.app/tests/pages/head-metadata/

Test links

Deploy preview:

Former solution attempt (moving everything to use Head)

Our eta (prod) / ejs (dev) templates have metadata:

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Docusaurus v<%= it.version %>">
    <% if (it.noIndex) { %>
      <meta name="robots" content="noindex, nofollow" />
    <% } %>

But it's not possible to override it using react-helmet-async (and thus not either using themeConfig.metadata because those are static.

Apparently our <Head> component is capable to de-duplicate meta tags with the same name

Possible alternative: keep metadata in the template, but add data-rh='true' apparently allows react-helmet-async to kick in and update the existing tags instead of creating new ones. (see staylor/react-helmet-async#108
)

For consistency that looks better to always use <Head> and move out 100% of those metadata out of the templates.

Note: this works but I find this not very convenient to debug. I like the fact title, generator etc are at the very top, it makes it easy to inspect if a site is using Docusaurus or not. Maybe it's better to use the alternative solution?

netlify · 2022-08-12T11:48:52Z

✅ [V2]

Name	Link
🔨 Latest commit	`f1de68d`
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62ff9500b9c6340008f68aef
😎 Deploy Preview	https://deploy-preview-7952--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions · 2022-08-12T11:49:20Z

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟢 93	🟢 98	🟢 100	🟢 100	🟠 80	Report
/docs/installation	🟠 87	🟢 100	🟢 100	🟢 100	🟢 90	Report

github-actions · 2022-08-12T11:53:23Z

Size Change: +494 B (0%)

Total Size: 814 kB

Filename	Size	Change
`website/build/assets/js/main.********.js`	610 kB	+480 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`website/.docusaurus/globalData.json`	52.5 kB	0 B
`website/build/assets/css/styles.********.css`	111 kB	0 B
`website/build/index.html`	40.8 kB	+14 B (0%)

_{compressed-size-action}

Josh-Cena

I like this!

Josh-Cena · 2022-08-12T11:58:42Z

I like the fact title, generator etc are at the very top, it makes it easy to inspect if a site is using Docusaurus or not.

I think the same. I think it's possible to promote certain tags in react-helmet?

slorber · 2022-08-12T12:00:32Z

The problem is our plugin lifecycle uses a totally different code path, using plain strings and not <Head> 😅

  injectHtmlTags?: (args: {content: Content}) => {
    headTags?: HtmlTags;
    preBodyTags?: HtmlTags;
    postBodyTags?: HtmlTags;
  };

For example all the PWA plugin metadata also can't be overridden (no "data-rh" attribute)

slorber · 2022-08-12T12:10:35Z

Important note: apparently the order has an impact on SEO: https://github.com/staylor/react-helmet-async#prioritizing-tags-for-seo

"generator" meta is not in the list (PR staylor/react-helmet-async#180)

Josh-Cena · 2022-08-12T12:12:12Z

Ah I see. That's not a bad thing to do—smaller JS bundle. Maybe we can keep generator in the template? (Shouldn't be overridable anyway)

slorber · 2022-08-12T12:15:00Z

Ah I see. That's not a bad thing to do—smaller JS bundle. Maybe we can keep generator in the template? (Shouldn't be overridable anyway)

I'd like later to provide extra tooling on top of Docusaurus to make it even easier, in which case overriding the generator might be a use-case

For example a simple CLI command npx yoloblog ./blog --title 'Sebastien Lorber Blog' --color blue

fflaten · 2022-08-15T18:50:06Z

The problem is our plugin lifecycle uses a totally different code path, using plain strings and not <Head> 😅
...
For example all the PWA plugin metadata also can't be overridden (no "data-rh" attribute)

👍 Should definitely work as well, but that's maybe a separate issue (if not created already) since it already doesn't work? And not a blocking issue for this PR which is more realistic to get implemented?

I assume that will be a larger rewrite and should it require a different approach for SiteMetadataDefaults then that PR will fix all.

... in which case overriding the generator might be a use-case

Some users might also want to hide it. Not familiar with security risks in SSR, but company security policies may require it - especially version.

slorber · 2022-08-19T11:48:01Z

Going to keep "generator" (see staylor/react-helmet-async#180) and "charSet" (see staylor/react-helmet-async#181) outside of Helmet system for now

slorber · 2022-08-19T13:31:51Z

Also reverting the usage of prioritizeSeoTags for now, it produces a suspicious diff on our test snapshot 😅 we didn't use it before and it does not seem critical

see https://github.com/facebook/docusaurus/runs/7917709859?check_suite_focus=true

slorber · 2022-08-19T13:48:40Z

Also found out some limitations when using data-rh=true: staylor/react-helmet-async#108 (comment)

This leads to these metas being automatically removed (if not found in <Head>) or moved in the middle of <head> at an incorrect position (if found in <Head>)

For now, let's keep it simple: charSet and generator won't be overrideable, but viewport and robots will be

slorber · 2022-08-19T14:47:01Z

working as I want it to be for now 👍

fflaten · 2022-08-19T14:56:55Z

Wow, that was fast. Thanks! 🙂

migrate all default site metadata to helmet

Verified

This commit was signed with the committer’s verified signature.

Josh-Cena Joshua Chen

GPG key ID: C37145B818BDB68F

Verified
Learn about vigilant mode

9c63109

slorber added the pr: bug fix label Aug 12, 2022

slorber requested review from lex111 and Josh-Cena as code owners August 12, 2022 11:43

facebook-github-bot added the CLA Signed label Aug 12, 2022

Josh-Cena changed the title ~~fix(core): ssr/dev template meta tags can't be overridden => migrate to <Head>~~ fix(core): allow overriding ssr/dev template meta tags Aug 12, 2022

Josh-Cena approved these changes Aug 12, 2022

View reviewed changes

slorber marked this pull request as draft August 12, 2022 11:54

move helmet meta attributes first + update doc

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.

Learn about vigilant mode

fca4920

slorber added 2 commits August 19, 2022 13:02

Merge branch 'main' into slorber/update-site-metadata

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

GPG key ID: 4AEE18F83AFDEB23
Expired

Verified
Learn about vigilant mode

a4ddb71

use Helmet prioritizeSeoTags

797fb43

slorber added 2 commits August 19, 2022 14:01

keep charSet + generator in html templates

c8130a0

revert prioritizeSeoTags

dbabd3d

slorber marked this pull request as ready for review August 19, 2022 13:31

revert usage of data-rh=true

df64226

add robots override dogfood test

f1de68d

slorber merged commit 94067ce into main Aug 19, 2022

slorber deleted the slorber/update-site-metadata branch August 19, 2022 14:47

slorber added the to backport label Aug 19, 2022

slorber added a commit that referenced this pull request Sep 1, 2022

fix(core): allow overriding ssr/dev template meta tags (#7952)

0a2ab30

slorber added a commit that referenced this pull request Sep 1, 2022

fix(core): allow overriding ssr/dev template meta tags (#7952)

091656f

slorber added backported and removed to backport labels Sep 28, 2022

slorber mentioned this pull request Oct 19, 2023

chore: v3.0.0-rc.0 release #9418

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(core): allow overriding ssr/dev template meta tags #7952

fix(core): allow overriding ssr/dev template meta tags #7952

slorber commented Aug 12, 2022 •

edited

Loading

netlify bot commented Aug 12, 2022 •

edited

Loading

github-actions bot commented Aug 12, 2022 •

edited

Loading

github-actions bot commented Aug 12, 2022 •

edited

Loading

Josh-Cena left a comment

Josh-Cena commented Aug 12, 2022

slorber commented Aug 12, 2022 •

edited

Loading

slorber commented Aug 12, 2022 •

edited

Loading

Josh-Cena commented Aug 12, 2022

slorber commented Aug 12, 2022 •

edited

Loading

fflaten commented Aug 15, 2022 •

edited

Loading

slorber commented Aug 19, 2022

slorber commented Aug 19, 2022 •

edited

Loading

slorber commented Aug 19, 2022 •

edited

Loading

slorber commented Aug 19, 2022

fflaten commented Aug 19, 2022

fix(core): allow overriding ssr/dev template meta tags #7952

fix(core): allow overriding ssr/dev template meta tags #7952

Conversation

slorber commented Aug 12, 2022 • edited Loading

Motivation

Test Plan

Test links

Former solution attempt (moving everything to use Head)

netlify bot commented Aug 12, 2022 • edited Loading

✅ [V2]

github-actions bot commented Aug 12, 2022 • edited Loading

⚡️ Lighthouse report for the deploy preview of this PR

github-actions bot commented Aug 12, 2022 • edited Loading

Josh-Cena left a comment

Choose a reason for hiding this comment

Josh-Cena commented Aug 12, 2022

slorber commented Aug 12, 2022 • edited Loading

slorber commented Aug 12, 2022 • edited Loading

Josh-Cena commented Aug 12, 2022

slorber commented Aug 12, 2022 • edited Loading

fflaten commented Aug 15, 2022 • edited Loading

slorber commented Aug 19, 2022

slorber commented Aug 19, 2022 • edited Loading

slorber commented Aug 19, 2022 • edited Loading

slorber commented Aug 19, 2022

fflaten commented Aug 19, 2022

slorber commented Aug 12, 2022 •

edited

Loading

netlify bot commented Aug 12, 2022 •

edited

Loading

github-actions bot commented Aug 12, 2022 •

edited

Loading

github-actions bot commented Aug 12, 2022 •

edited

Loading

slorber commented Aug 12, 2022 •

edited

Loading

slorber commented Aug 12, 2022 •

edited

Loading

slorber commented Aug 12, 2022 •

edited

Loading

fflaten commented Aug 15, 2022 •

edited

Loading

slorber commented Aug 19, 2022 •

edited

Loading

slorber commented Aug 19, 2022 •

edited

Loading