From f335f0c59e935770404a8844e37900308570ece4 Mon Sep 17 00:00:00 2001
From: Aleksandr Filatov <greybax@gmail.com>
Date: Tue, 23 Oct 2018 15:04:44 -0700
Subject: [PATCH] update open graph meta tags attributes from name to property
 (#9302)

Fix for issue #9288
Replaced "name=og:<some-name>" -> "property=og<some-name>."
---
 .../src/components/HelmetBlock/index.js            | 14 +++++++-------
 .../gatsby-plugin-offline/src/__tests__/index.html |  4 ++--
 www/src/components/layout.js                       |  4 ++--
 www/src/components/package-readme.js               |  6 +++---
 www/src/components/showcase-details.js             |  2 +-
 www/src/templates/template-blog-post.js            |  8 ++++----
 www/src/templates/template-docs-markdown.js        |  6 +++---
 www/src/templates/template-starter-page.js         | 10 ++++++----
 www/src/views/starter-library/index.js             |  6 +++---
 9 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/examples/using-javascript-transforms/src/components/HelmetBlock/index.js b/examples/using-javascript-transforms/src/components/HelmetBlock/index.js
index 454acbf6e71b0..9a56311210173 100644
--- a/examples/using-javascript-transforms/src/components/HelmetBlock/index.js
+++ b/examples/using-javascript-transforms/src/components/HelmetBlock/index.js
@@ -11,21 +11,21 @@ class HelmetBlock extends React.Component {
           <title>{frontmatter.title}</title>
           <meta name="description" content={frontmatter.description} />
           <meta
-            name="og:url"
+            property="og:url"
             content={`https://www.jacobbolda.com/${frontmatter.path}`}
           />
-          <meta name="og:description" content={frontmatter.description} />
-          <meta name="og:type" content="article" />
-          <meta name="og:article:author" content="Jacob Bolda" />
+          <meta property="og:description" content={frontmatter.description} />
+          <meta property="og:type" content="article" />
+          <meta property="og:article:author" content="Jacob Bolda" />
           <meta
-            name="og:article:published_time"
+            property="og:article:published_time"
             content={moment(frontmatter.written, `YYYY-MM-DD`)}
           />
           <meta
-            name="og:article:modified_time"
+            property="og:article:modified_time"
             content={moment(frontmatter.updated, `YYYY-MM-DD`)}
           />
-          <meta name="og:article:tag" content={frontmatter.category} />
+          <meta property="og:article:tag" content={frontmatter.category} />
           <meta name="twitter:label1" content="Category" />
           <meta name="twitter:data1" content={frontmatter.category} />
           <meta name="twitter:label2" content="Written" />
diff --git a/packages/gatsby-plugin-offline/src/__tests__/index.html b/packages/gatsby-plugin-offline/src/__tests__/index.html
index aabb3acfbe765..92008860fd653 100644
--- a/packages/gatsby-plugin-offline/src/__tests__/index.html
+++ b/packages/gatsby-plugin-offline/src/__tests__/index.html
@@ -56,8 +56,8 @@
     <title data-react-helmet="true">Home | Gatsby Inc.</title>
     <meta data-react-helmet="true" name="keywords" content="gatsby, javascript, react, graphql, fast">
     <meta data-react-helmet="true" name="twitter:site" content="@gatsbyjs">
-    <meta data-react-helmet="true" name="og:type" content="website">
-    <meta data-react-helmet="true" name="og:site_name" content="Gatsby Inc.">
+    <meta data-react-helmet="true" property="og:type" content="website">
+    <meta data-react-helmet="true" property="og:site_name" content="Gatsby Inc.">
     <meta data-react-helmet="true" name="description" content="Modern Development, for the Content Web">
     <meta data-react-helmet="true" name="image" content="https://www.gatsbyjs.com/gatsby.jpg">
     <meta data-react-helmet="true" property="og:url" content="https://www.gatsbyjs.com/">
diff --git a/www/src/components/layout.js b/www/src/components/layout.js
index ba62c54587344..9a50e76b3ec4c 100644
--- a/www/src/components/layout.js
+++ b/www/src/components/layout.js
@@ -149,8 +149,8 @@ class DefaultLayout extends React.Component {
       <div className={isHomepage ? `is-homepage` : ``}>
         <Helmet defaultTitle={`GatsbyJS`} titleTemplate={`%s | GatsbyJS`}>
           <meta name="twitter:site" content="@gatsbyjs" />
-          <meta name="og:type" content="website" />
-          <meta name="og:site_name" content="GatsbyJS" />
+          <meta property="og:type" content="website" />
+          <meta property="og:site_name" content="GatsbyJS" />
           <meta name="docsearch:version" content="2.0" />
           <link
             rel="canonical"
diff --git a/www/src/components/package-readme.js b/www/src/components/package-readme.js
index e7a4c64944f37..f8d925ea70f3c 100644
--- a/www/src/components/package-readme.js
+++ b/www/src/components/package-readme.js
@@ -24,10 +24,10 @@ class PackageReadMe extends React.Component {
         <Helmet>
           <title>{packageName}</title>
           <meta name="description" content={excerpt} />
-          <meta name="og:description" content={excerpt} />
+          <meta property="og:description" content={excerpt} />
           <meta name="twitter:description" content={excerpt} />
-          <meta name="og:title" content={packageName} />
-          <meta name="og:type" content="article" />
+          <meta property="og:title" content={packageName} />
+          <meta property="og:type" content="article" />
           <meta name="twitter.label1" content="Reading time" />
           <meta name="twitter:data1" content={`${timeToRead} min read`} />
         </Helmet>
diff --git a/www/src/components/showcase-details.js b/www/src/components/showcase-details.js
index 9e5e00f5f60d4..e3909e42bfd87 100644
--- a/www/src/components/showcase-details.js
+++ b/www/src/components/showcase-details.js
@@ -263,7 +263,7 @@ const ShowcaseDetails = ({ parent, data, isModal, categories }) => (
               <Helmet>
                 <title>{data.sitesYaml.title}</title>
                 <meta
-                  name="og:image"
+                  property="og:image"
                   content={`https://www.gatsbyjs.org${
                     data.sitesYaml.childScreenshot.screenshotFile
                       .childImageSharp.resize.src
diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js
index 12f3098568165..85c6a0f119d45 100644
--- a/www/src/templates/template-blog-post.js
+++ b/www/src/templates/template-blog-post.js
@@ -90,12 +90,12 @@ class BlogPostTemplate extends React.Component {
                 }
               />
 
-              <meta name="og:description" content={post.excerpt} />
+              <meta property="og:description" content={post.excerpt} />
               <meta name="twitter:description" content={post.excerpt} />
-              <meta name="og:title" content={post.frontmatter.title} />
+              <meta property="og:title" content={post.frontmatter.title} />
               {post.frontmatter.image && (
                 <meta
-                  name="og:image"
+                  property="og:image"
                   content={`https://gatsbyjs.org${
                     post.frontmatter.image.childImageSharp.resize.src
                   }`}
@@ -109,7 +109,7 @@ class BlogPostTemplate extends React.Component {
                   }`}
                 />
               )}
-              <meta name="og:type" content="article" />
+              <meta property="og:type" content="article" />
               <meta
                 name="article:author"
                 content={post.frontmatter.author.id}
diff --git a/www/src/templates/template-docs-markdown.js b/www/src/templates/template-docs-markdown.js
index d11f35f5db0a5..078283770e619 100644
--- a/www/src/templates/template-docs-markdown.js
+++ b/www/src/templates/template-docs-markdown.js
@@ -68,10 +68,10 @@ class DocsTemplate extends React.Component {
         <Helmet>
           <title>{page.frontmatter.title}</title>
           <meta name="description" content={page.excerpt} />
-          <meta name="og:description" content={page.excerpt} />
+          <meta property="og:description" content={page.excerpt} />
+          <meta property="og:title" content={page.frontmatter.title} />
+          <meta property="og:type" content="article" />
           <meta name="twitter:description" content={page.excerpt} />
-          <meta name="og:title" content={page.frontmatter.title} />
-          <meta name="og:type" content="article" />
           <meta name="twitter.label1" content="Reading time" />
           <meta name="twitter:data1" content={`${page.timeToRead} min read`} />
         </Helmet>
diff --git a/www/src/templates/template-starter-page.js b/www/src/templates/template-starter-page.js
index 5468a893a0fea..def25d4ddfc55 100644
--- a/www/src/templates/template-starter-page.js
+++ b/www/src/templates/template-starter-page.js
@@ -60,9 +60,10 @@ class StarterTemplate extends React.Component {
             <Helmet>
               <title>{`${repoName}: Gatsby Starter`}</title>
               <meta
-                name="og:image"
+                property="og:image"
                 content={screenshotFile.childImageSharp.fluid.src}
               />
+              <meta property="og:image:alt" content="Gatsby Logo" />
               <meta
                 name="twitter:image"
                 content={screenshotFile.childImageSharp.fluid.src}
@@ -72,15 +73,16 @@ class StarterTemplate extends React.Component {
                 content={`Gatsby Starter: ${repoName}`}
               />
               <meta
-                name="og:description"
+                property="og:description"
                 content={`Gatsby Starter: ${repoName}`}
               />
               <meta
                 name="twitter:description"
                 content={`Gatsby Starter: ${repoName}`}
               />
-              <meta name="og:title" content={repoName} />
-              <meta name="og:type" content="article" />
+              <meta property="og:site_name" content={repoName} />
+              <meta property="og:title" content={repoName} />
+              <meta property="og:type" content="article" />
               <meta name="twitter.label1" content="Reading time" />
               <meta name="twitter:data1" content={`1 min read`} />
             </Helmet>
diff --git a/www/src/views/starter-library/index.js b/www/src/views/starter-library/index.js
index 26008277d31c3..40d449dce9ece 100644
--- a/www/src/views/starter-library/index.js
+++ b/www/src/views/starter-library/index.js
@@ -27,15 +27,15 @@ class StarterLibraryPage extends Component {
             content={`Gatsby Starters: ${filtersApplied}`}
           />
           <meta
-            name="og:description"
+            property="og:description"
             content={`Gatsby Starters: ${filtersApplied}`}
           />
           <meta
             name="twitter:description"
             content={`Gatsby Starters: ${filtersApplied}`}
           />
-          <meta name="og:title" content={filtersApplied} />
-          <meta name="og:type" content="article" />
+          <meta property="og:title" content={filtersApplied} />
+          <meta property="og:type" content="article" />
           <meta name="twitter.label1" content="Reading time" />
           <meta name="twitter:data1" content={`1 min read`} />
         </Helmet>