{ "componentChunkName": "component---src-templates-blog-post-tsx", "path": "/2021/how-to-add-twitter-card-images-to-your-gatsby-blog/", "result": {"data":{"site":{"siteMetadata":{"title":"Cole Striler","siteUrl":"https://www.striler.blog"}},"markdownRemark":{"id":"70a7dd72-1916-5cfc-9724-3be72fa33b6a","excerpt":"In this tutorial, I will show you a simple three-step process to add Twitter, LinkedIn, and Facebook card images to your Gatsby blog. As it turns out, it’s a…","html":"

In this tutorial, I will show you a simple three-step process to add Twitter, LinkedIn, and Facebook card images to your Gatsby blog.

\n

As it turns out, it’s a bit more complicated than simply importing your thumbnail into the Seo component and passing it as a variable into the meta tags.

\n

From a high-level: we will first define the thumbnail in the front matter of our blog post (step 1). We will then pull the thumbnail into src/templates/blog-post.tsx and pass it into the Seo component where the meta tags are defined (step 2). Finally, we will receive the thumbnail from within the Seo component and add it to the appropriate meta tags (step 3).

\n

Result: At the end of this tutorial, you will be able to share links to your blog on Twitter, Facebook, and LinkedIn with custom images for each blog post.

\n

Step 0: Create a Gatsby Blog

\n

The Gatsby starter blog comes with the required packages for this tutorial. If you’ve already created your blog using the Gatsby Starter Blog Template, you can skip this step. If you haven’t, you will need to run the code below to generate your new blog:

\n
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
\n

If you are not using the Gatsby starter blog template, make sure to install the following packages: react-helmet, gatsby-source-filesystem, gatsby-transformer-remark, gatsby-remark-images, gatsby-transformer-sharp.

\n

Step 1: Insert the Image and Set the Front Matter Property

\n

Navigate to the content/blog directory.

\n

Insert your thumbnail next to the index.md file inside a specific blog directory.

\n

Note: It is recommended to use a thumbnail with dimensions 1200x628px.\n\n \n \n \n \n

\n

Next, open up the index.md file and add a link to your thumbnail in the front matter.

\n
---\ntitle: Blog Title\ndate: \"2021-06-24T12:00:00.284Z\"\ndescription: \"Blog description\"\nthumbnail: \"./twitterImage.jpg\"\n---
\n

Step 2: Access the Thumbnail in Blog Post Component

\n

Navigate to blog-post.tsx.

\n

Next, we need to access the thumbnail from within blog-post.tsx so that we can send it to the Seo component.

\n

Add the thumbnail field to your blog-post page query as shown below:

\n
export const pageQuery = graphql`\n  query BlogPostBySlug(\n    $id: String!\n    $previousPostId: String\n    $nextPostId: String\n  ) {\n    site {\n      ...\n    }\n    markdownRemark(id: { eq: $id }) {\n      ...\n      frontmatter {\n        title\n        date(formatString: \"MMMM DD, YYYY\")\n        description\n \n        thumbnail {\n          childImageSharp {\n            fixed(width: 1200) {\n              ...GatsbyImageSharpFixed\n            }\n          }\n        }\n        ...\n      }\n    }\n  }\n`
\n

In the same file, go to the BlogPostTemplate component and add a constant named thumbnail.

\n
const BlogPostTemplate = ({ data, location }) => {\n    const post = data.markdownRemark\n    const siteTitle = data.site.siteMetadata?.title || `Blog - Cole Striler`\n    const {previous, next} = data\n    const {siteUrl} = data.site.siteMetadata\n    const thumbnail = post.frontmatter.thumbnail\n    ...\n}
\n

Now we can pass the thumbnail to the Seo component.

\n
<Seo\n    title={post.frontmatter.title}\n    description={post.frontmatter.description || post.excerpt}\n    thumbnail={thumbnail}\n/>
\n

Step 3: Add Thumbnail to Meta Tags in Seo Component

\n

Navigate to seo.tsx.

\n

Finally, we need to receive the thumbnail from within the Seo component and add it to the meta tags.

\n

Update your code to pull in the thumbnail:

\n
const Seo = ({ description, lang, meta, title, thumbnail }) => {
\n

Next, we need to build a custom link that tells the browser where to look for our new thumbnail. Add imageSrc and image to the Seo component under the static query.

\n
const {site} = useStaticQuery(\n    ...\n  )\nconst imageSrc = thumbnail && thumbnail.childImageSharp.fixed.src;\nconst image = site.siteMetadata?.siteUrl + imageSrc;
\n

The above code should build the correct link to your thumbnail, but if it doesn’t, you need to modify the path that generates your imageSrc.

\n

To find the source of your image, inspect the browser window and set a breakpoint at the beginning of the Seo component. Open up the local variables and find the path to the src within the thumbnail variable.

\n

In the far right of the screenshot below, you can see that the src of my thumbnail is under the path thumbnail.childImageSharp.fixed.src.\n\n \n \n \n \n

\n

Note: Do NOT use the following code to fetch your site URL

\n
let origin = \"\";\nif (typeof window !== \"undefined\") {\n  origin = window.location.origin;\n}\nconst image = origin + imageSrc;
\n

If you use the above code, when you run gatsby build, location and origin will not be available, which will set the origin variable to undefined.

\n

You MUST use the siteUrl generated from the siteMetadata to build the URL or else you may run into issues like this.

\n

Finally, add the following image meta tags to your array of tags:

\n
{\n  property: `og:image`,\n  content: image\n},\n{\n  name: `twitter:image:src`,\n  content: image,\n},
\n

Boom! That’s it.

\n

Conclusion

\n

Now you can add custom thumbnails to each blog post that will make your links much prettier on social media. You can use the following sources to verify that your card images are working as expected: Twitter Card Validator, LinkedIn Post Inspector, and Facebook Debugger Tool.

","frontmatter":{"title":"How to Add Social Media Card Images to Your Gatsby Blog","date":"June 24, 2021","description":"In this tutorial, I will show you a simple three-step process to add Twitter, LinkedIn, and Facebook card images to your Gatsby blog.","thumbnail":{"childImageSharp":{"fixed":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIDBAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGnnxgwof/EABoQAAEFAQAAAAAAAAAAAAAAABEAAQIDEyD/2gAIAQEAAQUCypxEE44//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGxAAAQQDAAAAAAAAAAAAAAAAAAEREiEgMpH/2gAIAQEABj8CeVmy8KV8P//EABsQAAIBBQAAAAAAAAAAAAAAAAERIRAgMUFx/9oACAEBAAE/IQmQxkvaoAQOBxWf/9oADAMBAAIAAwAAABDAD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB0QAQACAQUBAAAAAAAAAAAAAAERIQAgMVFhcfD/2gAIAQEAAT8Qu8OruiPawiJLafrgYZCVaHjR/9k=","width":1200,"height":628,"src":"/static/c2a424644823fb462980ce9cc0fd2656/47498/twitterImage.jpg","srcSet":"/static/c2a424644823fb462980ce9cc0fd2656/47498/twitterImage.jpg 1x"}}}}},"previous":{"fields":{"slug":"/2021/checkmates-in-life/"},"frontmatter":{"title":"You have to find the checkmates in life"}},"next":{"fields":{"slug":"/2021/looking-inside-vs-looking-from-within/"},"frontmatter":{"title":"Looking inside vs looking from within"}}},"pageContext":{"id":"70a7dd72-1916-5cfc-9724-3be72fa33b6a","previousPostId":"3b0a10ba-abb3-5e8e-b042-01d139d1f45c","nextPostId":"ba778cd3-eff5-51d5-be65-936e04df7006"}}, "staticQueryHashes": ["3771180734","452190831"]}