This post was originally made for eageramoeba.co.uk, it has been transferred here as part of the re-brand.
All web developers know or have heard about the importance of meta tags. Most of you are probably already familiar with these and implement them in your site, but it can't hurt to have a handy reference article and downloadable PDF (at the bottom).
General Browser Tags
These are some general broswer tags, most should be on each web-page and are a good standard to follow when building a template for any CMS or website.
A rather obvious one but included for completeness, this tag allows the title of your page to be read by browsers and search engines alike. Making navigation and SEO easier.
<title>This is a demo page title</title>
A sort of equivalent to http-equiv, this tag tells the browser the character encoding set you're using for this page.
This should usually be superseeded by your 'robots.txt' file (see here if puzzled), but can be usefull if you want to 'double wrap' or just don't have access to that part of your website (you should probably sort out FTP access if so).
The tag works by listing values with the content field (comma separated), these can be 'INDEX', 'NOINDEX', 'FOLLOW', 'NOFOLLOW' and generally are a set of instruction on what web crawlers/search engines should do with this page. The 'INDEX' property defines whether a page should be indexed by search engines. The 'FOLLOW' property defines if web crawlers should follow updates to this page. Prefaces these values with 'NO' means that the crawler should not do that action. I.e 'NOINDEX' means the crawler should not index the page, whereas 'INDEX' means they should.
<meta name="ROBOTS" content="NOINDEX, FOLLOW">
To compress this article I will include several tags under this heading. But basically these define an image to use as the icon for your webpage. This is used on browser tabs, desktop shortcuts or smartphone shortcuts. I would recommend png for the first two and a .ico for the last.
<link rel="icon" href="../favicon.png" type="image/png" />
<link rel="apple-touch-icon" href="../favicon.png" />
<LINK REL="SHORTCUT ICON" href="../favicon.ico">
This is the description for your web page, this helps search engines sort your site and is usually displayed underneath the page in search results. This is also read out loud for the visually impaired on supported browsers. It's recommended you type out a sentence to a paragraph here accurately describing the content of your page. For bonus points and SEO, make sure your description is different for each page.
<meta name="description" content="This is a demo description, lalalalalala">
Fantastic for SEO, as these are used by all search engines to help direct users to your site. It's essential these are different for each web page and comma separated.
<meta name="keywords" content="Keywords, are, usefull, sample, data">
This is useful for scaling the website for each device in responsive designs, particularly if this is dynamically assigned with php (or any server side language) per browser/device. Not necessary for all designs, but it's worth having a play with this tag to see what it can do. Mozilla have an excellent guide on this here - https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Some available values are as follows:
initial-scale : Defines the initial scale of the page, this can change on user input or device rules. Such as mobile safari zooming out upon orientation change.
maximum-scale : Defines the maximum scale of the page, particularly useful for cases where the device resets the scale (such as the safari on mentioned above) or for curbing how much a user can scale.
width : Controls the size of the viewport, this can be set to percentage, a pixel number or even device-width to make the viewport match the with of the devices resolution.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
This tag allows search engines to consolidate two urls that are different but lead to the same page into one url. The one specified in this tag will be the one prioritized. For example, if example.com/Home leads to example.com/home and you want google to index the first, you would use that url in this tag on that page. Like so:
<link rel="canonical" href="http://example.com/Home" />
Not 100% necessary for certain websites, but it is incredibly useful for those with dynamic content such as social networks or web stores.
This is the date that some search engines use to determine if they need to re-crawl this page. Not necessary but can be useful in certain situations where you want to define when the page content expires.
<meta HTTP-EQUIV="Expires" CONTENT="Tue, 20 Jun 1995 04:13:09 GMT">
Social Media Tags
These tags are used when you want a page to be displayed a certain way when linked in a social media post. As most social networks nowadays will display a linked url underneath the original post using this information.
The opengraph protocol in their own words “enables any web page to become a rich object in a social graph”. Used by both facebook, google+ and other social networks (not twitter, see below). You can visit their website here - http://ogp.me/
This consists of a meta tag following this sort of format:
<meta property="og:[value]" content="[content]">
Where the property will always be 'og:' followed by the relevant 'value' and 'content' containing the relevant information (replacing [value] and [content], respectively). Some of the typically required ones are as follows, more details for https and other types can be found on their website (link above):
og:title: This is the title of the page you want to appear on social media. Normally this would match the <title> tag but can be something else if you want to draw users in (I.e produce clickbait, we honestly recommend keeping this the same as your contents title so as not to annoy or confuse visitors).
og:type: The type of content contained on your page. Such as 'video', 'article', 'audio', 'website' etc. Check your desired platforms schema for guidelines on this.
og:image: The image that will represent your content on the social network. This normally should be the icon unless using an article or tags that would create a larger image display. In this case something more akin to a business card is recommended.
og:url: The canonical url of your page, used in a similar way to the tag value defined above.
og:description: A description of your content, usually the first paragraph for an article or the same as the description tag value defined above.
og:locale: Used to define the language of the webpage. Alternate ones can be defined by including ':alternate' after the initial tag on a new meta element. (e.g 'og:locale:alternate')
og:site_name: The name of your website, could be a url but you're usually better off with your organisations name. e.g 'Eager Amoeba' over 'eageramoeba.co.uk'.
og:audio/og:video: A url to the relevant media content on your page, use audio for audio content and video for video content (never both in the same tag, it's recommended to use one or the other per page also). Check with your platforms schema to see if this applies to embedded content.
Twitter has it's own meta language that works the same as the opengraph protocol (bar type becoming card, site being your username, the addition of 'creator' and those three following a different format) but prefaces tags with 'twitter' instead of 'og'. They also call what they produce within twitter 'cards'. No idea why they didn't just use opengraph but hey-ho. We'll cover the same tags for completeness regardless.
A full guide can be found here - https://dev.twitter.com/cards/getting-started
This consists of a meta tag following this sort of format:
<meta property="twitter:[value]" content="[content]">
The basics are as follows:
twitter:title: This is the title of the page you want to appear on social media. Normally this would match the <title> tag but can be something else if you want to draw users in (I.e produce clickbait, we honestly recommend keeping this the same as your contents title so as not to annoy or confuse visitors).
twitter:card: The type of content contained on your page. Such as 'summary', 'summary_large_image', 'photo', 'gallery', 'product', 'app' and 'player'. More details in the link above.
twitter:image: The image that will represent your content on twitter. This normally should be the icon for 'summary', otherwise a larger image more akin to a business card is recommended.
twitter:url: The canonical url of your page, used in a similar way to the tag value defined above.
twitter:description: A description of your content, usually the first paragraph for an article or the same as the description tag value defined above.
twitter:site: Your site's twitter handle, for example @EagerAmoeba for this one.
twitter:creator: Your authors twitter handle, for example mine would be @hairybobins.
Finally, thanks for reading!
If you enjoyed the article, let me know in the comments section below!
Alternatively, if you feel like any information is incorrect, misleading or I left an important tag out then leave a comment below. I'm always welcome to constructive criticism and looking to improve my craft.
Have a wonderful day and happy meta tagging.