Meta tags are snippets of text that describe a page’s content that don’t normally appear on the site itself. Search engines, like Google and Bing, look for these tags when a user is browsing for your site, and browsers, like Chrome and Explorer, use these to understand how the HTML of the page is constructed, and how it should be displayed.
Meta tags are written in the following format:
<meta name=”X” content=”Y”> where X is the type of Meta tag, and Y is the content for that particular type.
You can see what meta tags you already have configured, and add/amend them, in the CMS Editor. They're displayed in the Layouts section of the Home tab.
Except for the title tag, any meta tag specified in the Layouts section is layout-specific rather than individual page-specific. If you want to add page-specific meta tags, see further in this guide.
There are different kinds of meta tags that you may want to use, depending on what you need on your site.
The charset meta tag specifies which character encoding the HTML is saved in. Usually, this will already be set in the Layouts section to UTF-8.
The viewport meta tag tells the browser how to render a page on a mobile device. This tag also indicates to Google that the page is mobile-friendly.
The robots meta tag applies to all search engine crawlers and controls the behaviour of these bots – whether they can index the page, follow links on the page, whether the page can be cached (archived) etc.
Usually, you'd want to control these crawlers on a page-by-page, basis rather than by layouts, which can be achieved by using the robots.txt file. For more information about robots.txt files, take a look at our article here.
There's also a Google-specific version of this meta tag, googlebot.
The keywords meta tag was used by early search engines to pick up individual keywords, rather than scanning the content of the pages. This meta tag is no longer used by search engines for relevant keywords – some search engines use it to flag spam, by checking if the keywords match the site's content.
A meta description is the text that's displayed on search engine results pages. It's unlikely you want the same description on every page (e.g. a Contact Us page would not have the same description as a Pricing page), so this is a good use for page-specific meta tags.
The content of this tag is what'll be displayed as the “snippet”:
<meta name=”description” content=”This is what a meta description will display like”>
Page-specific Meta Tags
There's a section on the properties of each page where you can add additional header HTML.
This is page-specific code that will be output into the (CMS_METATAGS) CMS object. You can put any meta tags here that you want, but as most will be the same for every page, it makes more sense to only put tags in here that are unique for every page – like the description meta tag, for example.
A title tag is what will be displayed on the search engine results, or on your browser’s tab when you’re on a website. For example, our homepage looks like so:
If you then click to another page, such as eCommerce, the title on the browser tab has changed:
This is a special kind of HTML tag in the CMS, as the tag itself is added to the layout, but uses the DYNAMIC_TITLE element to pick up the title from the individual page itself in the Site Map section, in the Name field:
The Syntax in the Layout is as follows:
This code will use the output of specific plug-ins (e.g. the product name from Product Detail), and if this plug-in is not on the page, will then fall back to the title specified in the page properties.