Notes on sharing a web page on platforms like Facebook, Twitter & LinkedIn.
Open Graph protocol
The Open Graph protocol enables a web page to become a rich object in a social graph. Some sites that allow posting (like Facebook), use this protocol (or a variation of it) to display an image & other meta information about a web page when a URL is added to the post. Example of a rich object on Twitter:
Common Open Graph HTML elements required on the web page to enable this:
Elements required to render a Twitter Card when sharing a web page on Twitter post:
Elements required to render a share card when sharing a web page in a LinkedIn post:
In order for a LinkedIn post to register a publish date, a time element needs to be on the page with a
Its value needs to be in ISO 8601 format.
date-fns has a function for converting a date into this format.
Twitter's documentation details minimum & maximum image size but doesn't recommend a size or aspect ratio (for either summary or summary_large_image).
Twitter's card displays a
summary_large_image image at 504 x 264px (1.91:1 ratio) on desktop.
The only recommendation I could find was from Neil Patel who recommends 1200 x 627px (1.91:1 ratio).
This is consistent with LinkedIn's share image recommendation.
The displayed image size doesn't adapt if an image with a different ratio is provided, even with accurate
A Twitter 1200 x 600px share image (cut-off at the sides):
A LinkedIn 1200 x 600px share image (cut-off at the sides):
A Twitter 1200 x 627px share image (not cut-off):
It's common to see meta information, such as the page title, within a share image. Considering most platforms will display meta information along with the image when sharing, I think this approach is duplicating information, resulting in poor UX (User Experience).