update open graph meta tags attributes from name to property (#9302)

Fix for issue #9288 Replaced "name=og:<some-name>" -> "property=og<some-name>."
gatsbyjs · Oct 23, 2018 · f335f0c · f335f0c
1 parent a9796aa
commit f335f0c
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>