Short time ago my great friend, Brigitte, asked me what code do I include into head section of html file when I work on some project. This is a common question, not just from SEO point of view. Today this question will finally be answered through this post to help and give more clarity not only Brigitte, but to all of you who are interested in this topic.
To begin, I will show you full snippet of head section from my online portfolio and then I will explain it line-by-line. The only thing I removed was Google Analytics code at the end.
HTML:
<head>
<meta charset="UTF-8">
<title>Alex Devero</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="handheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Portfolio and personal of Web Designer, developer and entrepreneur Alex Devero.">
<meta name="author" content="Alex Devero">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/html5doctor-reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="https://plus.google.com/+AlexDevero">
<!-- Facebook OpenGraph tags -->
<meta property="og:title" content="Alex Devero Web Designer & developer">
<meta property="og:type" content="website">
<meta property="og:description" content="Portfolio and personal of Web Designer, developer and entrepreneur Alex Devero.">
<meta property="og:image" content=""><!-- my photo -->
<meta property="og:url" content="">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Alex Devero">
<!-- Twitter cards tags -->
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@AlexDevero">
<meta name="twitter:title" content="Alex Devero Web Designer & Developer">
<meta name="twitter:description" content="Portfolio and personal of Web Designer, developer and entrepreneur Alex Devero.">
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("hgroup");
document.createElement("time");
</script>
<![endif]-->
<script src="js/modernizr.custom.15751.js"></script>
</head>
Now, let’s dissect the snippet and explore it more in-depth.
HTML:
<meta charset="UTF-8">
The first line tells browser what coding are characters (text) on the page written in. By telling what coding should browser use to render the text you are making it faster and easier to load the content.
HTML:
<title>Alex Devero</title>
Title of the page is necessary asset of every page. It is the name of your website and the text displayed in the browser’s tab.
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
This line is targeted on mobile devices. It tells them how to render (display) the page. First, you set width of the page to device width. Second parameter is more interesting. Setting initial-scale to 1.0 will cause to render the page in full width. Otherwise, device could display the page zoomed-out – full height – snapshot-like, so users would have to zoom-in every time. The last parameter, user-scalable, is to allow user to zoom-in. The value is yes – zooming allowed – or no.
HTML:
<meta name="handheldFriendly" content="true">
This tag was originally used to identify mobile content in AvantGo browsers. Since then, it became a general standard for identifying mobile websites. Available values are “true” or “false”.
HTML:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This meta tag is targeted on IE browsers. It tells IE that it should run in standards mode (most current edition “Edge”) – and activate chrome frames (something like Chrome inside IE) if it exists.
HTML:
<meta name="description" content="Portfolio and personal of Web Designer, developer and entrepreneur Alex Devero.">
Meta tag “description” specifies what should search engines show in search result. It is the text under name of page. Semantically, it describes what is the page about.
HTML:
<meta name="author" content="Alex Devero">
Author meta tag says who is the creator of website.
HTML:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/html5doctor-reset.css"> <link rel="stylesheet" href="css/style.css">
First link is to Google fonts CDN. This CDN serves stylesheet for specified font so browser can render it properly. It allows you to use available fonts without worrying if users have that particular installed on their devices.
Second link is for including reset stylesheet. Reset stylesheet simply changes (reset) the default visual styles of some elements. It removes the margin and padding form lists (also the dots) and body element for example. To do this, I use one from HTML5Doctor.
Last link is for … yes my main stylesheet.
HTML:
<!-- Facebook OpenGraph tags --> <meta property="og:title" content="Alex Devero Web Designer & developer"> <meta property="og:type" content="website"> <meta property="og:description" content="Portfolio and personal of Web Designer, developer and entrepreneur Alex Devero."> <meta property="og:image" content=""> <meta property="og:url" content=""> <meta property="og:locale" content="en_US"> <meta property="og:site_name" content="Alex Devero">
These meta tags are used only by OpenGraph. They say what information should be used when sharing the site link on Facebook and other websites using OpenGraph. It is the content generated by Facebook when you want to post some link.
Title is for specifying the title of the page. Type specifies what is the type of content. You can find all valid values here. Description is similar the classic meta description. Image is for url of image that will be shown with text in post. Local is for specifying the language of site. Site_name can be used to show the name for the overall site. For example, if your website contain many individual pages.
HTML:
<!-- Twitter cards tags --> <meta name="twitter:card" content="summary"> <meta name="twitter:creator" content="@AlexDevero"> <meta name="twitter:title" content="Alex Devero Web Designer & Developer"> <meta name="twitter:description" content="Portfolio and personal of Web Designer, developer and entrepreneur Alex Devero.">
Twitter cards tags work just like OpenGraph tags. When you want to share the link on your site on twitter, they say what content should twitter generate in that tweet.
twitter:card specifies what type of card will be used. Summary is default value another are gallery, photo, app, product, player and “summary card with large image”. Creator says who created the website, use your twitter handler (profile name) as a value. Title and description are, again, title and description of the page – text shown in tweet.
HTML:
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("hgroup");
document.createElement("time");
</script>
<![endif]-->
This is a special conditional comment only IE can read and understand. “if lt IE 9” means in plain english “if the Internet Explorer browser viewing this page is lower version than 9 than do/use this”. I use this comment to bulletproof elements mentioned in script code because in older versions than 9 they are not supported – they will not be displayed properly and styles for them will not be applied. This snippet use JavaScript to create these elements so browsers will understand and render them properly.
HTML:
<script src="js/modernizr.custom.15751.js"></script>
The last line is for custom built Modernizr library. On my site, I use it to test if placeholders, flexbox and formvalidation is supported by browser viewing the page. You can find more on how to use Modernizr in previous posts here and here.
Summary
That is all. Yes, we are on the end. As you probably noticed, I don’t use “keywords” meta tags. The reason is that it is useless. It has no real value for search engines. I hope that this post helped you to make a better picture of what can you include inside the head section of html file.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
