Previews for your Website

The Open Graph Protocol (OGP)

<html lang="en-us" prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:type" content="website" />
<meta property="og:title" content="Title" />
<meta property="og:description" content="A description" />
<meta property="og:url" content="url_of_current_page" />
<meta property="og:image" content="http://example.de/preview_picture">
</head>
  • The prefix in the <html ..> definition is a RDFa extension, annotating the use of additional semantic vocabularies. Most applications will preview your web pages fine without this information. In my tests, only Telegram seems to actually require it.
  • The usage of both og:title and og:description seems to be application dependent, some applications will prefer the normal meta-fields "title" or "description" if they exist. Most unfortunately, some will also show an empty description once you added a single og: tag but no og:description - even if <meta name=description ...> exists. Therefore I would suggest always using the same content in both <meta type=description ..> and the OGP-tag.
  • Some applications require og:url to be set and will not display an image or expand the link if it isn't.
  • Concerning og:image: While most applications will accept both a relative link (if og:url was provided) and an absolute link (including protocol and domain), using a fully qualified absolute link, seems to be the universally accpeted format. You may define multiple pictures and resolutions here, but I found that most applications re-render the picture anyway so you will be fine with just one moderately sized picture (~1000-1600px). The extension of the picture doesn't matter and you don't have to give an image type, as long as your server sends the correct MIME-type. Some formats won't work with some applications, most notably webp and svg are not widely supported.

Structured Data

<script type="application/ld+json">
{
"@context": "http://www.schema.org",
"@type": "Person",
"name": "Your Name",
"url": "https://example.com",
"sameAs": [
"https://github.com/FAUSheppy_",
"https://twitter.com/its_a_sheppy",
"https://blog.atlantishq.de/"
]
}
</script>
<script type="application/ld+json">
{
"@context": "http://www.schema.org",
"@type": "Person",
...
}
</script>
<script type="application/ld+json">
{
"@context": "http://www.schema.org",
"@type": "CreativeWork",
"author: "Your Name",
"headline": "A title or headline",
"description": "A description",
"thumbnailUrl": "url_to_image",
"image": "url_to_image"
}
</script>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store