DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Tikam Singh Alma
Tikam Singh Alma

Posted on

META Tags to boost SEO and Page Rankings

Meta tags are snippets of text that describe a page's content. With Open Graph Protocol meta tags are on steroids, whenever someone share links on Twitter or Whatsapp, we see website thumbnail, gif with description, that's what open graph protocol does to meta tags.

Meta tags are tags within the HTML code of your website that describe the different components of your site to search engines. These tags allow Bing or Google search algorithms to read descriptions of the makeup of your site.

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

Plain META Tags

<meta charset='utf-8'>
Enter fullscreen mode Exit fullscreen mode
<!-- title -->
<title>Β·Β·Β·</title>
<meta property='og:title'  content='Β·Β·Β·'>
<meta name='twitter:title' content='Β·Β·Β·'>

Enter fullscreen mode Exit fullscreen mode
<!-- url -->
<link rel='canonical'       href='http://Β·Β·Β·'>
<meta property='og:url'  content='http://Β·Β·Β·'>
<meta name='twitter:url' content='http://Β·Β·Β·'>

Enter fullscreen mode Exit fullscreen mode
<!-- description -->
<meta name='description'         content='Β·Β·Β·'>
<meta property='og:description'  content='Β·Β·Β·'>
<meta name='twitter:description' content='Β·Β·Β·'>

Enter fullscreen mode Exit fullscreen mode
<!-- image -->
<meta property="og:image"  content="http://Β·Β·Β·">
<meta name="twitter:image" content="http://Β·Β·Β·">
Enter fullscreen mode Exit fullscreen mode
<!-- ua -->
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
Enter fullscreen mode Exit fullscreen mode
<!-- viewport -->
<meta name='viewport' content='width=device-width'>
<meta name='viewport' content='width=1024'>
Enter fullscreen mode Exit fullscreen mode

Progressive web apps

Add to homescreen

<meta name='mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-capable' content='yes'>
Enter fullscreen mode Exit fullscreen mode
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
<!-- black | black-translucent | default -->
Enter fullscreen mode Exit fullscreen mode

Theme color

<meta name='theme-color' content='#ff00ff'>
Enter fullscreen mode Exit fullscreen mode

Android-only. See:Β Theme color

Manifest

<link rel='manifest' href='/manifest.json'>
Enter fullscreen mode Exit fullscreen mode

Android-only. See:Β Manifest

Icons

<!-- Minimal -->
<link rel='icon' type='image/png' href='favicon@32.png'>
<link rel='icon' sizes='192x192' href='icon@192.png'>
<link rel='apple-touch-icon' href='icon@152.png'>
<meta name='msapplication-square310x310logo' content='icon@310.png'>
Enter fullscreen mode Exit fullscreen mode
<!-- Apple -->
<link rel='apple-touch-icon' href='touch-icon-iphone.png'>
<link rel='apple-touch-icon' sizes='76x76' href='touch-icon-ipad.png'>
<link rel='apple-touch-icon' sizes='120x120' href='touch-icon-iphone-retina.png'>
<link rel='apple-touch-icon' sizes='152x152' href='touch-icon-ipad-retina.png'>
Enter fullscreen mode Exit fullscreen mode
<!-- Microsoft -->
<meta name='msapplication-square70x70logo' content='icon_smalltile.png'>
<meta name='msapplication-square150x150logo' content='icon_mediumtile.png'>
<meta name='msapplication-wide310x150logo' content='icon_widetile.png'>
Enter fullscreen mode Exit fullscreen mode

The Open Graph Protocol Meta Tags

Basic Metadata

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
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., "https://www.imdb.com/title/tt0117500/"
Enter fullscreen mode Exit fullscreen mode

Example

<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Enter fullscreen mode Exit fullscreen mode

Optional Metadata
The following properties are optional for any object and are generally recommended:

og:audio - A URL to an audio file to accompany this object.
og:description - A one to two sentence description of your object.
og:determiner - The word that appears before this object's title in a sentence. An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).
og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
og:locale:alternate - An array of other locales this page is available in.
og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".
og:video - A URL to a video file that complements this object.
Enter fullscreen mode Exit fullscreen mode

Example

<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" 
  content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />
Enter fullscreen mode Exit fullscreen mode

Example of Image thumbnail meta for social sharing

<!-- Primary Meta Tags -->  
<title>Meta Tags β€”Β Preview, Edit and Generate</title>  
<meta name="title" content="Meta Tags β€”Β Preview, Edit and Generate">  
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">  

<!-- Open Graph / Facebook -->  
<meta property="og:type" content="website">  
<meta property="og:url" content="https://metatags.io/">  
<meta property="og:title" content="Meta Tags β€”Β Preview, Edit and Generate">  
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">  
<meta property="og:image" content="https://aws-huddleup.s3.ap-south-1.amazonaws.com/meta-image.png">  

<!-- Twitter -->  
<meta property="twitter:card" content="summary_large_image">  
<meta property="twitter:url" content="https://www.yourwebsite.com/">  
<meta property="twitter:title" content="Website Title">  
<meta property="twitter:description" content="Website Description">  
<meta property="twitter:image" content="https://aws-s3.ap-south-1.amazonaws.com/meta-image.png">

Enter fullscreen mode Exit fullscreen mode

Use these website to create and preview meta tags live and test it.

References:

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.