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 and 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:
/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta property="og:type" content="article" /> <meta property="og:url" content="https://garden.bradwoods.io/notes/global-state" /> <meta property="og:site_name" content="Brad Woods' digital garden" /> <meta property="og:title" content="Global State in Next.js using XState" /> <meta property="og:description" content="How to create global state in Next.js using XState" /> <meta property="og:image" content="https://garden.bradwoods.io/ogImages/globalState.png" /> <meta property="og:image:height" content="627" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:alt" content="A wireframe of a sphere." /> <!-- date format: ISO 8601 international standard --> <meta property="article:published_time" content="2021-05-23T10:00:00+10:00" /> <meta property="article:modified_time" content="2021-11-11T11:00:00+11:00" /> ...
Elements required to render a Twitter Card when sharing a web page on Twitter post:
/index.html
<!DOCTYPE html> <html lang="en"> <head> <!-- content can be "summary" or "summary_large_image" --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:url" content="https://garden.bradwoods.io/notes/global-state" /> <meta name="twitter:title" content="Global State in Next.js using XState" /> <meta name="twitter:description" content="How to create global state in Next.js using XState." /> <meta name="twitter:creator" content="@bradwoodsio" /> <meta name="twitter:image" content="https://garden.bradwoods.io/ogImages/globalState.png" /> <meta name="twitter:image:alt" content="How to create global state in Next.js using XState." /> ...
Elements required to render a share card when sharing a web page in a LinkedIn post:
/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta property="og:url" content="https://garden.bradwoods.io/notes/global-state" /> <meta property="og:title" content="Global State in Next.js using XState" /> <meta property="og:description" content="How to create global state in Next.js using XState." /> <meta property="og:image" content="https://garden.bradwoods.io/ogImages/globalState.png" /> ..
Publish date
For a LinkedIn post to register a publish date, a time element needs to be on the page with a datetime
attribute.
Its value needs to be in ISO 8601 format.
/index.html
<!DOCTYPE html> <html lang="en"> ... <body> <time datetime="2021-12-10T11:00:00+11:00">Dec 2021</time> ...
To convert a date into this format, use .toISOString()
:
Console
const date = "2020-07-04"; const formatted = new Date(date).toISOString(); console.log(formatted);
Image Size
Twitter's documentation details minimum and 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 og:image:height
og:image:height
values.
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):


Design
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).
