Social preview tags in HTML

Open Graph and Twitter tags decide what a shared link looks like.

<meta property="og:title" content="Type faster in SQL">
<meta property="og:description"
      content="Three tours, forty snippets, real formatting.">
<meta property="og:image" content="https://typestar.io/og/sql.png">
<meta property="og:url" content="https://typestar.io/tours/sql">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@typestar">

How it works

1. og:image wants an absolute URL, around 1200 by 630.
2. og:type is website for pages, article for posts.
3. The Twitter card tags fall back to the Open Graph ones.

The run, in numbers

Lines

8

Characters to type

425

Tokens

63

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 50 seconds.

Type this snippet

Step 2 of 6 in Metadata, step 18 of 23 in Semantics & metadata.

← Previous Next →