chore(docs): Update tutorial to Head API

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 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
+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,31 @@ 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: Gatsby lets you define a title and other [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) related tags with the [Gatsby Head API](/docs/reference/built-in-components/gatsby-head/).
+When you export a `Head` component from your page file, It automatically picks all the head tags in your JSX and adds them to the [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head).
+This is important because it helps search engines like Google to better understand your site. For this tutorial we'll only be adding a title to this page but you can also add `<meta>`, `<links>` and other head related tags
+
+```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! We defined a page title. This shows up on the browser tab
+export const Head = () => <title>About Me<title/>
+
+export default AboutPage
+```
+
+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 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)
+![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 +367,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 +375,8 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage
 ```
 
@@ -365,7 +390,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 +398,8 @@ const AboutPage = () => {
   )
 }
 
+export const Head = () => <title>About Page</title>
+
 export default AboutPage
 ```
 
@@ -478,7 +504,6 @@ import { Link } from 'gatsby'
 const Layout = ({ pageTitle, children }) => {
   return (
     <div>
-      <title>{pageTitle}</title>
       <nav>
         <ul>
           <li><Link to="/">Home</Link></li>
@@ -643,7 +668,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 +745,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 +796,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 title to 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?

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>
@@ -420,8 +419,6 @@ const Layout = ({ pageTitle, children }) => {
 export default Layout
 ```
 
-![A screenshot of the home page in a web browser. The title of the page in the browser tab now says, "Home Page | My First Gatsby Site", and the top of the page has an unstyled paragraph that says, "My First Gatsby Site".](./index-page-with-site-title.png)
-
 4. Now that the site title is showing up on the page, it's time to add some style! Define some styles for the site title below the existing styles in your `layout.module.css` file.
 
 ```css:title=src/components/layout.module.css
@@ -462,7 +459,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 +519,10 @@ const BlogPage = () => {
   )
 }
 
+export const Head = ({ data }) => (
+   <title> My Blog Posts | {data.site.siteMetadata.title}</title>
+)
+
 export default BlogPage
 ```
 
@@ -544,7 +544,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 +769,10 @@ const BlogPage = () => {
   )
 }
 
+export const Head = ({ data }) => (
+   <title> My Blog Posts | {data.site.siteMetadata.title}</title>
+)
+
 export default BlogPage
 ```
 

docs/docs/tutorial/part-5/index.mdx

@@ -557,6 +557,10 @@ const BlogPage = ({ data }) => {
   )
 }
 
+const Head = () => (
+  <title>My Blog Posts</title>
+)
+
 export const query = graphql`
   query {
     allMdx(sort: {fields: frontmatter___date, order: DESC}) {

docs/docs/tutorial/part-6/index.mdx

@@ -146,6 +146,10 @@ 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
     ```
 
@@ -393,6 +397,10 @@ 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
     ```
 
@@ -428,6 +436,12 @@ The JSON object in the Query Variables section should look something like the on
       }
     `
 
+    export const Head = ({ data }) => {
+      return(
+        <title>{data.mdx.frontmatter.title}</title>
+      )
+    }
+
     export default BlogPost
     ```
 
@@ -477,6 +491,11 @@ The last step of Part 6 is to clean up your Blog page. Instead of rendering the
       }
     `
 
+    export const Head = () => (
+      <title> My Blog Posts </title>
+    )
+
+
     export default BlogPage
     ```
 
@@ -524,6 +543,10 @@ The last step of Part 6 is to clean up your Blog page. Instead of rendering the
       }
     `
 
+     export const Head = () => (
+      <title> My Blog Posts </title>
+    )
+
     export default BlogPage
     ```