masakudamatsu
commented
4 years ago We create a page preview image by taking a screenshot of the landing page
- My MacBook Pro's screen capture creates an image with 2x pixel density.
- So I need to take an image of size 600x300 (to follow the 2:1 aspect ratio of Twitter's "Summary Card with Large Picture", which accommodates Facebook's aspect ratio of 1.91:1)
- I use DevTools to preview the page with 650px width, to take a screen capture
The image is saved as/public/pagepreview.png
- The
og:imgmeta tag requires the full URL. (Otherwise Facebook Debugger complains.) - Saving in the public folder allows us to access to the image as
https://line-height-picker.app/pagepreview.png
We add og:title and og:description
- The
titleanddescriptionvalue changes across pages (#143, #5) - But we don't want our app to be shared by each single page
We set og:url as https://line-height-picker.app
- We want to aggregate the engagement stats at the app level
We use the Twitter's "Summary Card with Large Picture"
We attribute our app to my personal Twitter account with twitter:creator
Image type, height, width, and alt text are also specified
Reference https://www.evernote.com/l/AFM4UWGRyDpPwJtIrkiUQHT0krua9OAqAe4