Twitter Card and OpenGraph

Twitter Card Tutorial

Here's a basic minimal twitter card example. In this example, you add a thumbnail to your site.

add the following in the html header:

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="something" />
<meta name="twitter:image" content="https://xahlee.info/bfS8V.jpg" />

• Card type is required. That's the line containing twitter:card
• Title also required.
• Image url must be full, not relative.

Reference

• https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards

OpenGraph Tutorial

<meta property="og:title" content="Glove80 Keyboard" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://xahlee.info/kbd/glove80_keyboard.html" />
<meta property="og:image" content="http://xahlee.info/kbd/i2/glove80/glove80_keyboard_20230126_599-s35.jpg" />

Reference

• https://ogp.me/

History of Twitter Card and OpenGraph

damn stupid twitter card.

twitter under jack dorsey, created twitter card, so that your site will have a preview image and title and short summary etc when link is posted to twitter. by adding a bunch of meta tags.

but the tech exist, from the facebook zukerbug skum, and is call “open graph”. of course, jack dorsey refuse to use it so he create something special just for twitter, and is called “twitter card”.

and but, twitter card spec is idiotic. it requires a title tag, and a “type” tag (type being “summary” which contains a image thumbnail, or large image, or app, or for video)