Tag: meta

Apple IOS 6 Smart App Banners

If you have made an investment in creating a device specific application in addition to a traditional web application, there is also a good chance that you want to drive your users (customers) to use the native application.

With the release of Apple IOS 6 in September 2012, this ability was made possible with the use of a simple HTML <meta> tag on your web page. You will need to replace the x’s with your app-id from the Apple Store.

<meta name="apple-itunes-app" content="app-id=xxxxxxxxxx" />

REFERENCES:

Google ChromeFrame

There was some debate back when this was first revealed in 2009, but the use of ChromeFrame is still relevant for some organizations that are stuck on older browsers for legacy applications.


<meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- this is for all versions of IE -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE6" /><!-- this is for IE6 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE7" /><!-- this is for IE7 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE8" /><!-- this is for IE8 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE9" /><!-- this is for IE9 and lower -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE6" /><!-- this is for IE9 and lower, passes Edge to others -->

NOTES:

  1. Installation can be done without Administrative rights on the Windows OS.
  2. Installation will append the ‘chromeframe’ version to the ‘User-Agent’ HTTP header sent by the browser to allow it to be parsed.

REFERENCES:

DNS Prefetching

DNS is much like a phone book for the internet. For each domain name (or subdomain like ‘www’), there is an IP address that resembles a phone number. Getting the matching number for each domain can take some time and make your site appear slow, particularly on mobile connections. Fortunately, you can pre-request this information and speed up your site in most cases.

To enable a domains DNS lookup to be performed in advance of the request, you can add a single line to the <head> section of your page.

<link rel="dns-prefetch" href="//giantgeek.com" />

If you want to explicitly turn on (or off) this behavior, you can add one of the following, or their HTTP Header equivalents:

<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta http-equiv="x-dns-prefetch-control" content="off" />

This is supported in all modern browsers:

  • Firefox 3.5+
  • Safari 5.0+
  • MSIE 9.0+

If should be noted that a similar method can be used to prefetch as page, but I will save that for a different article:
<link rel="prefetch" href="http://www.skotfred.com/" />

REFERENCES:

Link ‘canonical’ tag

This tag is applied to the page to define the preferred URL to be stored in most search engines, and reduces the odds that heuristics will be used and leave you will multiple listings of duplicated content (example: http://www.example.com/ vs. http://example.com/)

It can also be applied so that the URL’s exposed by search engine results do not expose the underlying technology such as PHP/JSP/ASP in the filenames)
<link rel="canonical" href="http://www.giantgeek.com/" />

META Tag ‘MSThemeCompatible’

Okay, so this one’s a little old, and I just found it while looking at some of Microsoft Update’s HTML source, it appears to be relevant for MSIE6 and newer and may be responsible for some interesting styling and behaviour of form components.

A quick search for it turns up lots of discussions about other browers such as Firefox being effected if the value is not defined… as such it’s likely a good idea to define it in your pages to be sure.

An old MSDN entry reads…

When running on Windows XP, Internet Explorer 6 and the content displayed in it sports a look and feel that matches the Windows XP platform. You can opt to have your HTML content not take on the same look as the operating system for elements such as buttons and scroll bars, by adding the following META tag:
<meta http-equiv="MSThemeCompatible" content="no" />

Setting this will disable theme support for the document. Some background on this, Windows XP (MSIE6) allows for the use of themes for the operating system to change the general color scheme of many elements.
As such, many HTML components (such as SELECT dropdowns, BUTTONS and INPUT fields ‘MAY’ also be effected if you don’t explicitly prevent it in your code.

There was some support for this in Mozilla Firefox builds for Windows, as such, while I’d normally recommend using a conditional comment, I’m torn in this case.

Cheers

NOTE: this process is obsolete, from what I can gather it was only supported in MSIE6, and possibly MSIE7.

Use of this tag will disable the Image Toolbar (normally accessed via right-click) within MSIE. Typically it is enabled whenever an image larger than 130×130 is displayed.

Implementation:
Add the following to the <head> section of your webpage(s):
<meta http-equiv="imagetoolbar" content="false" />

Alternately, you COULD use some proprietary MSIE attributes on the <img /> tag.
<img src="..." galleryimg="false" />

Even when you use the META tag to disable this feature for all images, you can explicitly re-enable it with the following proprietary tag…
<img src="..." galleryimg="true" />

References:

NOTE: this is an obsolete practice, and should be removed unless you plan to support beta versions of MSIE6.

The story behind this tag is one of virtue. Microsoft, as they do TOO often, added a ‘feature’ in beta versions of Windows XP (MSIE 6.0) that enabled the browser itself to analyze the content on a given page, and insert links to other websites. This was "e;spun" as being good the the visitors of your website, because they could be exposed to related products or services. Unfortunately, the webmaster and site owners had no say in what content was being linked or to where… which could be a competitor!

This tag was added as a method to prevent these "Smart Tags" from operating on websites… in the end, Microsoft did not leave this feature (enabled?) in the released version of Internet Explorer 6!

BTW, there are some JavaScript libraries today that offer similar functionality, but they are not related to this tag.

Implementation:
Add the following to the <head> section of your webpage(s):
<meta name="MSSmartTagsPreventParsing" content="TRUE" />

REFERENCES:


GeoTags

To build on my recent post on ‘geoURL’, there’s also another system available known as GeoTags. Adding your site to their list is also trivial…

1. The “hardest” step – find your Latitude and Longitude, several sites like Google Maps make this simple if you don’t have access to a GPS reciever…

2. Add the following to the <head> section of your page(s):
<meta name="geo.position" content="41.937891;-88.142111" />
<meta name="geo.placename" content="Carol Stream" />
<meta name="geo.region" content="US-IL" />

NOTE: The above entries are my own, yours should be different.

3. After you’ve uploaded the change, submit your site at the following URL:
http://geotags.com/

FYI, It appears that they’ve also worked out a way to define your location in an RSS Feed… more on that later!

PICS Implementation Guide

Platform for Internet Content Selection (PICS)

This was originally designed to help parents and teachers control what children access on the Internet, but it also facilitates other uses for labels, including code signing and privacy. The PICS platform is one on which other rating services and filtering software have been built.’

References:

HTTP Headers (optional):


Protocol: {PICS-1.1 {headers PICS-Label}}
PICS-Label: (PICS-1.1 'http://www.weburbia.com/safe/ratings.htm' l r (s 0))

Example HTML:


<html>
<head>
<title>example</title>
<meta http-equiv="PICS-Label" content="(PICS-1.1 'http://www.weburbia.com/safe/ratings.htm' l r (s 0))" />
</head>
<body>
...
</body>
</html>