diff --git a/docs/docs/glossary/server-side-rendering.md b/docs/docs/glossary/server-side-rendering.md
index abd479032702b..7fd222c10d7a5 100644
--- a/docs/docs/glossary/server-side-rendering.md
+++ b/docs/docs/glossary/server-side-rendering.md
@@ -44,6 +44,6 @@ Instead of purely server-side rendering, Gatsby uses the same APIs to create sta
 
 - [Why server-side render?](/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/#why-server-side-render) from _Behind the Scenes: What makes Gatsby Great_
 
-- [Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby](/tutorial/seo-and-social-sharing-cards-tutorial/#reach-skip-nav)
+- [Adding an SEO Component](/docs/how-to/adding-common-features/adding-seo-component/)
 
 - [What is a Static Site Generator?](/docs/glossary/static-site-generator/#what-is-a-static-site-generator) from the Gatsby docs
diff --git a/docs/docs/tutorial/part-2/index.mdx b/docs/docs/tutorial/part-2/index.mdx
index bcd2efd878fb2..bdd5fcbb43cdb 100644
--- a/docs/docs/tutorial/part-2/index.mdx
+++ b/docs/docs/tutorial/part-2/index.mdx
@@ -15,6 +15,7 @@ To build out the basic page structure for your blog site, you'll need to know ab
 By the end of this part of the Tutorial, you will be able to:
 
 * Create **page components** to add new pages to your site.
+* Add a title to your site using the **Gatsby Head API**
 * Import and use a **pre-built component** from another package.
 * Create your own **reusable "building block" component**.
 * Use component **props** to change the way a component renders.
@@ -24,7 +25,7 @@ By the end of this part of the Tutorial, you will be able to:
 
 **Prefer a video?**
 
-If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 2.
+If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 2. **Please note:** At the time of recording the Gatsby Head API didn't exist yet and thus the video contents and text contents are different. Please always follow the written instructions. We'll do our best to record a new version in the future, thanks for understanding!
 
 Don't want to miss any future livestreams? Follow our [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
 
@@ -183,13 +184,15 @@ import * as React from 'react'
 const IndexPage = () => {
   return (
     <main>
-      <title>Home Page</title>
       <h1>Welcome to my Gatsby site!</h1>
       <p>I'm making this by following the Gatsby Tutorial.</p>
     </main>
   )
 }
 
+// You'll learn about this in the next task, just copy it for now
+export const Head = () => <title>Home Page</title>
+
 // Step 3: Export your component
 export default IndexPage
 ```
@@ -222,7 +225,6 @@ import * as React from 'react'
 const AboutPage = () => {
   return (
     <main>
-      <title>About Me</title>
       <h1>About Me</h1>
       <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
     </main>
@@ -233,9 +235,52 @@ const AboutPage = () => {
 export default AboutPage
 ```
 
-2. In a web browser, visit `localhost:8000/about`. When your development server finishes rebuilding your site, the About page should look something like this:
+2. Add a page title to your page. Gatsby lets you define a `<title>` and other [document metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) with the [Gatsby Head API](/docs/reference/built-in-components/gatsby-head/). You have to export a component called `Head` from your page template to apply the metadata.
+Adding such metadata helps search engines like Google to better understand your site. For this tutorial you'll only be adding titles to pages but you can also later add other metadata.
+
+```js:title=src/pages/about.js
+import * as React from 'react'
+
+const AboutPage = () => {
+  return (
+    <main>
+      <h1>About Me</h1>
+      <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
+    </main>
+  )
+}
 
-![A screenshot of "localhost:8000/about" in a web browser. It has a heading that says, "About Me", and a paragraph that says, "Hi there! I'm the proud creator of this site, which I built with Gatsby."](./about-page.png)
+// highlight-next-line
+export const Head = () => <title>About Me<title/>
+
+export default AboutPage
+```
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Key Gatsby Concept** 💡
+
+You can use the [Gatsby Head API](/docs/reference/built-in-components/gatsby-head/) by exporting a named function called `Head` in your pages and page templates (e.g. the ones used by `createPage` or the File System Route API).
+
+Be sure to capitalize `Head` and please note that exporting this named function inside a component like `Layout` won't add the metadata to the `<head>`. The above works because you're exporting `Head` in a page inside `src/pages`.
+
+You can add any valid `<head>` tags inside the function and they'll be added to the page, for example:
+
+```js
+export const Head = () => (
+  <>
+    <title>About Me<title/>
+    <meta name="description" content="Your description" />
+  </>
+)
+```
+
+After going through this tutorial, be sure to check out [Adding an SEO Component](/docs/how-to/adding-common-features/adding-seo-component/).
+
+</Announcement>
+
+3. In a web browser, visit `localhost:8000/about`. When your development server finishes rebuilding your site, the About page should look something like this:
+
+![A screenshot of "localhost:8000/about" in a web browser. It has a heading and page title that says, "About Me", and a paragraph that says, "Hi there! I'm the proud creator of this site, which I built with Gatsby."](./about-page.png)
 
 <Announcement style={{marginBottom: "1.5rem"}}>
 
@@ -343,7 +388,6 @@ import { Link } from 'gatsby'
 const IndexPage = () => {
   return (
     <main>
-      <title>Home Page</title>
       <h1>Welcome to my Gatsby site!</h1>
       {/* highlight-next-line */}
       <Link to="/about">About</Link>
@@ -352,6 +396,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 
@@ -365,7 +411,6 @@ import { Link } from 'gatsby' // highlight-line
 const AboutPage = () => {
   return (
     <main>
-      <title>About Me</title>
       <h1>About Me</h1>
       {/* highlight-next-line */}
       <Link to="/">Back to Home</Link>
@@ -374,6 +419,8 @@ const AboutPage = () => {
   )
 }
 
+export const Head = () => <title>About Me</title>
+
 export default AboutPage
 ```
 
@@ -469,7 +516,7 @@ In the browser, the actual DOM elements will look something like this:
 
 Follow the steps below to create a `Layout` component and add it to your Home and About pages.
 
-1. Create a new file called `src/components/layout.js`. Insert the following code to define your `Layout` component. This component will render a dynamic page title and heading (from the `pageTitle` prop), a list of navigation links, and the contents passed in with the `children` prop. To improve accessibility, there's also a `<main>` element wrapping the page-specific elements (the `<h1>` heading and the contents from `children`).
+1. Create a new file called `src/components/layout.js`. Insert the following code to define your `Layout` component. This component will render a dynamic heading (from the `pageTitle` prop), a list of navigation links, and the contents passed in with the `children` prop. To improve accessibility, there's also a `<main>` element wrapping the page-specific elements (the `<h1>` heading and the contents from `children`).
 
 ```js:title=src/components/layout.js
 import * as React from 'react'
@@ -478,7 +525,6 @@ import { Link } from 'gatsby'
 const Layout = ({ pageTitle, children }) => {
   return (
     <div>
-      <title>{pageTitle}</title>
       <nav>
         <ul>
           <li><Link to="/">Home</Link></li>
@@ -546,6 +592,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 
@@ -565,6 +613,8 @@ const AboutPage = () => {
   )
 }
 
+export const Head = () => <title>About Me</title>
+
 export default AboutPage
 ```
 
@@ -643,7 +693,6 @@ import { container } from './layout.module.css' // highlight-line
 const Layout = ({ pageTitle, children }) => {
   return (
     <div className={container}> // highlight-line
-      <title>{pageTitle}</title>
       <nav>
         <ul>
           <li><Link to="/">Home</Link></li>
@@ -721,7 +770,6 @@ import {
 const Layout = ({ pageTitle, children }) => {
   return (
     <div className={container}>
-      <title>{pageTitle}</title>
       <nav>
         <ul className={navLinks}> // highlight-line
           <li className={navLinkItem}> // highlight-line
@@ -761,7 +809,7 @@ Luckily, when you use CSS Modules with Gatsby, you can have both! Your kebab-cas
 
 <Announcement style={{marginBottom: "1.5rem"}}>
 
-**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example).
+**Want to see how it all fits together?** Check out the finished state of the [GitHub repo for the example site](https://github.com/gatsbyjs/tutorial-example).
 
 </Announcement>
 
@@ -773,6 +821,7 @@ Take a moment to think back on what you've learned so far. Challenge yourself to
 
 * What's the difference between a page component and a building-block component?
 * How do you add a new page to your Gatsby site?
+* How do you add a title to a page?
 * What are the three steps for writing a new React component?
 * What are props and when might you use them?
 * What is the `children` prop and why is it useful?
@@ -799,6 +848,7 @@ Once your changes have been pushed to GitHub, Gatsby Cloud should notice the upd
 
 * React is a library that helps you break down your UI into smaller pieces called components. A component is a function that returns a React element. React elements can be written in JSX.
 * **Page components** contain all the UI elements for a specific page of your site. Gatsby automatically creates pages for components that are the default exports of files in the `src/pages` directory. The name of the file will be used as the route for the page.
+* You can use the **Gatsby Head API** by exporting a named function `Head` to define metadata for the page.
 * **Building-block components** are smaller reusable parts of your UI. They can be imported into page components or other building block components.
 * You can import **pre-built** components (like `Link`) from other packages, or you can write your own **custom** components from scratch (like `Layout`).
 * You can use **props** to change how a component renders. You can define your own props when you build a component. React also has some built-in props, like `children` and `className`.
diff --git a/docs/docs/tutorial/part-3/index.mdx b/docs/docs/tutorial/part-3/index.mdx
index 26a50b9522ba6..ea1fe7950bace 100644
--- a/docs/docs/tutorial/part-3/index.mdx
+++ b/docs/docs/tutorial/part-3/index.mdx
@@ -194,6 +194,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 
@@ -238,6 +240,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 3. In your web browser, go to `localhost:8000`. Your image should still appear on the home page.
@@ -246,7 +250,7 @@ export default IndexPage
 
 <Announcement style={{marginBottom: "1.5rem"}}>
 
-**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example).
+**Want to see how it all fits together?** Check out the finished state of the [GitHub repo for the example site](https://github.com/gatsbyjs/tutorial-example).
 
 </Announcement>
 
diff --git a/docs/docs/tutorial/part-4/index.mdx b/docs/docs/tutorial/part-4/index.mdx
index ea711e790e882..392f42d2b81d0 100644
--- a/docs/docs/tutorial/part-4/index.mdx
+++ b/docs/docs/tutorial/part-4/index.mdx
@@ -28,6 +28,7 @@ By the end of this part of the Tutorial, you will be able to:
 
 - Use **GraphiQL** to explore the data in the data layer and build your own GraphQL queries.
 - Use the **`useStaticQuery`** hook to pull data into a "building-block" component.
+- Create an reusable `Seo` component for the **Gatsby Head API**.
 - Use the **`gatsby-source-filesystem`** plugin to pull data into your site from your computer's filesystem.
 - Create a **page query** to pull data into a page component.
 
@@ -35,7 +36,7 @@ By the end of this part of the Tutorial, you will be able to:
 
 **Prefer a video?**
 
-If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 4.
+If you'd rather follow along with a video, here's a recording of a livestream that covers all the material for Part 4. **Please note:** At the time of recording the Gatsby Head API didn't exist yet and thus the video contents and text contents are different. Please always follow the written instructions. We'll do our best to record a new version in the future, thanks for understanding!
 
 Don't want to miss any future livestreams? Follow our [Gatsby Twitch channel](https://www.twitch.tv/gatsbyjs).
 
@@ -103,13 +104,13 @@ Try creating and running a few queries by doing the following:
 
 In the next section, you'll learn more about how to use specific fields. For now, take a minute or two to explore the different fields. What kinds of data are already available to you in the data layer?
 
-## Queries in building-block components: Pull the site title into the `Layout` component
+## Queries in building-block components
 
 Now that you've seen the general process for how data works in your Gatsby site, it's time to try it out yourself.
 
 The process for using GraphQL queries in your components looks slightly different depending on whether it's a page component or a building-block component.
 
-In this first section, you'll start by pulling data into a building-block component. To do that, you'll update your `Layout` component to pull in the title of your site.
+In this first section, you'll start by pulling data into a building-block components. To do that, you'll update your `Layout` component and create an `Seo` component to display the title of your site.
 
 ### Task: Use GraphiQL to build the query
 
@@ -235,7 +236,7 @@ const Header = () => {
     <header>
       {/* highlight-start */}
       {/* Step 3: Use the data in your component */}
-      <h1>{ data.site.siteMetadata.title }</h1>
+      <h1>{data.site.siteMetadata.title}</h1>
       {/* highlight-end */}
     </header>
   )
@@ -392,7 +393,6 @@ const Layout = ({ pageTitle, children }) => {
   return (
     <div className={container}>
       {/* highlight-start */}
-      <title>{pageTitle} | {data.site.siteMetadata.title}</title>
       <header>{data.site.siteMetadata.title}</header>
       {/* highlight-end */}
       <nav>
@@ -462,7 +462,6 @@ const Layout = ({ pageTitle, children }) => {
 
   return (
     <div className={container}>
-      <title>{pageTitle} | {data.site.siteMetadata.title}</title>
       {/* highlight-next-line */}
       <header className={siteTitle}>{data.site.siteMetadata.title}</header>
       <nav>
@@ -496,6 +495,106 @@ When your browser reloads, you should see your new styles applied to your site t
 
 Congratulations, you've just used GraphQL to pull data into your site! Try changing the site title in your `gatsby-config.js` file and see your site update in the browser.
 
+### Task: Use `useStaticQuery` to create an `Seo` component
+
+Now that you're using the site title in your `Layout` component it's time to also update the `<title>` tag of each page. In the previous steps you used the Gatsby Head API to define the title, e.g. in the Index page:
+
+```js:title=src/pages/index.js
+export const Head = () => <title>Home Page</title>
+```
+
+At the end of this task the title will say `Home Page | My First Gatsby Site` by using an `Seo` component. Follow the steps below to use `useStaticQuery` in an `Seo` component and use this component across your pages.
+
+1. Create a new file called `src/components/seo.js`. Insert the following code to define your `Seo` component. This component accepts one required parameter called `title`, uses `useStaticQuery` to query the site title and then returns a `<title>` tag with the structure shown above.
+
+```js:title=src/components/seo.js
+import * as React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const Seo = ({ title }) => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+
+  return (
+    <title>{title} | {data.site.siteMetadata.title}</title>
+  )
+}
+
+export default Seo
+```
+
+2. Update the Index page component to use this newly created `Seo` component. You have to import it and then use it inside the `Head` export. Instead of placing the "Home Page" in between the `<title>` tag you're now passing it to the `Seo` component through the `title` prop.
+
+```js:title=src/pages/index.js
+import * as React from 'react'
+import Layout from '../components/layout'
+import { StaticImage } from 'gatsby-plugin-image'
+import Seo from '../components/seo' // highlight-line
+
+const IndexPage = () => {
+  return (
+    <Layout pageTitle="Home Page">
+      <p>I'm making this by following the Gatsby Tutorial.</p>
+      <StaticImage
+        alt="Clifford, a reddish-brown pitbull, dozing in a bean bag chair"
+        src="../images/clifford.jpg"
+      />
+    </Layout>
+  )
+}
+
+// highlight-next-line
+export const Head = () => <Seo title="Home Page" />
+
+export default IndexPage
+```
+
+3. Save the file and you should see `Home Page | My First Gatsby Site` in your browser tab.
+
+4. Update all the other pages where you used the `Head` export in the same way. Import the `Seo` component with the relative path to the file, replace the `<title>` tag in the `Head` export with the `Seo` component, and finally use the `title` prop on `Seo` to give it a name. The About page for example should use this:
+
+```js:title=src/pages/about.js
+// Rest of the component...
+
+export const Head = () => <Seo title="About Me" />
+```
+
+After going through this tutorial, be sure to check out [Adding an SEO Component](/docs/how-to/adding-common-features/adding-seo-component/) for a more detailed explanation.
+
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Pro Tip:** `useStaticQuery` lends itself really well when creating small, reusable React components. You can even create custom React hooks, for example:
+
+```js
+import * as React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const useSiteMetadata = ({ title }) => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+
+  return data.site.siteMetadata
+}
+
+export default useSiteMetadata
+```
+
+</Announcement>
+
 ## Queries in page components: Create a blog page with a list of post filenames
 
 So far, your site has a few static landing pages: the Home page and the About page. The next step is to build out the actual blog page!
@@ -514,6 +613,7 @@ Start by setting up the skeleton for your new blog page component.
 ```js:title=src/pages/blog.js
 import * as React from 'react'
 import Layout from '../components/layout'
+import Seo from '../components/seo'
 
 const BlogPage = () => {
   return (
@@ -523,6 +623,8 @@ const BlogPage = () => {
   )
 }
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
@@ -544,7 +646,6 @@ const Layout = ({ pageTitle, children }) => {
 
   return (
     <div className={container}>
-      <title>{pageTitle} | {data.site.siteMetadata.title}</title>
       <header className={siteTitle}>{data.site.siteMetadata.title}</header>
       <nav>
         <ul className={navLinks}>
@@ -731,8 +832,8 @@ import { graphql } from 'gatsby'
 const HomePage = ({ data }) => {
   return (
     <p>
-      { /* Step 3: Use the data in your component*/ }
-      { data.site.siteMetadata.description }
+      {/* Step 3: Use the data in your component*/}
+      {data.site.siteMetadata.description}
     </p>
   )
 }
@@ -761,6 +862,7 @@ Follow the steps below to add a list of post filenames to your blog page.
 import * as React from 'react'
 import { graphql } from 'gatsby' // highlight-line
 import Layout from '../components/layout'
+import Seo from '../../components/seo'
 
 const BlogPage = () => {
   return (
@@ -770,6 +872,8 @@ const BlogPage = () => {
   )
 }
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
@@ -787,6 +891,7 @@ Alternatively, you can give each of your queries a unique name. Query names can
 import * as React from 'react'
 import { graphql } from 'gatsby'
 import Layout from '../components/layout'
+import Seo from '../../components/seo'
 
 const BlogPage = () => {
   return (
@@ -808,6 +913,8 @@ export const query = graphql`
 `
 // highlight-end
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
@@ -827,6 +934,7 @@ In React, when you use the `.map()` method to render a list of elements, you sho
 import * as React from 'react'
 import { graphql } from 'gatsby'
 import Layout from '../components/layout'
+import Seo from '../../components/seo'
 
 const BlogPage = ({ data }) => { // highlight-line
   return (
@@ -856,9 +964,27 @@ export const query = graphql`
   }
 `
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Pro Tip:** The Gatsby Head API and its `Head` export also receives the `data` prop. This isn't directly obvious when using the component unless your IDE gives autocompletion or hints. If you're unsure how to use an API, head over to the [reference guides](/docs/reference) for instructions. There you'll find guides like [Gatsby Head API](/docs/reference/built-in-components/gatsby-head/).
+
+When accessing `data` in `Head` it is the same data as in your page component:
+
+```js
+export const Head = ({ data }) => (
+  <>
+    <title>{data.site.siteMetadata.title}</title>
+  </>
+)
+```
+
+</Announcement>
+
 4. Now, when you look at your blog page in a web browser, you should see a list with the filenames for each of your posts:
 
 ![A screenshot of the blog page in a web browser. Under the heading "My Blog Posts", there's a bulleted list of the post filenames: "another-post", "my-first-post", and "yet-another-post".](./blog-page-with-post-filenames.png)
@@ -869,7 +995,7 @@ You won't be able to render the contents of your posts just yet, since your site
 
 <Announcement style={{marginBottom: "1.5rem"}}>
 
-**Want to see how it all fits together?** Check out the commit history in the [GitHub repo for the finished example site](https://github.com/gatsbyjs/tutorial-example).
+**Want to see how it all fits together?** Check out the finished state of the [GitHub repo for the example site](https://github.com/gatsbyjs/tutorial-example).
 
 </Announcement>
 
@@ -907,6 +1033,7 @@ Once your changes have been pushed to GitHub, Gatsby Cloud should notice the upd
 * You can write GraphQL queries to pull data out of the data layer and into your React components.
     * To pull data into a "building block" component, use the `useStaticQuery` hook.
     * To pull data into a page component, use a page query.
+* You can use React components inside the Gatsby Head API.
 
 <Collapsible
   summary={<h2>Key Gatsby Concept: General process for using data in your site</h2>}
diff --git a/docs/docs/tutorial/part-5/index.mdx b/docs/docs/tutorial/part-5/index.mdx
index 05d4942234d47..ad28c5818d6a2 100644
--- a/docs/docs/tutorial/part-5/index.mdx
+++ b/docs/docs/tutorial/part-5/index.mdx
@@ -419,6 +419,7 @@ Now that your GraphQL query is all set up, it's time to replace the page query i
     import * as React from 'react'
     import { graphql } from 'gatsby'
     import Layout from '../components/layout'
+    import Seo from '../../components/seo'
 
     const BlogPage = ({ data }) => {
       return (
@@ -443,6 +444,8 @@ Now that your GraphQL query is all set up, it's time to replace the page query i
     `
     // highlight-end
 
+    export const Head = () => <Seo title="My Blog Posts" />
+
     export default BlogPage
     ```
 
@@ -484,6 +487,8 @@ Now that your GraphQL query is all set up, it's time to replace the page query i
       }
     `
 
+    export const Head = () => <Seo title="My Blog Posts" />
+
     export default BlogPage
     ```
 
@@ -497,6 +502,7 @@ Now that your GraphQL query is all set up, it's time to replace the page query i
 import * as React from 'react'
 import { graphql } from 'gatsby'
 import Layout from '../components/layout'
+import Seo from '../../components/seo'
 
 const BlogPage = ({ data }) => {
   return (
@@ -531,6 +537,8 @@ export const query = graphql`
   }
 `
 
+export const Head = () => <Seo title="My Blog Posts" />
+
 export default BlogPage
 ```
 
diff --git a/docs/docs/tutorial/part-6/index.mdx b/docs/docs/tutorial/part-6/index.mdx
index a262a6dbeddd5..baa99e9498a7b 100644
--- a/docs/docs/tutorial/part-6/index.mdx
+++ b/docs/docs/tutorial/part-6/index.mdx
@@ -51,7 +51,7 @@ To create a collection route:
 1. Decide what type of node you want to create pages from.
 2. Choose which field on that node to use in the route (the URL) for your pages.
 3. Create a new page component in your `src/pages` directory using the following naming convention: `{nodeType.field}.js`.
-    * Don't forget to include the curly braces (`{}`) in your filenames to indicate the dynamic part of the route! 
+    * Don't forget to include the curly braces (`{}`) in your filenames to indicate the dynamic part of the route!
 
 For example, if you wanted to create a separate page for each `Product` node, and you wanted to use the product's `name` field in the URL, you'd create a new file at `src/pages/{Product.name}.js`. Then Gatsby would create those pages at routes like `/water-bottle` or `/sweatshirt` or `/notebook`.
 
@@ -146,6 +146,7 @@ When you build your site, Gatsby looks at the page components in your `src/pages
     ```js:title=src/pages/{mdx.frontmatter__slug}.js
     import * as React from 'react'
     import Layout from '../components/layout'
+    import Seo from '../../components/seo'
 
     const BlogPost = () => {
       return (
@@ -155,6 +156,8 @@ When you build your site, Gatsby looks at the page components in your `src/pages
       )
     }
 
+    export const Head = () => <Seo title="Super Cool Blog Posts" />
+
     export default BlogPost
     ```
 
@@ -330,7 +333,7 @@ Under the hood, Gatsby makes both of these values available to use as query vari
     ```js
     Object {
       // ...
-      pageContext: Object { 
+      pageContext: Object {
         id: "11b3a825-30c5-551d-a713-dd748e7d554a"
         frontmatter__slug: "my-first-post"
       }
@@ -377,6 +380,7 @@ The JSON object in the Query Variables section should look something like the on
     import * as React from 'react'
     import { graphql } from 'gatsby' // highlight-line
     import Layout from '../../components/layout'
+    import Seo from '../../components/seo'
 
     const BlogPost = () => {
       return (
@@ -399,14 +403,17 @@ The JSON object in the Query Variables section should look something like the on
     `
     // highlight-end
 
+    export const Head = () => <Seo title="Super Cool Blog Posts" />
+
     export default BlogPost
     ```
 
-3. In [Part 4](/docs/tutorial/part-4/), you learned that Gatsby passes in the results from your page query into your page component as a `data` prop. You can update your `BlogPost` component to use the `data` prop and render the contents of your blog post. The actual MDX content, ready to render, will be passed as a `children` prop to the page component.
+3. In [Part 4](/docs/tutorial/part-4/), you learned that Gatsby passes in the results from your page query into your page component as a `data` prop. It also passes `data` to the Gatsby Head API. You can update your `BlogPost` component to use the `data` prop and render the contents of your blog post. The actual MDX content, ready to render, will be passed as a `children` prop to the page component.
     ```js:title=src/pages/blog/{mdx.frontmatter__slug}.js
     import * as React from 'react'
     import { graphql } from 'gatsby'
     import Layout from '../../components/layout'
+    import Seo from '../../components/seo'
 
     const BlogPost = ({ data, children }) => { // highlight-line
       return (
@@ -430,6 +437,9 @@ The JSON object in the Query Variables section should look something like the on
       }
     `
 
+    // highlight-next-line
+    export const Head = ({ data }) => <Seo title={data.mdx.frontmatter.title} />
+    
     export default BlogPost
     ```
 
@@ -451,6 +461,7 @@ The last step of Part 6 is to clean up your Blog page. Instead of rendering an e
     import * as React from 'react'
     import { Link, graphql } from 'gatsby' // highlight-line
     import Layout from '../../components/layout'
+    import Seo from '../../components/seo'
 
     const BlogPage = ({ data }) => {
       return (
@@ -488,6 +499,8 @@ The last step of Part 6 is to clean up your Blog page. Instead of rendering an e
       }
     `
 
+    export const Head = () => <Seo title="My Blog Posts" />
+
     export default BlogPage
     ```
 
diff --git a/docs/docs/tutorial/part-7/index.mdx b/docs/docs/tutorial/part-7/index.mdx
index 7318b68f03297..aa9ae6fe98782 100644
--- a/docs/docs/tutorial/part-7/index.mdx
+++ b/docs/docs/tutorial/part-7/index.mdx
@@ -370,6 +370,8 @@ Once you have your GraphQL query set up, you can add it to your blog post page t
     `
     // highlight-end
 
+    export const Head = ({ data }) => <Seo title={data.mdx.frontmatter.title} />
+
     export default BlogPost
     ```
 
@@ -380,6 +382,7 @@ import * as React from 'react'
 import { graphql } from 'gatsby'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image' // highlight-line
 import Layout from '../../components/layout'
+import Seo from '../../components/seo'
 
 // ...
 ```
@@ -477,6 +480,8 @@ export const query = graphql`
   ...
 `
 
+export const Head = ({ data }) => <Seo title={data.mdx.frontmatter.title} />
+
 export default BlogPost
 ```
 
diff --git a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/facebook.png b/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/facebook.png
deleted file mode 100644
index 15c66c0b7fdf8..0000000000000
Binary files a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/facebook.png and /dev/null differ
diff --git a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/google.png b/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/google.png
deleted file mode 100644
index 1c609bbaa8b0c..0000000000000
Binary files a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/google.png and /dev/null differ
diff --git a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/seo.jpg b/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/seo.jpg
deleted file mode 100644
index a3ff4da9dc508..0000000000000
Binary files a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/seo.jpg and /dev/null differ
diff --git a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/slack.png b/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/slack.png
deleted file mode 100644
index 5577010df2e36..0000000000000
Binary files a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/slack.png and /dev/null differ
diff --git a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/twitter.png b/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/twitter.png
deleted file mode 100644
index 49a7a645c954a..0000000000000
Binary files a/docs/tutorial/seo-and-social-sharing-cards-tutorial/images/twitter.png and /dev/null differ
diff --git a/docs/tutorial/seo-and-social-sharing-cards-tutorial/index.md b/docs/tutorial/seo-and-social-sharing-cards-tutorial/index.md
deleted file mode 100644
index 2e424cb37e09d..0000000000000
--- a/docs/tutorial/seo-and-social-sharing-cards-tutorial/index.md
+++ /dev/null
@@ -1,638 +0,0 @@
----
-title: Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby
----
-
-Perhaps you've been approached by an SEO _expert_ who can maximize your revenue and page views by following these **Three Simple Tricks**! Relatively few people make the concerted effort to implement SEO in their web app. This tutorial will share some of the ins and outs of SEO and how you can implement common SEO patterns in your Gatsby web app, today. By the end of this post you'll know how to do the following:
-
-- Implement SEO patterns with [react-helmet][react-helmet]
-- Create an optimized social sharing card for Twitter, Facebook, and Slack
-- Tweak the SEO component exposed in the default gatsby starter ([`gatsby-starter-default`][gatsby-starter-default])
-
-## Implementation
-
-A core ingredient for SEO is a meaningful `title` tag. Make sure to include related keywords without falling into buzzword bingo. Some crawlers also respect `meta` tags, while Google seems to ignore these tags for ranking and indexing at all.
-
-You probably have seen something like the following:
-
-```html
-<title>My Wonderful App</title>
-<meta
-  name="viewport"
-  content="width=device-width, initial-scale=1, shrink-to-fit=no"
-/>
-<meta
-  name="description"
-  content="This is probably some earth-shattering excerpt that is around ~200 characters or less"
-/>
-```
-
-The _bare minimum_ requirement is to include a `title` tag for basic SEO. However, the following describes a powerful combo of content rendered at _build time_ powered by Gatsby and GraphQL.
-
-## Gatsby + GraphQL
-
-GraphQL is a crucial feature enabled via Gatsby (note: you don't [_have_ to use GraphQL with Gatsby][unstructured-data]). Leveraging GraphQL to query your indexable content--wherever it lives (at build time!)--is one of the most powerful and flexible techniques enabled via Gatsby. The following sections are a brief look at the implementation of an extensible and flexible SEO component.
-
-### `StaticQuery`
-
-Gatsby distinguishes between page-level queries and component queries. The former can use page GraphQL queries while the latter can use [`StaticQuery`][gatsby-static-query]. A StaticQuery will be parsed, evaluated, and injected at _build time_ into the component that is requesting the data, allowing to fall back to sane defaults, while also providing an extensible, reusable component.
-
-### Creating the SEO component
-
-Using the power and flexibility of React, you can create a React component to power this functionality.
-
-> Note: `react-helmet` is enabled, by default, in gatsby-starter-default and gatsby-starter-blog.
->
-> If you're not using those starters, [follow this guide for installation instructions][gatsby-plugin-react-helmet]
-
-```jsx:title=src/components/seo.js
-import React from "react"
-// highlight-start
-import { Helmet } from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
-// highlight-end
-
-function SEO({ description }) {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        # highlight-start
-        site {
-          siteMetadata {
-            title
-            description
-            author
-            keywords
-            siteUrl
-          }
-        }
-        # highlight-end
-      }
-    `
-  )
-
-  const metaDescription = description || site.siteMetadata.description
-
-  return null
-}
-
-export default SEO
-```
-
-This component doesn't _do_ anything yet, but it's the foundation for a useful, extensible component. It leverages the `useStaticQuery` functionality enabled via Gatsby to query siteMetadata (e.g. details in `gatsby-config.js`) with description and keywords. At this point, the `SEO` component returns `null` to render nothing. Next, you will _actually_ render something and build out the prototype for this SEO component.
-
-```jsx:title=src/components/seo.js
-import React from "react"
-import { Helmet } from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
-
-function SEO({ description, lang, meta }) {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-            author
-            keywords
-            siteUrl
-          }
-        }
-      }
-    `
-  )
-
-  const metaDescription = description || site.siteMetadata.description
-
-  return (
-    <Helmet
-      htmlAttributes={{
-        lang,
-      }}
-      meta={[
-        {
-          name: `description`,
-          content: metaDescription,
-        },
-        // highlight-start
-        {
-          name: "keywords",
-          content: site.siteMetadata.keywords.join(","),
-        },
-        // highlight-end
-      ]}
-    />
-  )
-}
-
-// highlight-start
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-// highlight-end
-
-export default SEO
-```
-
-Whew, getting closer! This will now render the `meta` `description` tag, and will do so using content injected at build-time with the `useStaticQuery` hook. Additionally, it will add the `lang="en"` attribute to the root-level `html` tag to silence that pesky Lighthouse warning 😉.
-
-This is still the bare bones, rudimentary approach to SEO. An additional step is to enhance this functionality and get some useful functionality for sharing a page via social networks like Facebook, Twitter, and Slack.
-
-### Implementing social SEO
-
-In addition to SEO for actual _search_ engines you also want those pretty cards that social networks like Twitter and Slack enable. Specifically, the implementation should feature:
-
-- Description for embedded results
-- Title for embedded results
-- (Optionally) display an image and a card if an image is passed in to the component
-
-```jsx:title=src/components/seo.js
-import React from "react"
-import PropTypes from "prop-types" // highlight-line
-import { Helmet } from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
-
-// highlight-next-line
-function SEO({ description, lang, meta, image: metaImage, title }) {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-            author
-            keywords
-            siteUrl
-          }
-        }
-      }
-    `
-  )
-
-  const metaDescription = description || site.siteMetadata.description
-  // highlight-start
-  const image =
-    metaImage && metaImage.src
-      ? `${site.siteMetadata.siteUrl}${metaImage.src}`
-      : null
-  // highlight-end
-
-  return (
-    <Helmet
-      htmlAttributes={{
-        lang,
-      }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={[
-        {
-          name: `description`,
-          content: metaDescription,
-        },
-        {
-          name: "keywords",
-          content: site.siteMetadata.keywords.join(","),
-        },
-        {
-          property: `og:title`,
-          content: title,
-        },
-        {
-          property: `og:description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:type`,
-          content: `website`,
-        },
-        {
-          name: `twitter:creator`,
-          content: site.siteMetadata.author,
-        },
-        {
-          name: `twitter:title`,
-          content: title,
-        },
-        {
-          name: `twitter:description`,
-          content: metaDescription,
-        },
-        // highlight-start
-      ]
-        .concat(
-          metaImage
-            ? [
-                {
-                  property: "og:image",
-                  content: image,
-                },
-                {
-                  property: "og:image:width",
-                  content: metaImage.width,
-                },
-                {
-                  property: "og:image:height",
-                  content: metaImage.height,
-                },
-                {
-                  name: "twitter:card",
-                  content: "summary_large_image",
-                },
-              ]
-            : [
-                {
-                  name: "twitter:card",
-                  content: "summary",
-                },
-              ]
-          // highlight-end
-        )
-        .concat(meta)}
-    />
-  )
-}
-
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-
-SEO.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
-  // highlight-start
-  image: PropTypes.shape({
-    src: PropTypes.string.isRequired,
-    height: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-  }),
-  // highlight-end
-}
-
-export default SEO
-```
-
-Woo hoo! You enabled not only SEO for search engines like Google and Bing, but you also laid the groundwork for enhanced sharing capabilities on social networks. Finally, you will learn to add support for one of the more useful functionalities for SEO: a canonical link.
-
-## `link rel="canonical"`
-
-A canonical link is a hint to a search engine that this is the _source_ for this content. It helps resolve duplicate content issues. For instance, if you have several paths to the same content, you can use a canonical link as akin to a soft redirect which will **not** harm your search ranking if implemented correctly.
-
-To implement this functionality, you need to do the following:
-
-1. Enable passing a `pathname` prop to your SEO component
-2. Prefix your `pathname` prop with your `siteUrl` (from `gatsby-config.js`)
-   - A canonical link should be _absolute_ (e.g. `https://your-site.com/canonical-link`), so you will need to prefix with this `siteUrl`
-3. Tie into the `link` prop of `react-helmet` to create a `<link rel="canonical" >` tag
-
-```jsx:title=src/components/seo.js
-import React from "react"
-import PropTypes from "prop-types"
-import { Helmet } from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
-
-// highlight-next-line
-function SEO({ description, lang, meta, image: metaImage, title, pathname }) {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-            author
-            keywords
-            siteUrl
-          }
-        }
-      }
-    `
-  )
-
-  const metaDescription = description || site.siteMetadata.description
-  const image =
-    metaImage && metaImage.src
-      ? `${site.siteMetadata.siteUrl}${metaImage.src}`
-      : null
-  // highlight-start
-  const canonical = pathname ? `${site.siteMetadata.siteUrl}${pathname}` : null
-  // highlight-end
-
-  return (
-    <Helmet
-      htmlAttributes={{
-        lang,
-      }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      // highlight-start
-      link={
-        canonical
-          ? [
-              {
-                rel: "canonical",
-                href: canonical,
-              },
-            ]
-          : []
-      }
-      //highlight-end
-      meta={[
-        {
-          name: `description`,
-          content: metaDescription,
-        },
-        {
-          name: "keywords",
-          content: site.siteMetadata.keywords.join(","),
-        },
-        {
-          property: `og:title`,
-          content: title,
-        },
-        {
-          property: `og:description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:type`,
-          content: `website`,
-        },
-        {
-          name: `twitter:creator`,
-          content: site.siteMetadata.author,
-        },
-        {
-          name: `twitter:title`,
-          content: title,
-        },
-        {
-          name: `twitter:description`,
-          content: metaDescription,
-        },
-      ]
-        .concat(
-          metaImage
-            ? [
-                {
-                  property: "og:image",
-                  content: image,
-                },
-                {
-                  property: "og:image:width",
-                  content: metaImage.width,
-                },
-                {
-                  property: "og:image:height",
-                  content: metaImage.height,
-                },
-                {
-                  name: "twitter:card",
-                  content: "summary_large_image",
-                },
-              ]
-            : [
-                {
-                  name: "twitter:card",
-                  content: "summary",
-                },
-              ]
-        )
-        .concat(meta)}
-    />
-  )
-}
-
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-
-SEO.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
-  image: PropTypes.shape({
-    src: PropTypes.string.isRequired,
-    height: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-  }),
-  // highlight-next-line
-  pathname: PropTypes.string,
-}
-
-export default SEO
-```
-
-Woo hoo! Lots to digest here, but you've enabled adding an _absolute_ canonical link by passing in a `pathname` prop and prefixing with `siteUrl`.
-
-To bring it all home, it's time to begin actually _using_ this extensible SEO component to show all of these moving parts coming together to deliver a great SEO experience.
-
-## Using the SEO component
-
-You created an extensible SEO component. It takes a `title` prop and then (optionally) `description`, `meta`, `image`, and `pathname` props.
-
-### In a page component
-
-```jsx:title=src/pages/index.js
-import React from "react"
-
-import Layout from "../components/layout"
-import SEO from "../components/seo" // highlight-line
-
-function Index() {
-  return (
-    <Layout>
-      <SEO title="My Amazing Gatsby App" /> {/* highlight-line */}
-      <h1>lol - pretend this is meaningful content</h1>
-    </Layout>
-  )
-}
-
-export default Index
-```
-
-### In a template
-
-In many cases, you want to build a Markdown powered blog (see: [this tutorial][gatsby-markdown-blog] for more info). Of course, you want some nice SEO as well as a nifty image for sharing on Twitter, Facebook, and Slack. The following steps are needed:
-
-- Create a Markdown post
-- Add an image, and add it to the Markdown posts frontmatter
-- Query this image with GraphQL
-
-#### Creating the post
-
-```shell
-mkdir -p content/blog/2019-01-04-hello-world-seo
-touch content/blog/2019-01-04-hello-world-seo/index.md
-```
-
-```markdown:title=content/blog/2019-01-04-hello-world-seo/index.md
----
-date: 2019-01-04
-featured: images/featured.jpg
----
-
-Hello World!
-```
-
-#### Adding the image
-
-Let's see how an attached image will look like. For this tutorial, you can use the following image:
-
-![Scribble stones forming SEO](./images/seo.jpg)
-
-The image will need to be located at `content/blog/2019-01-04-hello-world-seo/images/featured.jpg`.
-
-Make sure to use appropriately sized images for social sharing. Facebook and Twitter have restrictions beyond which they will ignore your image.
-
-#### Querying with GraphQL
-
-```jsx:title=src/templates/blog-post.js
-import React from "react"
-import { Link, graphql } from "gatsby"
-
-import Bio from "../components/bio"
-import Layout from "../components/layout"
-import SEO from "../components/seo" // highlight-line
-import { rhythm, scale } from "../utils/typography"
-
-class BlogPostTemplate extends React.Component {
-  render() {
-    const post = this.props.data.markdownRemark
-    const siteTitle = this.props.data.site.siteMetadata.title
-    const image = post.frontmatter.image
-      ? post.frontmatter.image.childImageSharp.resize
-      : null // highlight-line
-
-    return (
-      <Layout location={this.props.location} title={siteTitle}>
-        {/* highlight-start */}
-        <SEO
-          title={post.frontmatter.title}
-          description={post.frontmatter.description || post.excerpt}
-          image={image}
-          pathname={this.props.location.pathname}
-        />
-        {/* highlight-end */}
-        <h1>{post.frontmatter.title}</h1>
-        <div dangerouslySetInnerHTML={{ __html: post.html }} />
-      </Layout>
-    )
-  }
-}
-
-export default BlogPostTemplate
-
-export const pageQuery = graphql`
-  # highlight-start
-  query BlogPostBySlug($slug: String!) {
-    site {
-      siteMetadata {
-        title
-        author
-      }
-    }
-    markdownRemark(fields: { slug: { eq: $slug } }) {
-      id
-      excerpt(pruneLength: 160)
-      html
-      frontmatter {
-        title
-        description
-        image: featured {
-          childImageSharp {
-            resize(width: 1200) {
-              src
-              height
-              width
-            }
-          }
-        }
-      }
-    }
-  }
-  # highlight-end
-`
-```
-
-There are a few aspects worth nothing here:
-
-- You're using `pruneLength: 160` for the excerpt; this is because [SEO meta descriptions should be between 150-170 characters][seo-description-length]
-
-- This is a slick feature of Gatsby's GraphQL capabilities, and will truncate (e.g. with a trailing `...`) appropriately. Perfect!
-
-- The image query is intentionally simplified, but a good base to build upon. There are specific size and aspect ratio requirements for [both Facebook][facebook-og-image] and [Twitter][twitter-image].
-
-## The Payoff
-
-Using the techniques outlined in this post, you've made your Gatsby application SEO-friendly as well as sharable on common social networks. Check out the following examples of a sample blog post.
-
-### Google
-
-![Indexing Results by Google](./images/google.png)
-
-### Facebook
-
-![Social Sharing Card as on Facebook](./images/facebook.png)
-
-### Twitter
-
-![Social Sharing Card as on Twitter](./images/twitter.png)
-
-### Slack
-
-![Social Sharing Card as on Slack](./images/slack.png)
-
-To learn more about these validations, check out how to _validate_ SEO with the following tools from [Google][google-validation], [Twitter][twitter-validation], and [Facebook][facebook-validation].
-
-The SEO resources outlined in this tutorial aren't _only_ a best practice, they're also a best practice enabled, by default. Available **today** in `gatsby-starter-default`, use:
-
-```shell
-npm gatsby new my-new-gatsby-app
-```
-
-and you'll have the `SEO` component available to maximize your SEO and social sharing capabilities. Check it out!
-
-## Further Learning
-
-This tutorial is merely a shallow dive into the depths of SEO. Consider it a primer for further learning and a gentle introduction to some SEO concepts with a Gatsby twist. To truly master these concepts is outside the scope of this tutorial, but it truly is fascinating stuff that can directly lead to more eyes on your content!
-
-### References
-
-- Facebook uses the [Open Graph][og] tag format
-- Twitter uses `twitter:` keywords. See [Twitter Cards][twitter-cards] for more info
-- Slack reads tags in the following order ([source][slack-unfurl])
-  1. oEmbed server
-  2. Twitter cards tags / Facebook Open Graph tags
-  3. HTML meta tags
-- Both [Google][google-json-ld] and [Apple][apple-json-ld] offer support for JSON-LD, which is _not covered_ in this guide
-  - If you'd like to learn more, check out [this excellent guide](https://nystudio107.com/blog/json-ld-structured-data-and-erotica) for more info on JSON-LD
-- Check out the [`gatsby-seo-example`][gatsby-seo-example] for a ready-to-use starter for powering your Markdown-based blog.
-
-[gatsby-starter-default]: https://github.com/gatsbyjs/gatsby-starter-default
-[gatsby-static-query]: /docs/static-query/
-[gatsby-markdown-blog]: /docs/adding-markdown-pages/
-[gatsby-plugin-react-helmet]: /packages/gatsby-plugin-react-helmet/
-[react-helmet]: https://github.com/nfl/react-helmet
-[unstructured-data]: /docs/using-gatsby-without-graphql/
-[og]: https://developers.facebook.com/docs/sharing/webmasters/#markup
-[twitter-cards]: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards.html
-[seo-description-length]: https://yoast.com/shorter-meta-descriptions/
-[facebook-og-image]: https://developers.facebook.com/docs/sharing/best-practices#images
-[twitter-image]: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image.html
-[slack-unfurl]: https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254
-[google-validation]: https://support.google.com/webmasters/answer/6066468?hl=en
-[twitter-validation]: https://cards-dev.twitter.com/validator
-[facebook-validation]: https://developers.facebook.com/tools/debug/sharing
-[gatsby-seo-example]: https://github.com/DSchau/gatsby-seo-example
-[google-json-ld]: https://developers.google.com/search/docs/guides/intro-structured-data
-[apple-json-ld]: https://developer.apple.com/library/archive/releasenotes/General/WhatsNewIniOS/Articles/iOS10.html#//apple_ref/doc/uid/TP40017084-DontLinkElementID_2