Opengraph metacrap

Note date 11 May, 2020
Tags html
👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="" />
    <meta name="description" content="" />

    <!-― facebook open graph tags -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:title" content="" />
    <meta property="og:description" content="" />
    <meta property="og:image" content="" />

    <!-― twitter card tags additive with the og: tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:domain" value="" />
    <meta name="twitter:title" value="" />
    <meta name="twitter:description" value="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" value="" />
    <meta name="twitter:label1" value="" />
    <meta name="twitter:data1" value="" />
    <meta name="twitter:label2" value="" />
    <meta name="twitter:data2" value="" />

    <link href="style.css" rel="stylesheet" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  </head>
</html>

Everything you ever wanted to know about unfurling but were afraid to ask /or/ How to make your site previews look amazing in Slack

Facebook: https://developers.facebook.com/docs/sharing/webmasters

https://sproutsocial.com/insights/social-media-image-sizes-guide/

Metatags.io

Metatags.io is a very useful service to validate your metatags but also to generate the code needed for them too.

← Back home