Written by James McDonald

February 20, 2014

Many different interests on the web want their own Web Metadata Protocols and Schemas to allow web site operators to present data to them so they can easily place it on their pages whether it’s social networks, search engines, browsers, mobile devices there are protocols and schemas that you can embed to have a specific icon, some text or an image appear on their platforms.

Aparently Facebook uses the Open Graph Protocol http://ogp.me/ this allows you to specify the content that will be seen in the Facebook social graph. So you have to embed custom meta tags into your HTML head.

<html prefix="og: http://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="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Google likes you to embed http://Schema.org markup so it can place the sometimes seemingly random text on your webpages into the right search categories.

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

iPhone wants it’s own custom meta tags in the head of your HTML so you can bookmark the site with a nice icon:

 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://example.com/icon_button.png" />

Internet Explorer wants custom input into the head too:

<!--[if (gt IE 9)|!(IE)]>--> <html class="w3" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <!--[endif]-->

<!--[if lte IE 6]>    <html class="ieAny ie6" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#">     <![endif]-->
<!--[if IE 7]>    <html class="ieAny ie7" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#">     <![endif]-->
<!--[if IE 8]>    <html class="ieAny ie8" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#">     <![endif]-->
<!--[if IE 9]>    <html class="ieAny ie9" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#">     <![endif]-->

 

 

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…

Network speed test host to host

On Ubuntu / Debian apt-get install iperf3 On Windows download it from https://iperf.fr/iperf-download.php#windows Make...

Clear HSTS Settings in CHrome

Open chrome://net-internals/#hsts enter the domain in the query field and click Query to confirm it has HSTS settings...