We discover people, brands and companies on a growing number of devices and new technologies. Our expertise for websites includes responsive design, lean development, copy-writing with translation and search engine optimisation.Mehr.
Search engine optimisation: basic metatags that every website should use
One thing should be clear to everyone desigining and developing a website: next to all the possible user groups for your site, search engines are an important Stakeholder that should never be forgotten!
There is two main types of metadata that are relevant for nowadays websites: Header Metadata and embedded Microdata. Specifically Google pushes the trend towards the Semantic Web and prefers Microdata - claiming that in-text (or in-code) marking of content is to be preferred over the writing of long, dedicated metadata. In practice however, metadata is mostly a copy-paste exercise which can be performed with little specific knowledge and time investment.
This article aims to give you an overview over the most relevant header metadata.
THE ABSOLUTE "MUST" FOR ANY WEBSITE
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="canonical" href="The URL of the page incl. http:// oder https://"> <title>The title of your site</title> <meta name="description" content="Description of the page">
The first makes your website mobile-friendly - an absolute must nowadays. The second is the unique link to the page in question to prevent duplicate content and hence penalisation in your Google Page Ranking. The Title is shown both in the browser tabs as well as a title for example in Google Search. Important: every page should have a unique title and unique Description. Generally it is recommended to keep the Description between 150 and 160 characters in length. Experiments undertaken by colleagues (see here) however yielded that significantly longer descriptions up to 265 characters are still indexed and presented by Google.
The traditional answer here looks like this:
<link rel="shortcut icon" href="Link zum Icon im .ico Format">
The number of devices, browser previews (e.g. Firefox, Opera), mobile Browsers (Google Chrome, Opera Coast), App Icons and Windows Tiles however significantly prolong the list. Therefore it is best to resort to a Generator such as RealFaviconGenerator that creates the image files in .ico, .png and .svg format as well as the HTML code for the document header.
SOCIAL MEDIA EMBEDDING
The optimal display of your website as snippets on Facebook, Twitter and Google+ asks for some specific Metadata:
<link rel="publisher" href="Link to your Google+ profile"> <link rel="image_src" href="Link to a preview image for your page"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="The Title of your page"> <meta name="twitter:description" content="The Description of your page"> <meta name="twitter:site" content="@YourTwitterUsername"> <meta name="twitter:site:id" content="Your Twitter Site ID (see here)"> <meta name="twitter:image:src" content="Link to a preview image for your page"> <meta name="twitter:image:width" content="1200"> <meta name="twitter:image:height" content="630"> <meta name="fb:app_id" content="Your Facebook App ID if you have one"> <meta name="og:site_name" content="The name of your company/project"> <meta name="og:title" content="The title of your page"> <meta name="og:type" content="website, article, book oder profile (alternatively music or video, see here)"> <meta name="og:url" content="Unique URL to this page"> <meta name="og:description" content="Beschreibung"> <meta name="og:image " content="Link to a preview image for your page"> <meta name="og:image:type" content="image/png"> <meta name="og:image:width" content="1200"> <meta name="og:image:height" content="630">
Other metadata types such as Dublin Core, Sailthrou, etc. are rarely in use and little needed. Most services (also Twitter) resort to the now popular OpenGraph protocol. The image size of 1200x630 pixels is recommended as a minimum by Facebook (see here).
METADATA FOR APPS
<meta property="al:ios:app_store_id" content="The ID of your App"> <meta name="google-play-app" content="app-id=The ID of your App in the format com.package.android">
On iOS a smart banner will be displayed on iOS deviced with the note to install the app. Android does not have native support for smart banners, there is however a jquery plugin to achieve this (see this blog article).
METADATA FOR LOCAL BUSINESSES
<meta property="og:latitude" content="e.g. 46.755504"> <meta property="og:longitude" content="e.g. 11.68014"> <meta property="og:street_address" content="Street Name and Number"> <meta property="og:locality" content="Town"> <meta property="og:region" content="Province"> <meta property="og:postal_code" content="Postal Code"> <meta property="og:phone_number" content="Phone number incl. +XXX"> <meta property="og:fax_number" content="Fax number incl. +XXX">
METADATEN FOR MULTILINGUAL WEBSITES
<meta property="og:locale" content="en_GB"> <meta property="og:locale:alternate" content="it_IT"> <meta property="og:locale:alternate" content="de_DE"> <meta property="og:locale:alternate" content="fr_FR"> <meta property="og:locale:alternate" content="cz_CZ">
The list of alternative langauges can be arbitrarily extended.
Metadata will also in the coming years remain essential for search engine optimisation and the correct display of widgets to your website on social networks. Authoring metadata for websites is mostly a copy-paste exercise, however their importance should not be underestimated! In the end, search engines and social networks are key Stakeholders for almost every website.
Our products + services
The doubling of computer processing speed every 18 months is just one manifestation of the greater trend that all technological change occurs at an exponential rate. We offer tailored services in the areas of consulting, planning and execution of digital solutions. With us as your reliable partner you can face the challenges of digitalisation!Mehr.
The trend towards web and mobile applications impacts our everyday life. We offer tailored software solutions for both desktop or mobile users. They are an innovative approach to business/customer relationships. Our expertise in app development include iOS and web apps.Mehr.