1. Home»
  2. Blog»
  3. Social Media»
  4. Social Media Meta Tags

Social media meta tags like open graph meta tags, schema mark-up and twitter card meta tags helps to fetch page title, image, description, web page publisher, article writer, site name and page URL when we share any web page URL or link in social media sites like Facebook, Twitter, Google+, LinkedIn and Pinterest.

If you are using html social media meta tags and promoting your web page in social networking sites, your audience, friends or users can see your page title, image and short description which may help to engage more audience on your site.

It's easy to embed social media Meta tags template to your web pages. We are going explain all social Mata tags here. You can just copy and paste social media Meta tags in your web page. You can use our open graph meta tags generator tool to generatate open graph meta tags.

Open Graph, Twitter Card and Schema Markup Meta Tags for Social Media

Open Graph Meta Tags For Facebook, Linkedin And Pinterest

Open graph Meta tags are a set of guideline which is used to coordinate any web page into the graph. To turn your page into graph objects, you need to add basic open graph tags to your page.

Some social media sites like Facebook, LinkedIn and Pinterest fetch rich objects using open graph Meta tags. The four open graph required properties for every web page are:

  1. og:type : The type of your web page. It's first priority to describe the type of web page.
  2. og:title : The title is required property to appear your web page title in social media sites.
  3. og:image : The required property to represent your object within the graph.
  4. og:image : The canonical URL of your web page to used as its permanent ID in the graph.

<meta property="og:type" content="article" />
<meta property="og:title" content="web page title" />
<meta property="og:description" content="web page description" />
<meta property="og:url" content="web page url i.e. http://example.com/pagename" />
<meta property="og:image" content="image url i.e. http://example.com/image.png" />

Twitter Card Meta Tags

Using Twitter Meta cards, you can link rich media, text, images and videos action to your tweets that ride quality traffic to your web pages.

You can embed Twitter card mark-up to your pages by adding few lines of html code. Some required properties of Twitter Meta card for every page are:

  1. twitter:card : Web page type of card i.e. summary, photo, or video.
  2. twitter:title : Web page title to display in the Twitter Card.
  3. twitter:description : Web page short description to display in the Twitter Card.
  4. twitter:image : Image URL to display object in the Twitter Card.
  5. twitter:url : The canonical URL of your web page to drive traffic.
  6. twitter:site : Your wesite's twitter profile username with '@' prefix.
  7. twitter:creator : Twitter profile username of web page creator with '@' prefix.

<meta name="twitter:card" content="card type i.e. Summary Card, App Card, Player Card" />
<meta name="twitter:title" content="web page title" />
<meta name="twitter:description" content="web page description" />
<meta name="twitter:image" content="image url i.e. http://example.com/image.png" />
<meta name="twitter:site" content="website twitter username i.e. @bareilly_design" />
<meta name="twitter:creator" content="Creator twitter username i.e. @mdashrafmalik" />

Schema Mark-up Meta Tags For Google+

Schema mark-up is semantic vocabulary that we can embed on our web page to advice the search engines to return more descriptive results for users.

Google plus fetches schema mark-up meta tags to extract web page type, title, description, image and URL in Google+ share snippet. You must have to update html tag with itemscope itemtype="property" while embedding schema mark-up in your web page. Google+ required four properties for best snippet in Google+ share network are:

  1. itemtype="property" : Is use to describe web page type.
  2. itemprop="name" : Is use to describe web page title.
  3. itemprop="description" : Is use to describe page description.
  4. itemprop="image" : Is use to describe image thumbnail.

<html itemscope itemtype="http://schema.org/{ page type i.e. blog, book, article }">
<meta itemprop="name" content="Title Here" />
<meta itemprop="description" content="page description here" />
<meta itemprop="image" content="http://example.com/image.png" />

Copyright @2015 Web Developer Bareilly