#SEO friendly #MetaTag that you should have! #HTML #JavaScript #Web

By Jun - Support me on Amazon

You should label and describe your app using meta tags which are in the <head> tag of your webpage. Check out Manifest.json, Facebook Open Graph, Twitter Card and schema for Google+.

Manifest.json

It provides information about your web app which is used in progressive web app.
Definition of a progressive web app taken from MDN:
`Web applications that can be installed to the homescreen of a device without needing the user to go through an app store, along with other capabilities such as  being available offline and receiving push notifications.`


{
  "short_name": "Language Diary",
  "name": "Language Diary - Programming Language and Natural Language",
  "description": "This is a blog where I share my experience about programming and natural languages.",
  "default_locale": "en",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Facebook Open Graph

Open Graph protocol
Facebook Open Graph protocol

These 4 tags are the minimum requirement.

* 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., "http://www.imdb.com/title/tt0117500/".

These meta tags label your webpage as one of the Open Graph object.

<meta property="og:locale" content="en_US"/>
<meta property="og:title" content="Language Diary - Programming Language and Natural Language"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="This is a blog where I share my experience about programming and natural languages."/>
<meta property="og:url" content="http://www.language-diary.com"/>
<meta property="og:site_name" content="Language Diary - Programming Language and Natural Language"/>
<meta property="og:image" content="http://www.language-diary.com/cover-image.jpg"/>

Note

1) Make sure that your og:url contains http / https transfer protocol.
2) Make sure that your image is in absolute path and accessible when searched on a browser.

Twitter Card

Twitter Summary Card
Twitter Summary Card with Large Image

Summary Card
Twitter Summary Card

Note

1) The twitter summary card doesn't represent the actual image. It is supposed to be a small image on the left of the card description. It is stated by Andy Piper on StackOverflow that the image hasn't been updated yet.
2) You can only have either one type of the card: Summary Card with Large Image or Twitter Summary Card.

These meta tags describe your webpage when it is tweeted.

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:description" content="This is a blog where I share my experience about programming and natural languages."/>
<meta name="twitter:title" content="Language Diary - Programming Language and Natural Language"/>
<meta name="twitter:creator" content="@Juny_g711"/>
<meta name="twitter:site" content="@Juny_g711"/>
<meta name="twitter:image" content="http://www.language-diary.com/cover-image.jpg"/>
<meta name="twitter:image:alt" content="Language Diary - Programming Language and Natural Language"/>
<meta name="twitter:image:width" content="1309"/>
<meta name="twitter:image:height" content="874"/>

Google+

Google+ Snippet
Google+ Snippet

Schema describes your webpage when it is shared on GooglePlus.
You have embed the props within your content.
<body itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Shiny Trinket</h1>
  <img itemprop="image" src="{image-url}" />
  <p itemprop="description">Shiny trinkets are shiny.</p>
</body>

If it is impossible for you to embed these props in your content html tags, you can do it via meta tag though not recommended.

<meta itemprop="name" content="Language Diary - Programming Language and Natural Language">
<meta itemprop="description" content="This is a blog where I share my experience about programming and natural languages.">
<meta itemprop="image" content="www.language-diary.com/cover-image.jpg">

Use MetaTag with itemprop
Use MetaTag with itemprop

Bing Webmaster

You need to submit your webpage URL to Bing.

To verify your webpage, you can add a meta tag in the head tag of your webpage.

<meta content='27A39AA6C2E4587085F1BB0B900B6EEE' name='msvalidate.01'/>

There are three ways to get verified on Bing.
1) add a BingSiteAuth.xml to your webpage.
2) add a meta tag like the above into the head tag of your webpage.
3) add CNAME record to DNS


Verified on Bing
Verified on Bing Webmaster

Please let me know other platforms that I missed.  Thank you for reading!