CCBS Web Services
Making your site simple!
For more information:
email us
 

How to auto-generate SERP-friendly meta tags

Category: CMS Made Simple | Last updated: March 2020

CMS Made Simple meta tags

This explains a simple way to set up the meta description and title tags for each of your pages and articles in CMS Made Simple.

Each of your pages and articles that you want to be indexed by search engines needs to have a couple of special HTML tags included in the page.

The information contained within these 2 tags are often used by Google and other search engines in their search results pages. So it's important for your on-page SEO that these 2 tags are correctly set up.

The tags I am talking about are the title tag and meta description tag. I am going to explain a simple way to incorporate these tags for each of your pages and news items.

What is a meta description or title tag?

One of the giants of the SEO industry, MOZ, says this:

The meta description is an HTML attribute that provides a brief summary of a web page.

The title tag is an HTML element that specifies the title of a web page.

Search engines  display these in search results, which can influence click-through rates.

Visit the MOZ website to find out more about the meta description tag and the title tag.

Out of the box, CMS Made Simple does not include a field that is specifically for page or news meta descriptions.

In CMSMS, content pages and news items are handled differently from each other. They have their own templates and variables. So, the meta description tag and title tag for a page is created from a different set of fields than a news item.

Part one deals with the page meta tags and part two covers the tags for news items.

Part One: meta description and title tags for your pages

Dealing with pages first, in the following 4 steps, we are going to create an additional content block for the page meta description. Then we are going to put together the meta description tag and the title tag.

Step 1: set up additional content block for meta description

I use template inheritance for my page layout templates. In my "master" page template, the following code is placed at the top, before the start of the html code, to include an additional content block:

Additional content block for meta description

This is adds another content entry field on the Edit Content screen so that a suitable meta description can be provided for the page.

It is visible under the main content editing area. The contents are stored into a page variable.

{$meta_desc = "{content block='Meta Description' label='Meta description for this page - at least 165 characters but no more than 300' size='200' wysiwyg='false'}" scope=global}

Here is what the additional content block for meta description looks like when inserted with the above code:

CMSMS Content Manager - meta description

Step 2: set up the page variables

Staying within the master page layout template, below the new additional content block, the following code is added to set the page variables.

Set page variables

  1. {$site_name = $site_name|default:"{sitename}" scope=global}
  2. {$page_desc = $page_desc|default:"{description}" scope=global}
  3. {$page_title = $page_desc|default:"{title}" scope=global}
  4. {$meta_desc = $meta_desc|default:$content|strip_tags:false|strip|trim|truncate:300|default:'' scope=global}

What does this mean?

This is a techy bit and I don't want to delve into the meaning of life, the universe and program syntax - so I will be (very) brief.

These statements may look a bit odd but this is due to the order in which CMSMS processes page data. Plus, Smarty syntax is more compact than raw PHP code.

Each page variable is set from either itself (if it has already been set elsewhere in the page) or a default value (which may be another variable or it may be an outcome of another tag).

Lines 2 & 3: CMSMS has 2 fields that can be used as page title (description and title). If the description field is empty (it is optional), it defaults to the title field which is a compulsory page field.

Line 4: If that new additional content block mentioned above has nothing in it, then the first 300 characters of the main content is used, stripped of any markup.

Step 3: add the meta description tag

Meta description tag

Put this snippet into the Metadata field on the Logic tab in Edit Content screen for each of your pages that you want to be indexed by search engines.

<meta name="description" content="{$meta_desc}">

Most of your existing pages will want to be indexed by search engines and so should have this meta tag set up. If you have only got a few pages, then you can just paste the snippet into the Metadata field on the Logic tab.

If you have got lots of pages in existence and they need this meta tag, then you could insert it into the appropriate place in your page template. If you are using template inheritance, the obvious place is the master page layout template.

Tip: put this snippet in the Metadata field on the New Page Defaults tab on Settings - Content Manager screen. So any new pages created thereafter will automatically have this snippet applied.

Note:The contents of page-specific Metadata fields will only be included in a rendered page if this tag {metadata|strip} is included in head section of your page templates.

If a page is not to be indexed, then don't insert the meta description tag. Such pages could be your contact page, article summary pages, privacy/terms/cookies page. Use the following tag instead:

<meta name="robots" content="noindex,follow">

Step 4: add the title tag

Title tag

We set a page variable in step 2 above for this tag {$page_title}. This can be used with or without another page variable {$site_name}, depending upon your design preference.

Here are 2 title tag options - just put one of them in the head section of your page template.

  1. <title>{$page_title}</title>
  2. <title>{$page_title} - {$site_name}</title>

