feat(starters): add meta description for SEO and Open Graph to Gatsby…

… Starter Blog (gatsbyjs#11936)

Minor additions to allow for optional custom meta description front matter field for SEO and Open Graph purposes; plus demo.

Changes proposed:

- Add `description` to `frontmatter` query in `src/pages/index.js` and `src/templates/blog-post.js` 
- Add short-circuit evaluation for `frontmatter.description` in `posts` mapping (`index.js`) and SEO component (`blog-post.js`)
- Add `description` field to `hi-folks/index.md` to demonstrate use

starters/blog/content/blog/hi-folks/index.md

@@ -1,6 +1,7 @@
 ---
 title: New Beginnings
 date: "2015-05-28T22:40:32.169Z"
+description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.
 ---
 
 Far far away, behind the word mountains, far from the countries Vokalia and

starters/blog/src/pages/index.js

@@ -33,7 +33,11 @@ class BlogIndex extends React.Component {
                 </Link>
               </h3>
               <small>{node.frontmatter.date}</small>
-              <p dangerouslySetInnerHTML={{ __html: node.excerpt }} />
+              <p
+                dangerouslySetInnerHTML={{
+                  __html: node.frontmatter.description || node.excerpt,
+                }}
+              />
             </div>
           )
         })}
@@ -61,6 +65,7 @@ export const pageQuery = graphql`
           frontmatter {
             date(formatString: "MMMM DD, YYYY")
             title
+            description
           }
         }
       }

starters/blog/src/templates/blog-post.js

@@ -14,7 +14,10 @@ class BlogPostTemplate extends React.Component {
 
     return (
       <Layout location={this.props.location} title={siteTitle}>
-        <SEO title={post.frontmatter.title} description={post.excerpt} />
+        <SEO
+          title={post.frontmatter.title}
+          description={post.frontmatter.description || post.excerpt}
+        />
         <h1>{post.frontmatter.title}</h1>
         <p
           style={{
@@ -80,6 +83,7 @@ export const pageQuery = graphql`
       frontmatter {
         title
         date(formatString: "MMMM DD, YYYY")
+        description
       }
     }
   }