Meta tags
April 29, 2018
⏳ 3 min read
Sources
- 1&1
- Stackoverflow post
- CSS-Tricks
- buildwebsite4u
- Facebook’s open graph protocol
- gaijin, a metatag generator
List of useful meta (+etc) tags at once
<meta charset="utf-8"/>
<meta name="description" content="160 characters at max"/>
<meta name="keywords" content="keyword1, keyword2, ...">
<meta name="author" content="Author name" />
<meta name="copyright" content="Copyright owner" />
<meta name=viewport content="width=device-width, initial-scale=1">
<!--Controls-->
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="exercise date in seconds. Ex: 5000"/>
<!--Facebook-->
<meta property="og:url" content="{{pageUrl}}">
<meta property="og:image" content="{{imageUrl}}">
<meta property="og:description" content="{{description}}">
<meta property="og:title" content="{{pageTitle}}">
<meta property="og:site_name" content="{{siteTitle}}">
<meta property="og:see_also" content="{{homepageUrl}}">
<!--optional-->
<meta property="og:site_name" content="European Travel, Inc.">
<!--Google+-->
<meta itemprop="name" content="{{pageTitle}}">
<meta itemprop="description" content="{{description}}">
<meta itemprop="image" content="{{imageUrl}}">
<!--Twitter-->
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="{{pageUrl}}">
<meta name="twitter:title" content="{{pageTitle}}">
<meta name="twitter:description" content="{{description}}">
<meta name="twitter:image" content="{{imageUrl}}">Title tag
Just don’t forget the title tag (though it’s not a meta tag).
Character encoding
If the font is not already defined in the HTTP header, this information needs to be given in the HTML code.
<meta charset="utf-8"/>Description
It is important for website owners to remember to limit the description to 160 characters (including spaces). Any text after this point is cut off and an incomplete description will appear in the search results.
<meta name="description" content="160 characters at max"/>Keyword
The keyword tag used to be one of the most essential SEO meta tags, as primitive search engines used this as the central feature for search result rankings. However, because of the great potential to manipulate this meta element, it is now left out of Google’s ranking factors.
<meta name="keywords" content="keyword1, keyword2, ..."/>Viewport
For devices with different viewport.
<meta name=viewport content="width=device-width, initial-scale=1"/>Author and Copyright (Optional)
<meta name="author" content="Author name"/>
<meta name="copyright" content="Copyright owner"/>Cache
It is standard for websites to be stored on proxy servers, which allows the websites to load faster when subsequently called up. To prevent this process (for example, because the website updates frequently), use the meta tag “cache-control” with the value “no-cache”:
or you could set the date of expiry of cached data.
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="exercise date in seconds. Ex: 5000"/> For web crawlers
Note: All these commands tell search engine spiders to index the page and follow links found on it. However, all search engines do this by default anyway.
Allow a search engine crawler to index an HTML site:
<meta name="robots" content="index, follow"/>Disallow a search engine crawler to index an HTML site:
<meta name="robots" content="noindex,follow">
<meta name="robots" content="noindex">Disallow a search engine crawler to index links inside an HTML site:
<meta name="robots" content="index,nofollow">
<meta name="robots" content="nofollow">Disallow caching website information:
<meta name="robots" content="noarchive">