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.
You cannot. Under the hood there is some babel stuff going on the conflicts with the MDX build process.
This nicely explains why I was not able to make it work then :wink: Thanks for the answer !
How would it work for a post with more than one image?
How would it work for a post with more than one image? SEO support is about the preview image that gets shown for a post when you share the link on a social site, etc. Therefore, only one image can be used.
This does not prevent you from using multiple images in the post itself.
Thanks! I think I posted under the wrong segment. I meant multiple images in a post, not for SEO.
Thanks! I think I posted under the wrong segment. I meant multiple images in a post, not for SEO.
Ah, got it. You certainly can. You can't have more than one image in the frontmatter unless you change your template. In most cases you'll want to include the images in the body of your MDX itself. Meaning you can treat it like a typical markdown image and use 
.
Thanks! I think I posted under the wrong segment. I meant multiple images in a post, not for SEO.
Ah, got it. You certainly can. You can't have more than one image in the frontmatter unless you change your template. In most cases you'll want to include the images in the body of your MDX itself. Meaning you can treat it like a typical markdown image and use .
Sorry, about that, this comment section converts markdown it seems! This is the type of syntax you'd use. https://www.markdownguide.org/basic-syntax/#images-1
Can we use StaticImage component in an MdX post ?