Social Meta Tags & Validators (Facebook debugger, Twitter card validator, LinkedIn post inspector)

Just like meta tags, social media tags help us to enhance our presence when we share our web page links in social media page. Social media tags include open graph tags for Facebook & LinkedIn and Twitter card for Twitter.

Open Graph Meta Tags

As an example, the following is the Open Graph protocol markup for Neoito, a web development company's website:

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Lightning Fast Web and Mobile Apps | Neoito" />
<meta property="og:description" content="We create lightning fast web, mobile & desktop experiences. Reactive development with great user experiences so your customers keep coming back for more. Our services include technology consulting for startups, digital innovation for enterprises, app development and digital marketing." />
<meta property="og:image" content="https://www.neoito.com/images/Build_the_products_of_the_future.png" />
<meta property="og:url" content="https://www.neoito.com" />
<meta property="og:site_name" content="Neoito" />

Here's Facebook's guide on og:tags https://developers.facebook.com/docs/sharing/webmasters/

Facebook debugger (open graph preview)

Facebook for developers have this handy tool to check the preview of an URL. The tool is available at https://developers.facebook.com/tools/debug/sharing/

Sharing Debugger is used to see the information that is shown when your website content is shared on Facebook, Messenger and other places. The Batch Invalidator will let you refresh this information for multiple URLs at the same time. Open Graph markup lets you take control over how your website content appears to others.

Here's the preview of Neoito website when validated with Facebook Debugger.

LinkedIn post inspector

LinkedIn allows users to preview the information shown when sharing a link in their platform using LinkedIn post inspector tool.

Take a look at the preview of Neoito's website when using LinkedIn post inspector tool.

Twitter card validator

Twitter's documentation on optimize tweets with cards will help you to implement the Twitter cards.

Here's the sample code of Neoito twitter card.

<html>
<head>
......
......
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@neoitocom" />
<meta name="twitter:description" content="We create lightning fast web, mobile & desktop experiences. Reactive development with great user experiences so your customers keep coming back for more. Our services include technology consulting for startups, digital innovation for enterprises, app development and digital marketing."/>
<meta name="twitter:title" content="Lightning Fast Web and Mobile Apps | Neoito" />
<meta name="twitter:image" content="https://www.neoito.com/images/Build_the_products_of_the_future.png" />
......
.....
</head>

Twitter card is validated using Twitter card validator

and the preview is shown below.

Recommended  images size for your social media accounts of company pages. Updated on December 2019.  

Social Media Profile Banner Shared link Other
Facebook 180 x 180 pixels 820 x 312 pixels 1,200 x 628 pixels 1,200 x 717 pixels(Highlight image - Milestones)
LinkedIn 300 x 300 pixels 1536 x 768 pixels 1104 x 736pixels -----
Twitter 400 x 400 pixels 1,500 x 500 pixels ----- -----
Instagram 110 x 110 pixels ----- ----- 1080 x 1080 pixels(Photos),1080 x 1920 pixels (stories)


Subscribe to newsletter
Need more tech news? Tune in to our weekly newsletter to get the latest updates