Finish dynamic meta tags for Play components

Joao-Santos-00 · Apr 20, 2022 · d8d7085 · d8d7085
1 parent 9a69f82
commit d8d7085
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,22 +10,23 @@
  name="description"
  content="ReactPlay is an open-source application to learn, create and
  share ReactJS projects with the developer community."
+ data-react-helmet="true" 
  />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="ReactPlay" />
  <meta property="og:description" content="ReactPlay is an open-source application to learn, create and
- share ReactJS projects with the developer community." />
- <meta property="og:title" content="ReactPlay - One app to learn, create, and share ReactJS projects." />
+ share ReactJS projects with the developer community." data-react-helmet="true" />
+ <meta property="og:title" content="ReactPlay - One app to learn, create, and share ReactJS projects." data-react-helmet="true" />
  <meta property="og:image" content="%PUBLIC_URL%/og-image.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="400" />
  <meta property="og:image:height" content="300" />
  <meta property="og:image:alt" content="Start React Code Arena with ReactPlay" />
  <meta name="twitter:card" content="summary_large_image" />
- <meta name="twitter:site" content="@ReactPlayIO" />
- <meta name="twitter:title" content="ReactPlay - One app to learn, create, and share ReactJS projects." />
+ <meta name="twitter:site" content="@ReactPlayIO" data-react-helmet="true" />
+ <meta name="twitter:title" content="ReactPlay - One app to learn, create, and share ReactJS projects." data-react-helmet="true" />
  <meta name="twitter:description" content="ReactPlay is an open-source application to learn, create and
- share ReactJS projects with the developer community." />
+ share ReactJS projects with the developer community." data-react-helmet="true" />
  <meta name="twitter:image" content="%PUBLIC_URL%/og-image.png" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/og-image.png" />
 

diff --git a/src/common/playlists/PlayMeta.jsx b/src/common/playlists/PlayMeta.jsx
@@ -11,7 +11,9 @@ function PlayMeta({ id, name, description, cover, component }) {
  return (
  <>
  <Helmet>
- <title>{name}</title>
+ <meta name="description" content={description} />
+ <meta property="og:title" content={name} />
+ <meta property="og:description" content={description} />
  </Helmet>
  {cloneElement(component(), { id })}
  </>