Tag Archives: HTML

HTML Headers for Social Media – Meta Information

1 Reply

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>
<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.