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
og:title- The title of your object as it should appear within the graph, e.g., "Movie name".og:type- The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.og:image- An image URL which should represent your object within the graph.og:url- The canonical URL of your object that will be used as its permanent ID in the graph, e.g.,www.movie.com/.og:description- A brief description of the content, usually between 2 and 4 sentences.
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 |
|---|---|---|---|---|
| 180 x 180 pixels | 820 x 312 pixels | 1,200 x 628 pixels | 1,200 x 717 pixels(Highlight image - Milestones) | |
| 300 x 300 pixels | 1536 x 768 pixels | 1104 x 736pixels | ----- | |
| 400 x 400 pixels | 1,500 x 500 pixels | ----- | ----- | |
| 110 x 110 pixels | ----- | ----- | 1080 x 1080 pixels(Photos),1080 x 1920 pixels (stories) |
Continue Reading…
Continue Reading…
Continue Reading…
