refactor(www): Create PageMetadata component #21815

tesseralis · 2020-02-28T05:07:23Z

Description

Create an abstraction over the raw <Helmet> component to consolidate common metadata.

TODO:

Test that everything makes sense and it actually works
~~Add more/standardize more descriptions and information~~
- I'll make another issue for this

Motivation

Deduplicate common metadata used between Facebook, Twitter, and other crawlers.
Deduplicate text in metadata that needs to be translated.

Build

https://build-5fdd9a37-e2ae-4a55-a681-3bea24c30edb.gtsb.io/

Related Issues

fixes: #21562

Abstract over the raw <Helmet> component to consolidate common descriptions.

tesseralis

We can possibly change some stuff around and add in missing properties that should be here.

Another important omission is the og:img:alt tag:

og:image:alt - A description of what is in the image (not a caption). If the page specifies an og:image it should specify og:image:alt.

The blog pages have an imageTitle in their frontmatter but I'm not sure what's the proper tag for other docs. We can also table it for a different PR.

tesseralis · 2020-02-28T05:10:46Z

www/src/templates/template-blog-post.js

+ description={post.fields.excerpt}
+ image={post.frontmatter.image.childImageSharp.resize}
+ >
+ <meta property="og:url" content={href} />


TODO: Fix #21563 in this PR and get rid of this.

tesseralis · 2020-02-28T05:11:36Z

www/src/templates/template-creator-details.js

- <Helmet>
- <title>{`${creator.name} - Creator`}</title>
- </Helmet>
+ <PageMetadata title={`${creator.name} - Creator`} />


We could possibly add a description and image to this page if we'd like.

tesseralis · 2020-02-28T05:12:51Z

www/src/templates/template-starter-page.js

+ title={`${repoName}: Gatsby Starter`}
+ image={screenshot.childImageSharp.fluid}
+ description={`Gatsby Starters: ${repoName}`}
+ timeToRead={1}


Are the hardcoded "timeToRead" labels in pages like this useful? We may as well get rid of them.

Actually... I'm trying to find information on reading time but I can't seem to find anything. Was this a feature that was taken out at some point?

I've found information on twitter:label1 only on third-party sites and it seems like it's been removed from the official twitter developer docs. Playing around with the validator doesn't show our time to read in any of our docs.

twitter:label1 is used in e.g. Slack for richer preview

So for Slack twitter:label1 and twitter:label2 are valid and were added for this reason.

As for your first question: I wouldn't say they are useful for starters and would switch the information for something like e.g. author or GitHub link.

well that's not intuitive at all. I'm adding a comment :P

I think switching the information is a good idea, but I'll leave that for a separate PR for now.

muescha · 2020-03-03T11:03:34Z

twitter:image and twitter:description is not anymore in PageMetadata?

tesseralis · 2020-03-03T17:20:27Z

@muescha According to the Twitter documentation:

When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property.

So we don't actually need these Twitter descriptions to generate a card (I think). You can verify this behavior by testing the build above with the Twitter card validator.

muescha · 2020-03-03T23:16:27Z

build-5fdd9a37-e2ae-4a55-a681-3bea24c30edb.gtsb.io

is this still the current build with all new commits?

muescha · 2020-03-03T23:26:50Z

www/src/components/layout.js

