There are several meta tags that you should have on your site. While social media sites can crawl your site and guess what the page is about, it’s much easier if you provide them with that information. When you need to create multiple titles, and descriptions, and images, it can make content creation dreadful.

I think these meta tags add too much to the head section of the HTML. It would be nice if we could provide this information with JavaScript files.

tl;dr gist that you can copy & paste.

Facebook

<meta property="og:type"        content=""><!-- article  -->
<meta property="og:title"       content=""><!-- 60 chars -->
<meta property="og:description" content=""><!-- 150 char -->
<meta property="og:image"       content=""><!-- 1200x630 -->

You can test your meta tags with Facebook’s sharing debugger. Visit Facebook’s open graph markup page to learn more about the requirements.

Twitter

<meta name="twitter:card"        content="">
<meta name="twitter:site"        content="">
<meta name="twitter:creator"     content="">
<meta name="twitter:title"       content="">
<meta name="twitter:description" content="">
<meta name="twitter:image"       content="">

The Twitter card validator is a useful tool for debugging issues with your cards. Twitter cards documentation is helpful if you run into a problem.

Google

<meta itemprop="name"        content="">
<meta itemprop="description" content="">
<meta itemprop="image"       content="">

Google structured data testing tool.

Additional Open Graph meta tags

<meta property="article:published_time" content=""><!-- 2020-11-28T05:59:00+01:00 -->
<meta property="article:modified_time"  content=""><!-- 2020-11-28T19:08:47+01:00 -->
<meta property="article:section"        content="">
<meta property="article:tag"            content="">

Copy & Paste