I added an SEO component to my blog recently and on top of that I decided to set up infrastructure to pull in images for Twitter, etc. The SEO component already handled titles and descriptions for cards on Twitter, but I wanted something a bit more... interesting. I like large images and I eventually want to start drawing images for my blog posts. So I dove into gatsby-transformer-sharp.
The sharp transformer makes it absolutely trivial to handle an image described in frontmatter and post it as a Twitter meta card.
First I jacked the
from the Gatsby starters. Then I added a couple key
twitter:image and the switch that
summary_large_image card type.
Then I stuck an image in my frontmatter for a blog post. The addition of gatsby-transformer-sharp enabled the following query to get the processed image.
Then it's a matter of using that query and passing it into the SEO component.
Now to add a new "featured image" that shows up on Twitter, we only need to add a pointer to the image in our frontmatter.
I currently use Netlify CMS to edit my blog posts and I'm
starting to feel the need for something a bit more custom.
Currently, Netlify CMS will blow away the
key on updates, erasing the Twitter opengraph image from