Microsoft’s operating system Windows 8 raises a lot of emotions – some praising it loud, others hate at first sight. All because of the system layer called Modern UI, also known as Metro, directed mainly to the users of mobile devices with touch screens. The introduction of the touch user interface for general purpose operating system, confirms the IT trend: soon the internet almost entirely become the domain of mobile devices. By the way – Metro in Windows Phone is in my humble opinion one of the most comfortable user interfaces created ever (and as mobile applications developer i must say that Microsoft gives developers most comfy developing tools). Not about Windows i’ll be going to write here, but about the aforementioned Modern UI, as that it introduces one important feature for all web owners and webmasters – the possibility of pinning sites directly to Metro desktop in Windows 8 or home screen in Windows Phone 8 as a tile – exactly same tile as native application tile. Tile can be either static (display graphics and page title) or active (eg. shortcuts display the latest blog posts). It’s worth to keep in mind about this possibility, because a few lines of xml code helps users of Windows 8 and Windows Phone 8 return to your page – they do not need to opening a web browser. Back to your web site it’s simple as just tap in a tile on desktop.

OK – how to do this? Not as complicated 🙂
You can put all your META tags in the HEAD and just have a pile of them if you want, which is fine:

<meta name="application-name" content="Piotr Ciesielski's Blog"/>
<meta name="msapplication-TileColor" content="#83382b"/>
<meta name="msapplication-square70x70logo" content="/tiny.png"/>
<meta name="msapplication-square150x150logo" content="/square.png"/>
<meta name="msapplication-wide310x150logo" content="/wide.png"/>
<meta name="msapplication-square310x310logo" content="/large.png"/>
<meta name="msapplication-notification" content="frequency=180;polling-uri=http://notifications.buildmypinnedsite.com/?feed=https://ciesielskipiotr.com/feed;id=1;cycle=1"/>

In above example it was used www.buildmypinnedsite.com site, which makes tiling easier 🙂
If you want a tidy META area, just move this stuff into a static XML file:

<!-- IE11 pinning and live tiles -->
<meta name="application-name" content="Piotr Ciesielski's Blog"/>
<meta name="msapplication-config" content="/browserconfig.xml" />
<tile>
  <visual lang="en-US" version="2">
    <binding template="TileSquare150x150Text04" branding="logo" fallback="TileSquareImage">
      <text id="1">Websites Live Tiles is very useful for binding to filtered Observable Content on Windows (Phone) 8</text>
    </binding>
    <binding template="TileWide310x150ImageAndText01" branding="logo" fallback="TileWideImage">
      <image id="1" src="http://SOURCE PATH TO YOUR IMAGE/image_b5516dd4-31b0-422b-8742-9bc1fbfa5d12.png"/>
      <text id="1">CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8</text>
    </binding>
    <binding template="TileSquare310x310TextList02" branding="logo" contentId="http://SOURCE PATH TO YOUR IMAGE/PermaLink.aspx?guid=11a2bbd4-261b-4ba2-93cc-cdbdc3de6825">
      <text id="1">CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8</text>
      <text id="2">SCREENCASTS: Live tiles for web - learn how to!</text>
      <text id="3">IE10 and IE11 and Windows 8.1 and __doPostBack</text>
    </binding>
  </visual>
</tile>

If You use for your site WordPress or Drupal there is plugins for make life easier:

Live tiles WordPress plugin
Live tiles Drupal extension