HTML Headers for Social Media – Meta Information

This entry was posted Thursday, 30 August, 2012 at 1:32 am by Mario Lurig

It seems that markup is getting more and more important on the web today, especially if you want your pages to show up just right when your visitors click that magical share button. To that end, here is a quick sample of what I stick at the top of every HTML page before I ever get to the body tag.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>PAGE NAME | SITE NAME</title>
<meta itemprop="name" content="PAGE NAME | SITE NAME"/>
<meta property="og:title" content="PAGE NAME | SITE NAME"/>
<meta property="og:site_name" content="PAGE NAME | SITE NAME"/>
<meta name="keywords" content="LIST 5-8 KEYWORDS HERE" />
<meta name="description" content="THIS SHOULD BE YOUR DESCRIPTION; LESS THAN 160 CHARACTERS." />
<meta itemprop="description" content="THIS SHOULD BE YOUR DESCRIPTION; LESS THAN 160 CHARACTERS."/>
<meta property="og:description" content="THIS SHOULD BE YOUR DESCRIPTION; LESS THAN 160 CHARACTERS."/>
<meta property="og:url" content="http://www.WEBSITE.com/HTMLFILENAME.htm"/>
<meta property="og:image" content="http://www.WEBSITE.com/IMAGENAME.jpg"/>
<meta itemprop="image" content="http://www.WEBSITE.com/IMAGENAME.jpg"/>
<meta name='viewport' content='width=930, initial-scale=1, maximum-scale=1, user-scalable=1' />
<meta name="author" content="Mario Lurig - http://mariolurig.com/" />
<link rel='stylesheet' href='MYCSSFILE.css' type='text/css' />
</head>

The very first line is for IE9 compatibility, forcing it to display things properly (I believe any doctype declaration will work). The remaining lines are self-explanatory with one exception: the viewport option decides how your page will look in a mobile browser upon first load.

You can double-check what Facebook sees (or refresh the cache) using their debug tool.

Share and Enjoy:
  • Facebook
  • Twitter
  • Reddit
  • StumbleUpon
  • Digg
  • del.icio.us
  • Tumblr
  • PDF

1 Comment to HTML Headers for Social Media – Meta Information

  1. John M Fecko says:

    August 30th, 2012 at 4:31 pm

    Do the og tags refer to open graph? If I linked to the page above on Facebook, it would use the og tags to auto create the snippet, right?

Leave a comment