Left Arrow

Notes

Share Web Page

The icon of the Adeptus Mechanicus. A cog with a skull at the center.

Table of Contents

Simple geometric shapes arranged to look like a social media news feed.

Sharing a Web Page

Last Tended: 

Status: decay

A hexagon behind 3 circles.

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:

A twitter post featuring a wireframe of a sphere.

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" />
      ...
A bird.

Twitter

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." />
      ...
The letter 'in' in a square.

LinkedIn

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():

/index.js

Console

const date = "2020-07-04";
const formatted = new Date(date).toISOString();
console.log(formatted);



A vertical & horizontal line with arrows on each end.
Image Size
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 og:image:height og:image:height values.
A Twitter 1200 x 600px share image (cut-off at the sides):
A twitter post featuring a wireframe of a sphere.
A LinkedIn 1200 x 600px share image (cut-off at the sides):
A LinkedIn post featuring a wireframe of a sphere.
A Twitter 1200 x 627px share image (not cut-off):
A twitter post featuring a wireframe of a sphere.


A coffee machine.
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).
A twitter post featuring a wireframe of a sphere.


A space ship's docking bay with various equipment.
Resources
Tools
Facebook Sharing Debugger
LinkedIn Post Inspector
Twitter Card Validator
Support Me
The Weighted Companion Cube from Aperture
Where to Next?
Notes
    
  │
  └── HTML
        
  │
  └── Head
            
  │
  ├── Favicon
            
Arrow pointing down
YOU ARE HERE
            
  │
  └── Share Web Page
A sci-fi robot taxi driver with no lower body