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…

Squarespace Image Export

To gain continued access to your Squarespace website images after cancelling your subscription you have several...

MySQL 8.x GRANT ALL STATEMENT

-- CREATE CREATE USER 'tgnrestoreuser'@'localhost' IDENTIFIED BY 'AppleSauceLoveBird2024'; GRANT ALL PRIVILEGES ON...

Exetel Opt-Out of CGNAT

If your port forwards and inbound and/or outbound site-to-site VPN's have failed when switching to Exetel due to their...