gatsbyjs · marvinjude · Aug 19, 2022 · Aug 12, 2022 · Aug 12, 2022 · Aug 15, 2022
diff --git 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
@@ -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.
@@ -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>
   )
 }
 
+// Page title that shows up on the browser tab and in the <head> element
+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,38 @@ 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 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 a title to this page 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>
+  )
+}
+
+// Yay! You defined a page title. This shows up on the browser tab
+export const Head = () => <title>About Me<title/>
+
+export default AboutPage
+```
+<Announcement style={{marginBottom: "1.5rem"}}>
+
+**Key Gatsby Concept** 💡
 
-![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)
+You just added a title to the About page using the [Gastby Head API](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/). You'll notice that the title is now displayed on the browser tab.
+With this API, you can also add other metadata to your site. For example, you can add a description to your site that shows up in search engines like Google.
+
+</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 +374,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 +382,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 
@@ -365,7 +397,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 +405,8 @@ const AboutPage = () => {
   )
 }
 
+export const Head = () => <title>About Me</title>
+
 export default AboutPage
 ```
 
@@ -478,7 +511,6 @@ import { Link } from 'gatsby'
 const Layout = ({ pageTitle, children }) => {
   return (
     <div>
-      <title>{pageTitle}</title>
       <nav>
         <ul>
           <li><Link to="/">Home</Link></li>
@@ -643,7 +675,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 +752,6 @@ import {
 const Layout = ({ pageTitle, children }) => {
   return (
     <div className={container}>
-      <title>{pageTitle}</title>
       <nav>
         <ul className={navLinks}> // highlight-line
           <li className={navLinkItem}> // highlight-line
@@ -773,6 +803,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?

diff --git a/docs/docs/tutorial/part-4/index.mdx b/docs/docs/tutorial/part-4/index.mdx
@@ -392,7 +392,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 +461,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>
@@ -523,6 +521,10 @@ const BlogPage = () => {
   )
 }
 
+export const Head = ({ data }) => (
+   <title>My Blog Posts | {data.site.siteMetadata.title}</title>
+)
+
 export default BlogPage
 ```
 
@@ -544,7 +546,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}>
@@ -770,6 +771,10 @@ const BlogPage = () => {
   )
 }
 
+export const Head = ({ data }) => (
+   <title> My Blog Posts | {data.site.siteMetadata.title}</title>
+)
+
 export default BlogPage
 ```
 

diff --git a/docs/docs/tutorial/part-5/index.mdx b/docs/docs/tutorial/part-5/index.mdx
@@ -516,6 +516,8 @@ const BlogPage = ({ data }) => {
   )
 }
 
+export const Head = () => <title>My Blog Posts</title>
+
 export const query = graphql`
   query {
     allMdx(sort: {fields: frontmatter___date, order: DESC}) {

diff --git 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`.
 
@@ -155,6 +155,8 @@ When you build your site, Gatsby looks at the page components in your `src/pages
       )
     }
 
+    export const Head = () => <title>Super Cool Blog Posts</title>
+
     export default BlogPost
     ```
 
@@ -330,7 +332,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"
       }
@@ -399,6 +401,8 @@ The JSON object in the Query Variables section should look something like the on
     `
     // highlight-end
 
+    export const Head = () => <title>Super Cool Blog Posts</title>
+
     export default BlogPost
     ```
 
@@ -429,7 +433,8 @@ The JSON object in the Query Variables section should look something like the on
         }
       }
     `
-
+    export const Head = ({ data }) => <title>{data.mdx.frontmatter.title}</title>
+
     export default BlogPost
     ```
 
@@ -488,6 +493,8 @@ The last step of Part 6 is to clean up your Blog page. Instead of rendering an e
       }
     `
 
+    export const Head = () => <title>My Blog Posts</title>
+
     export default BlogPage
     ```
 

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
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
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
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
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