Sharing content using META tags
Meta Tags
Meta tags in HTML documents provide metadata/information about a web page, or the content it contains. They must be declared within head section of the web page only.
They are used to specify page description, keywords (for search purposes), author information or any other metadata giving additional information about the page.
Meta tags also play an important role in the field of marketing research known as search engine optimization(SEO), where search engines like Google gives sites better ranking based on the presence of meta tags.
Examples:
Defining keywords for search engines:
[xml]
<meta name="keywords" content="Javascript, JS, jQuery, HTML, Frontend, UI">
[/xml]
Defining description of a web page
[xml]
<meta name="description" content="Blog on meta tags">
[/xml]
Defining author of a page
[xml]
<meta name="author" content="Rishabh Dixit">
[/xml]
Social meta tags
Social meta tags allow social site’s crawler to extract the information about the page when it’s being shared, liked or recommended. So, one can set these tags’ content and decide what the crawler should extract from this page instead of fetching information by its own based on their particular algorithm for fetching information from the page when no meta tags are present.
In that case, sometimes random content gets shared about a page which was not expected. So to be specific about the content that need to be shared or to be picked by the crawler’s of social sites we can set their specific meta tags.
For example Facebook uses open graph meta tags, which their crawler first see’s to obtain the information about a page being shared over facebook from a particular user’s site or a non-Facebook site. Also, these tags enable a web page to become a rich object in a social graph.
Some of the basic Open graph tags:
- og:title – The title of the object as it should appear within the graph
- og:image – An image URL which should represent the object within the graph
- og:description – A precise one to two sentence description of the object
- og:type – The type of the object. This represents a website. eg: For specific pages within a website, the object type “article” should be used
- og:url – The canonical URL of the object that will be used as its permanent ID in the graph, eg: “http://www.imdb.com/title/tt011750/”
[xml]
<!–og:title –>
<meta property="og:title" content="Blog on Meta Tags">
<!–og:image –>
<meta property="og:image" content="https://p.burst.zone/55a0ae04b8dddfde26760a79.full.jpg">
<!–og:description –>
<meta property="og:description" content="Blog describing meta tags, their purpose and relevance in a web page or web site">
<!–og:type –>
<meta property="og:type" content="article">
<!–og:url –>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500">
[/xml]
Some of the Optional meta tags:
- og:site_name – If the object being shared is part of a larger web site, the name should be displayed for the overall site
- og:locale – The locale represents language_TERRITORY. Default is en_US
- og:locale:alternate – An array of other locales this page is available in
- og:audio – A URL to an audio file for this object
- og:video – A URL to a video file for this object
[xml]
<!–og:site_name –>
<meta property="og:site_name" content="ToTheNew">
<!–og:locale –>
<meta property="og:locale" content="en_GB">
<!–og:locale:alternate –>
<meta property="og:locale:alternate" content="es_ES">
<meta property="og:locale:alternate" content="fr_FR">
<!–og:audio –>
<meta property="og:audio" content="https://a.burst.zone/55a78bd10add765c2e4ab738.mp3">
<!–og:video –>
<meta property="og:video" content="https://v.burst.zone/55a8d1fef51a5d6c7f8d0d2a.mp4">
[/xml]
Similarly Twitter uses Twitter card tags, which their crawler uses to extract information about the page.
Some of the Twitter meta tags are:
- twitter:title – Same as og:title
- twitter:url – Same as og:url
- twitter:site – @username of website.
- twitter:description – Description of content(maximum 200 characters). Similar to og:description
- twitter:creator – @username of content creator
- twitter:image – URL of image to use in the card. Image must be less than 1MB in size. Similar to og:image
- twitter:card – Twitter cards allow users to attach rich photos, videos and media experience to their tweets when shared via their sites.
[xml]
<!–twitter:title –>
<meta name="twitter:title" content="Blog on Meta Tags">
<!–twitter:url –>
<meta name="twitter:url" content="http://www.imdb.com/title/tt0117500">
<!–twitter:site –>
<meta name="twitter:site" content="@ToTheNew">
<!–twitter:description –>
<meta name="twitter:description" content="Blog describing meta tags, their purpose and relevance in a web page">
<!–twitter:creator –>
<meta name="twitter:creator" content="@Rishabh">
<!–twitter:image –>
<meta name="twitter:image" content="https://p.burst.zone/55a0ae04b8dddfde26760a79.full.jpg">
<!–twitter:card –>
<meta name="twitter:card" content="CARD_TYPE">
[/xml]
Google+ makes use of the tags in one of the following four ways, listed in order of precedence:
- Schema.org microdata : If the page is annotated with schema.org microdata, the google+ Snippet
will compose of the name, image and description properties found on any schema.org type. If multiple schema.org
itemscopes are defined on a web page, the google+ Snippet is created from the itemscope that is nearest the top
of the page’s source code.[html]
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Blog on Meta Tags</h1>
<img itemprop="image" src="{IMAGE_URL}"/>
<p itemprop="description">Blog describing meta tags, their purpose and relevance in a web page.</p>
</body>
[/html] - Open Graph protocol : If the page contains Open Graph properties for the title, image and
description, they will be used for the Google+ Snippet - Title and meta description tags : If the page’s <head> element contains <title> and <meta name=”description”… /> tags, the google+ Snippet uses the title and the content attribute of the description meta tag for the snippet description. For image, an attempt is made to find a suitable image on that page
- Best guess from page content : If none of the previous data is present, Google parses the page
and attempts to find the best title, description and image
Hope this helps.
i am not able use property attribute in my meta tag, it says undefined attribute name “property”.