Part Two: meta description and title tags for your News articles

Now we are going to do something similar for News articles. We don't need to create an additional content block for this (like we did above for pages) because we already have something built in - the News Summary field.

I am re-purposing this for the News article meta description, with some minor adjustments.

Step 1: set up the News Detail variables

In Design Manager, we are going to make minor amendment to the News::Detail template that is used for the news details page.

News detail variables

  1. {$news_item = 'y' scope=global}
  2. {if $entry->summary}
  3. {$meta_desc_news = $entry->summary|strip_tags:false|strip|truncate:300 scope=global}
  4. {else}
  5. {$meta_desc_news = {eval var=$entry->content}|strip_tags:false|strip|truncate:300 scope=global}
  6. {/if}
  7. {$page_title_news = $entry->title|cms_escape:htmlall scope=global}

What does this mean?

The News detail template should already include 3 News variables that we can use for these tags - summary, content and title.

I suggest you put these lines near the top of your template, leaving the rest of template for the layout of the News item itself.

Line 1: sets a flag to indicate that a News item is being processed. This is used in the master page layout for the title tag.

Lines 2 & 3: checks if the summary variable has anything in it. If so, the 1st 300 characters of the summary contents are used, after being stripped of markup and spaces, for the News meta description.

Line 5: if the summary variable is empty, the 1st 300 characters of the content variable is used instead, having the same adjustment made.

Line 7: the News title is stored for the News title tag.

Step 2: amend the title tag

Title tag

This amends the code that we put in the master page layout in step 4 above.

  1. <title>
  2. {if isset($news_item)}
  3. {$page_title_news} - {$site_name}
  4. {else}
  5. {$page_title} - {$site_name}
  6. {/if}
  7. </title>

As we are using the same master page layout for both page and News item, we test the News flag to see if a News item is being processed. If so, the title tag is set up from the News item title.

Step 3: add the meta description tag

News meta description tag

<meta name="description" content="{$meta_desc_news}">

Store the above code in a Core::Generic template in Design Manager. I call my template generic-meta-article.

Why am I storing it like this and not putting it directly into the Metadata field on the Logic tab of the News page?

Because I can then add other meta tags for the News item, like the Open Graph types for Facebook. This is covered in one of my other CMSMS articles, link to this is in Additional Information below.

With the meta description tag stored in a Core::Generic template called generic-meta-article, put the following tag into the Metadata field on the Logic tab of the page that is used for News detail.

{global_content name='generic-meta-article'}

If your News page is dual-purpose i.e. it is used for News summary as well as News detail, then use this code instead.

  1. {if isset($news_item)}
  2. {global_content name='generic-meta-article'}
  3. {else}
  4. <meta name="description" content="{$meta_desc}">
  5. {/if}

The News flag is checked to see if a News item is being processed. If so, the News meta description, together with any other News item meta tags, is used. Otherwise, the page meta description tag is used.

If you don't want your News summary page to be indexed, then replace line 4 with:

<meta name="robots" content="noindex,follow">

Additional Information

Useful articles

I found out about how to use page variables to build meta tags from an article on the very informative CMS Can Be Simple website:

Base CMS Made Simple page template with automated metatags

For more information about template inheritance, this article on the above website provides a concise explanation:

The power of Template Inheritance and the CMSMS Design Manager

There is a huge amount of information on the internet about meta tags that can be overwhelming. But, if you look at recently dated articles (2019 / 2020), you will see that their message is similar.

Here are links to the 2 MOZ articles mentioned at start of this article:

Meta description - 2020 SEO Best Practices

Title Tags - 2020 Best Practices

And be sure to check out the other pages on this site, too.

My associated article on how to share your content on social platforms extends the tags used for news items mentioned above.

Useful tools

The Merkle website has a number of on-line tools, one of which is the Google Serp Simulator

If you want to see how Google could display your meta elements in its SERP, just enter your page’s URL into the tool and click Fetch. You can switch between Mobile or Desktop device.

Conclusion

So, with just a few lines of code in your page layout template and an additional content block, you have a simple way of getting those SERP fields into your pages and articles.

All you have to do now is to follow SEO best practices and write compelling descriptions and titles that help search engines understand what your content is about.

Disclaimer

You use the code contained in this article AT YOUR OWN RISK.

I endeavour to ensure the code given here is a faithful copy of that which I de-ploy on my own sites. But I make no guarantees that it will work on your own site.

I do not accept any liability for the code, its incorporation and usage on your site.

I may withdraw or amend this article at any time without notice.

My website Terms and Conditions apply.

Christine CollenBy Christine Collen

 

Please share this page