Add Image Support to SEO Component
Add a siteUrl field to your gatsby-config metadata. Together with an image src, generate the URL for an image. Inside your SEO component, add an additional array to your Helmet meta field that is only used when an image is available. Set the appropriate fields and the summary_large_image Twitter card type so that the images will show up when shared on social sites.
Instructor: [0:01] In your gatsby-config file, add an additional field to your siteMetadata. Your siteUrl should correspond to the domain of your production site. If you don't have one yet, you can use a dummy for now.
[0:21] In your SEO component, we're now going to pass image and imageAlt. We're also going to query for siteUrl on siteMetadata.
[0:38] Create a new variable called imageUrl. Using a template literal, pass in the siteUrl from siteMetadata and the image that we plan to pass into the component. This will create a path to the image source.
[1:05] Now add an additional concat field and array to your React Helmet structure, only if image exists. Otherwise, we're going to use the same twitter:card summary layout that we were previously using.
[1:40] If we do have an image, we want to add some additional fields, og:image can point to our image URL, og:image:alt will point to our image:alt. If an image:alt does not exist, we'll point to the title of the page. We can do the same thing for twitter, a twitter:image and a twitter:image:alt.
[2:27] Finally, we want to change our twitter:card layout. If we have an image, we want to use summary_large_image.
[2:42] Now, we can use our SEO component for each of our blog posts, import SEO from ../components/seo. When we use the component, we want to pass a title, which comes from our frontmatter.
[3:09] We want to pass a description, which we can make available in our frontmatter. If not, it will default to the description metadata of our site.
[3:22] We're going to pass an image and imageAlt, which is also available in our frontmatter. For image, we're actually trying to pass an image source instead of our image object. We're going to use the helper function getSource that's exported from gatsby-plugin-image.
[3:53] We can pass the same file node to that function. Now we can pass SEO image which will correspond to the image source to our SEO component.
[4:08] If we navigate to one of our blog posts and look inside the head tag, we can see that all of this information is available. All of the initial SEO that we had for other pages and the new things we've added for image processing.