Generate social media images in Gridsome

https://timdeschryver.dev/blog/gridsome-social-cards

https://blog.solunita.net/posts/develop-blog-by-gridsome-from-scrach-dynamic-metadata/

https://www.learnwithjason.dev/blog/auto-generate-social-image/

Add global metadata tags

We can use App.vue or main.js

Add template specific metadata tags

In Post.vue

Install get-share-image package

Facebook shared link image size: 1200 x 628 Twitter post image size: 1024 x 512 LinkedIn link post size: 1200 x 628

Add and configure image metadata tags

Some meta tags like images and taglines have to be nested in metadata object in gridsome.config.js

Testing on dev

We need some 3rd party software to test SEO on localhost apparently