Adds new <Metadata> component for proper <meta> tag generation #9315

cannikin · 2023-10-18T19:13:18Z

Rather than trying to only allow certain props and try to transform one to another, we're going to allow you to basically enter anything you want, but with a couple of conventions.

I propose keeping the existing <MetaTags> functionality as it exists and just add <Metadata> as a whole new concept. This allows us to release sooner than 7.0, since it would be non-breaking, and makes it easier for people to upgrade over time rather than all at once: having to change potentially hundreds of existing <MetaTags> declarations (across pages and cells) before they can deploy their app again would not be fun. I'll make it clear in the docs that they really want to move to <Metadata> once SSR is available in order to get maximum benefit for bots crawling their site.

Definitions

Top level prop means a plain text name like "title" or "description"
Namespaced prop means a name with one or more colons, like og:image

Rules

Any "top level" prop will create a `<meta>` tag with `name` and `content` attributes

<Metadata description="Lorem ipsum dolar sit amet..." />
// generates
<meta name="description" content="Lorem ipsum dolar sit amet..." />

You can add child elements which will be appended to any you create as props

<Metadata description="Lorem ipsum dolar sit amet...">
  <meta httpEquiv="refresh" content="30" />
</Metadata>
// generates
<meta name="description" content="Lorem ipsum dolar sit amet..." />
<meta http-equiv="refresh" content="30" />

Any "namespaced" props will create a `<meta>` tag with `property` and `content` attributes