@@ -20,7 +20,7 @@ export default function DefaultLayout({ location, locale, children }) {
 return (
 <LocaleContext.Provider value={locale || defaultLang}>
 <Global styles={globalStyles} />
- <SiteMetadata pathname={location.pathname} locale={locale} />
+ <SiteMetadata href={location.href} locale={locale} />


when the link build-5fdd9a37-e2ae-4a55-a681-3bea24c30edb.gtsb.io is the current link to the build system,

then location.href is not available at SSR:

Check:

curl https://build-5fdd9a37-e2ae-4a55-a681-3bea24c30edb.gtsb.io/showcase/reactjs.org | grep "canonical" | less

results in:

<link data-react-helmet="true" rel="canonical"/> <meta data-react-helmet="true" name="docsearch:version" content="2.0"/> <meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"/> <meta data-react-helmet="true" property="og:url"/>

while

curl https://www.gatsbyjs.org/showcase/reactjs.org | grep "canonical" | less

<link data-react-helmet="true" rel="canonical" href="https://www.gatsbyjs.org/showcase/reactjs.org"/> <meta data-react-helmet="true" name="docsearch:version" content="2.0"/> <meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"/> <meta data-react-helmet="true" property="og:url" content="https://www.gatsbyjs.org"/>

Thanks for the tip! I'll change it back to using pathname. I didn't know that.

but check it before with a current build

i remember there was that problem, but unfortunly i can not find some issues or some docs (troubleshooting) about this ..

added issue:

docs: add info about location.href

thanks for the link to the blog post in code comments :)

# Conflicts: # www/src/templates/template-blog-post.js

# Conflicts: # www/package.json

AishaBlake

There's so much going on in the head of these pages, I wasn't immediately sure that everything was where it needed to be but it's looking solid!

AishaBlake · 2020-05-01T09:11:46Z

Thanks for this (especially the tests), @tesseralis!

Create PageMetadata component

2aa7a5e

Abstract over the raw <Helmet> component to consolidate common descriptions.

tesseralis requested a review from a team as a code owner February 28, 2020 05:07

tesseralis commented Feb 28, 2020

View reviewed changes

tesseralis and others added 11 commits February 27, 2020 21:20

fix image content

801da34

fix og:url I think

a0ac034

fix starter page test

1672ff2

fix rendering

4c9f677

Merge branch 'master' into page-metadata

524220a

Merge branch 'master' into page-metadata

821be01

no helmet

7910199

add comment about slack

70e0e64

fixes

d2b6109

no fragments, no react import

3c14950

update test

980d560

tesseralis mentioned this pull request Mar 2, 2020

Page metadata improvments #21910

Closed

tesseralis added 3 commits March 2, 2020 11:07

get rid of TODO

e657253

get rid of helmet link

64c085d

more helmet stuff

31267a1

tesseralis requested a review from LekoArts March 2, 2020 19:28

tesseralis added 4 commits March 3, 2020 13:47

Merge branch 'master' into page-metadata

e6bc1e9

WIP add test for page-metadata

3cac18e

fix test

d69506f

remove stuff

291d2bc

muescha reviewed Mar 3, 2020

View reviewed changes

tesseralis added 3 commits March 3, 2020 15:27

manually use article

435b320

add time to read for blog

0ca0e94

reorg, add more stuff

3ea59e5

tesseralis added 3 commits March 30, 2020 16:16

add test

ae4c408

fix test

22da3ff

Merge branch 'master' into page-metadata

16806b9

# Conflicts: # www/src/templates/template-blog-post.js

tesseralis requested review from a team as code owners April 15, 2020 22:09

vladar added the topic: website label Apr 16, 2020

Merge branch 'master' into page-metadata

9502a5a

tesseralis force-pushed the page-metadata branch from d9594ae to 9502a5a Compare April 23, 2020 00:48

tesseralis added 6 commits April 22, 2020 17:51

revert docs

3e16116

revert packages

451a673

revert rest of files

189a27d

re-delete newsletter

d8e46fc

update react-helmet

df62359

update gatsby plugin

1a57690

tesseralis mentioned this pull request Apr 24, 2020

chore(www): use canonical in og-url when available #21856

Closed

tesseralis added 2 commits April 29, 2020 14:13

Merge branch 'master' into page-metadata

ce1d755

# Conflicts: # www/package.json

template blog post

5ef12b1

tesseralis removed request for a team and LekoArts April 29, 2020 23:44

tesseralis added 4 commits April 29, 2020 16:46

Merge branch 'master' into page-metadata

0f9d180

fix tests

49ffa8c

Add more documentation about page metadata

a9b211d

re-import markdown page footer

9cf76cf

AishaBlake approved these changes May 1, 2020

View reviewed changes

AishaBlake merged commit 368da15 into master May 1, 2020

delete-merged-branch bot deleted the page-metadata branch May 1, 2020 09:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(www): Create PageMetadata component #21815

refactor(www): Create PageMetadata component #21815

tesseralis commented Feb 28, 2020 •

edited

Loading

tesseralis left a comment

tesseralis Feb 28, 2020

tesseralis Feb 28, 2020

tesseralis Feb 28, 2020

tesseralis Feb 28, 2020

tesseralis Feb 28, 2020

This comment was marked as off-topic.

LekoArts Feb 28, 2020

LekoArts Feb 28, 2020

tesseralis Feb 28, 2020

tesseralis Mar 2, 2020

muescha commented Mar 3, 2020

tesseralis commented Mar 3, 2020

muescha commented Mar 3, 2020

muescha Mar 3, 2020 •

edited

Loading

tesseralis Mar 3, 2020

muescha Mar 4, 2020

muescha Mar 4, 2020

AishaBlake left a comment

AishaBlake commented May 1, 2020

refactor(www): Create PageMetadata component #21815

refactor(www): Create PageMetadata component #21815

Conversation

tesseralis commented Feb 28, 2020 • edited Loading

Description

Motivation

Build

Related Issues

tesseralis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as off-topic.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

muescha commented Mar 3, 2020

tesseralis commented Mar 3, 2020

muescha commented Mar 3, 2020

muescha Mar 3, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AishaBlake left a comment

Choose a reason for hiding this comment

AishaBlake commented May 1, 2020

tesseralis commented Feb 28, 2020 •

edited

Loading

muescha Mar 3, 2020 •

edited

Loading