<Metadata og={{ image:"http://host.test/image.jpg" />
// generates
<meta property="og:image" content="http://host.test/image.jpg" />

You can create multiple `<meta>` tags with the same name/property, the OpenGraph spec encourages this

<Metadata og={{ image: ["http://host.test/image1.jpg", "http://host.test/image2.jpg"] />
// generates
<meta property="og:image" content="http://host.test/image1.jpg" />
<meta property="og:image" content="http://host.test/image2.jpg" />

You can combine values and child namespaces

<Metadata
  og={{
    image: [
      'http://host.test/image1.jpg',
      { width: 300, height: 300 },
      'http://host.test/image2.jpg',
      'http://host.test/image3.jpg',
      { height: 1000 },
    ],
  }}
/>
// generates
<meta property="og:image" content="http://host.test/image1.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://host.test/image2.jpg" />
<meta property="og:image" content="http://host.test/image3.jpg" />
<meta property="og:image:height" content="1000" />

If you define any `og` prop, we will copy any `title` and `description` to an `og:title` and `og:description` tag.

<Metadata title="My Website" og />
// generates
<meta name="title" content="My Website" />
<meta property="og:title" content="My Website" />

You can override this behavior by explicitly setting og:title to null:

<Metadata title="My Website" og={{ title: null }}/>

If you define any `og` prop, we will create an `og:type` set to `website`:

<Metadata og />
// generates
<meta property="og:type" content="website" />

You can override this behavior by explicitly setting og:type:

<Metadata og={{ type: 'music:album' }}/>

If you define a `charSet` prop will we create the special `<meta charSet>` tag:

<Metadata charSet="utf-8" />
// generates
<meta charset="utf-8" />

If you define a `locale` prop we will inject the `locale` attribute into the opening `<html>` tag:

<Metadata locale="en-US" />
// generates
<html locale="en-US">
  <!-- ... -->
  <meta name="locale" content="en-US" />

This should allow the <meta> generation to be as flexible as possible, allowing you to create twitter, facebook, and any other OpenGraph-like properties in the future:

<Metadata
  title="My Website"
  description="Lorem ipsum dolar sit amet..."
  charSet="utf-8"
  locale="en-US"
  og={{
    image: [
      'https://example.com/rock1.jpg',
      { width: 300, height: 300 },
      'https://example.com/rock2.jpg', 
      { width: 600, height: 600 },
    ],
  }}
  twitter={{
    card: 'summary',
    site: '@spoke',
    creator: '@cannikin',
  }}
  fb={{
    app_id: '1234567890',
  }}
/>

Note for releasing

There’s a comment in the doc about “Prior to v7.0 Redwood provided a <MetaTags> helper that has now been deprecated…” so if this goes in earlier than 7 we’ll want to update that text.

dac09 · 2023-10-19T05:01:54Z

So the idea with MetaTags, was to have a component that simplifies generating all these headers. Like you supply one prop, and we render 5. e.g. title would generate not just the <title> but the meta title, twitter title, etc.

Since this is named it seems like we shouldn't be adding/modifying non-meta tags, but there are a couple of exceptions:

Although title isn't technically a meta tag, it certainly is treated like one which is why it was here - I think it still should be there. Perhaps we should rename to SeoTags instead - because that's the real purpose here.

If you wanted more custom control, or the metatags wasn't letting you do something, I would say its just better to use <Head/> so you don't need to learn yet-another-syntax for the same thing.

Rename to <Metadata>, can specify simply `og` to trigger og autocreation, charSet override

…instead

cannikin · 2023-11-01T23:24:38Z

Docs have been updated! I wasn't sure what version this was going to release, and I mentioned "As of Redwood 7.0..." so if it looks like we're going to release sooner than that, let me know and I'll update the version mentioned.

cannikin · 2023-11-01T23:26:03Z

Added a deprecation notice to <MetaTags> in JSDoc as suggested by @Tobbe

__fixtures__/test-project/package.json

dac09 · 2023-11-08T13:39:06Z

I propose keeping the existing functionality as it exists and just add as a whole new concept.

while I like this idea, Tom suggested when we discussed this that we should just make it a breaking, instead of deprecating - so as to not confuse people with these very similarly named components!

docs/docs/seo-head.md

cannikin · 2023-11-08T16:31:13Z

while I like this idea, Tom suggested when we discussed this that we should just make it a breaking, instead of deprecating - so as to not confuse people with these very similarly named components!

He did, but I showed him this solution and he loved it! I believe he was against keeping the name <MetaTags> and then continuing to support the previous props like ogImageUrl in addition to the new props with the nested stuff. Gross!

@cannikin

Rather than trying to only allow certain props and try to transform one to another, we're going to allow you to basically enter anything you want, but with a couple of conventions. I propose keeping the existing `<MetaTags>` functionality as it exists and just add `<Metadata>` as a whole new concept. This allows us to release sooner than 7.0, since it would be non-breaking, and makes it easier for people to upgrade over time rather than all at once: having to change potentially hundreds of existing `<MetaTags>` declarations (across pages and cells) before they can deploy their app again would not be fun. I'll make it clear in the docs that they really want to move to `<Metadata>` once SSR is available in order to get maximum benefit for bots crawling their site. ### Definitions * **Top level prop** means a plain text name like "title" or "description" * **Namespaced prop** means a name with one or more colons, like `og:image` ### Rules #### Any "top level" prop will create a `<meta>` tag with `name` and `content` attributes ```jsx <Metadata description="Lorem ipsum dolar sit amet..." /> // generates <meta name="description" content="Lorem ipsum dolar sit amet..." /> ``` #### You can add child elements which will be appended to any you create as props ```jsx <Metadata description="Lorem ipsum dolar sit amet..."> <meta httpEquiv="refresh" content="30" /> </Metadata> // generates <meta name="description" content="Lorem ipsum dolar sit amet..." /> <meta http-equiv="refresh" content="30" /> ``` #### Any "namespaced" props will create a `<meta>` tag with `property` and `content` attributes ```jsx <Metadata og={{ image:"http://host.test/image.jpg" /> // generates <meta property="og:image" content="http://host.test/image.jpg" /> ``` #### You can create multiple `<meta>` tags with the same name/property, the OpenGraph spec encourages this ```jsx <Metadata og={{ image: ["http://host.test/image1.jpg", "http://host.test/image2.jpg"] /> // generates <meta property="og:image" content="http://host.test/image1.jpg" /> <meta property="og:image" content="http://host.test/image2.jpg" /> ``` #### You can combine values and child namespaces ```jsx <Metadata og={{ image: [ 'http://host.test/image1.jpg', { width: 300, height: 300 }, 'http://host.test/image2.jpg', 'http://host.test/image3.jpg', { height: 1000 }, ], }} /> // generates <meta property="og:image" content="http://host.test/image1.jpg" /> <meta property="og:image:width" content="300" /> <meta property="og:image:height" content="300" /> <meta property="og:image" content="http://host.test/image2.jpg" /> <meta property="og:image" content="http://host.test/image3.jpg" /> <meta property="og:image:height" content="1000" /> ``` #### If you define *any* `og` prop, we will copy any `title` and `description` to an `og:title` and `og:description` tag. ```jsx <Metadata title="My Website" og /> // generates <meta name="title" content="My Website" /> <meta property="og:title" content="My Website" /> ``` You can override this behavior by explicitly setting `og:title` to `null`: ```jsx <Metadata title="My Website" og={{ title: null }}/> ``` #### If you define *any* `og` prop, we will create an `og:type` set to `website`: ```jsx <Metadata og /> // generates <meta property="og:type" content="website" /> ``` You can override this behavior by explicitly setting `og:type`: ```jsx <Metadata og={{ type: 'music:album' }}/> ``` #### If you define a `charSet` prop will we create the special `<meta charSet>` tag: ```jsx <Metadata charSet="utf-8" /> // generates <meta charset="utf-8" /> ``` #### If you define a `locale` prop we will inject the `locale` attribute into the opening `<html>` tag: ```jsx <Metadata locale="en-US" /> // generates <html locale="en-US">  <meta name="locale" content="en-US" /> ``` --- This should allow the `<meta>` generation to be as flexible as possible, allowing you to create twitter, facebook, and any other OpenGraph-like properties in the future: ```jsx <Metadata title="My Website" description="Lorem ipsum dolar sit amet..." charSet="utf-8" locale="en-US" og={{ image: [ 'https://example.com/rock1.jpg', { width: 300, height: 300 }, 'https://example.com/rock2.jpg', { width: 600, height: 600 }, ], }} twitter={{ card: 'summary', site: '@spoke', creator: '@cannikin', }} fb={{ app_id: '1234567890', }} /> ``` ## Note for releasing There’s a comment in the doc about “Prior to v7.0 Redwood provided a `<MetaTags>` helper that has now been deprecated…” so if this goes in earlier than 7 we’ll want to update that text. --------- Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com> Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>

gcallsen · 2023-12-22T14:10:21Z

Thank you, all! Minor typo in Docs (https://redwoodjs.com/docs/canary/seo-head#setting-meta-tags-and-opengraph-directives-with-metadata) --> The example code shows import { MetaTags } from '@redwoodjs/web' instead of intended import { Metadata } from '@redwoodjs/web'

Tobbe · 2023-12-22T14:16:30Z

@gcallsen Thanks for reporting! PR here: #9744

Allow any key/value pairs for MetaTags, add tests

28b4145

cannikin added topic/web release:breaking This PR is a breaking change labels Oct 18, 2023

cannikin added this to the v7.0.0 milestone Oct 18, 2023

cannikin added 4 commits October 19, 2023 11:54

Auto-add og:title, og:description and og:tag

ee2d80a

Remove unused imports

dcb6ff1

Make sure to render the head in the first test

cf4a227

Rewrite tags for simplier input/output comparison

414fe53

cannikin changed the title ~~Update <MetaTags> for proper OpenGraph generation and consistency~~ Update <MetaTags> (now <Metadata>) for proper OpenGraph generation and consistency Oct 25, 2023

cannikin added 8 commits October 25, 2023 11:41

Refactor based on Tuesday meeting:

0afcb56

Rename to <Metadata>, can specify simply `og` to trigger og autocreation, charSet override

Replaces <MetaTags> in generators to <Metadata>

6203a49

Merge branch 'main' into rc-meta-tags

bcb81c4

Update <MetaTags> call in text project

4a40aff

Fix types

a2e00ab

Bunch of test fixtures updated to use <Metadata>

52aefe4

Updates text project creation to use <Metadata>

a642657

Rebuild test fixture

0fb1aa2

cannikin added release:feature This PR introduces a new feature and removed release:breaking This PR is a breaking change labels Oct 25, 2023

cannikin changed the title ~~Update <MetaTags> (now <Metadata>) for proper OpenGraph generation and consistency~~ Adds new <Metadata> component for proper <meta> tag generation Oct 25, 2023

cannikin added 2 commits October 26, 2023 15:01

Brings back original MetaTags file

e7b7d72

Merge branch 'main' into rc-meta-tags

703528d

cannikin marked this pull request as ready for review October 30, 2023 20:58

cannikin requested a review from dac09 October 30, 2023 20:58

cannikin added 4 commits October 31, 2023 09:38

TS updates, thanks @dac09!

91fa352

Remove hack for environment check for test, set ENV var in test file …

b430bec

…instead

Merge branch 'main' into rc-meta-tags

816efa6

Update docs for <Metadata>

b37cbd8

Adds deprecation warning in JSDoc

d587524

cannikin added 5 commits November 1, 2023 16:26

Merge branch 'main' into rc-meta-tags

2ac544f

Make sure to generate og tags for smoke test

c6520f0

Rebuild test fixture

f559ccb

Get rid of React.Fragment for Helmet, switch to React.cloneElement

983702b

Merge branch 'main' into rc-meta-tags

d164627

dac09 reviewed Nov 8, 2023

View reviewed changes

__fixtures__/test-project/package.json Outdated Show resolved Hide resolved

dac09 reviewed Nov 8, 2023

View reviewed changes

docs/docs/seo-head.md Show resolved Hide resolved

cannikin and others added 4 commits November 8, 2023 08:31

Merge branch 'main' into rc-meta-tags

b0afc59

Merge branch 'main' into rc-meta-tags

843ad2c

Merge branch 'main' into rc-meta-tags

f061c8c

Add note about plain <meta> tags

97e3e43

Tobbe modified the milestones: SSR, v7.0.0 Dec 19, 2023

Merge branch 'main' into rc-meta-tags

d981e4e

jtoar modified the milestones: v7.0.0, next-release Dec 19, 2023

jtoar merged commit 8ecec88 into main Dec 19, 2023
33 checks passed

jtoar deleted the rc-meta-tags branch December 19, 2023 19:39

Tobbe modified the milestones: next-release, v6.6.0 Dec 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds new <Metadata> component for proper <meta> tag generation #9315

Adds new <Metadata> component for proper <meta> tag generation #9315

cannikin commented Oct 18, 2023 •

edited by Tobbe

Loading

dac09 commented Oct 19, 2023

cannikin commented Nov 1, 2023

cannikin commented Nov 1, 2023

dac09 commented Nov 8, 2023

cannikin commented Nov 8, 2023 •

edited

Loading

gcallsen commented Dec 22, 2023

Tobbe commented Dec 22, 2023

Adds new <Metadata> component for proper <meta> tag generation #9315

Adds new <Metadata> component for proper <meta> tag generation #9315

Conversation

cannikin commented Oct 18, 2023 • edited by Tobbe Loading

Definitions

Rules

Any "top level" prop will create a <meta> tag with name and content attributes

You can add child elements which will be appended to any you create as props

Any "namespaced" props will create a <meta> tag with property and content attributes

You can create multiple <meta> tags with the same name/property, the OpenGraph spec encourages this

You can combine values and child namespaces

If you define any og prop, we will copy any title and description to an og:title and og:description tag.

If you define any og prop, we will create an og:type set to website:

If you define a charSet prop will we create the special <meta charSet> tag:

If you define a locale prop we will inject the locale attribute into the opening <html> tag:

Note for releasing

dac09 commented Oct 19, 2023

cannikin commented Nov 1, 2023

cannikin commented Nov 1, 2023

dac09 commented Nov 8, 2023

cannikin commented Nov 8, 2023 • edited Loading

gcallsen commented Dec 22, 2023

Tobbe commented Dec 22, 2023

cannikin commented Oct 18, 2023 •

edited by Tobbe

Loading

Any "top level" prop will create a `<meta>` tag with `name` and `content` attributes

Any "namespaced" props will create a `<meta>` tag with `property` and `content` attributes

You can create multiple `<meta>` tags with the same name/property, the OpenGraph spec encourages this

If you define any `og` prop, we will copy any `title` and `description` to an `og:title` and `og:description` tag.

If you define any `og` prop, we will create an `og:type` set to `website`:

If you define a `charSet` prop will we create the special `<meta charSet>` tag:

If you define a `locale` prop we will inject the `locale` attribute into the opening `<html>` tag:

cannikin commented Nov 8, 2023 •

edited

Loading