July 12, 2016
While flexibility and customization are huge wins for the projects we work on, they do have potential downsides.
While flexibility and customization are huge wins for the projects we work on, they do have potential downsides.
At Authentic, we love Craft CMS for several reasons. Two of them being: the flexibility Craft provides when writing our front-end code, and Craft’s tailored approach to organizing content in the CMS. Here we’ll overview the best practices in optimizing content in Craft for a successful SEO strategy.
While flexibility and customization are huge wins for the projects we work on, they do have potential downsides.
For one, complete control of the front-end code ultimately places responsibility for SEO optimization in the hands of the developer. Furthermore, the customizable nature of the CMS means there’s no default configuration for out of the box SEO optimization.
On any Craft project there needs to be tight collaboration with the content strategist and developer, to ensure the resulting site is built with SEO in mind, and structured accordingly.
In short:
Strategy => Content => Architecture => Markup => SEO
Having worked extensively with Craft and using it on several large SEO-optimized websites, I’m very confident in the approach we’ve been taking to build SEO-optimized sites for our clients.
In this article, I’m going to detail many of the strategies we use to optimize our Craft websites for SEO. Full-circle, starting with content strategy and ending with development.
An SEO optimized Craft website is equal parts planning for site content, correctly implementing front-end code, and smartly configuring the CMS.
These three areas ensure search engines are driving targeted traffic to your site, and that updating SEO-optimized content happens as you naturally update site content, avoiding wasted time specifically managing SEO.
I know that sounds like a lot, but let’s break things down.
As I discussed in my previous article, having a well thought out content strategy is essential to driving useful traffic to your site.
The content strategy prepared, and then written inside the site’s content, needs to be thoughtful. Thoughtful in the sense that it understands the way content should be formatted for the web.
The content should be concise, it should be scannable, it should contain a meaningful hierarchy of titles and paragraphs, delivering it’s message to the reader.
All of these qualities take shape within the markup of your site’s frontend code, and create the foundation for a SEO optimized website.
This article by no means contains the full list of all the ways you can optimize your markup to be SEO-friendly. I will, though, touch on a few high level items to be aware of, more specifically on Craft websites.
Title tags are a tag found on each page of your site, and which should be updated based on the unique content you’re featuring on any specific page.
Below, we’ll be looking at a Craft plugin which automates title tags updating for your site, but a few quick notes on how to format title tags:
Heading tags on your site play a very important role for SEO. They help organize your content into digestible priorities, and help establish many of the keywords your site’s content begins to rank for.
As a content writer, you should be creating your content with an understanding of these tags, and the role they place on a site. Make sure each page has a single main heading, and subsections of the content have clearly defined sub and tertiary headings.
Being as explicit as possible when delivering this content to your developers makes their job easier during implementation, and makes sure the code reflects your overall strategy.
As a developer, when you’re writing the markup for your site, and even further, turning the markup into individual components you can reuse within your Craft templates, be sure the components are flexible enough to handle varying types of heading tags.
When we’re configuring Craft and building components, we give the content creator the ability to specify the level of heading tag they want to use for a specific piece of content. This can be done using a Rich Text field type, or a Matrix field type, where the creator selects the level of tag they are wanting to use.
A hypothetical example with a Matrix field:
{% for block in entry.contentSectionMatrix %} {% if block.type == "h1" %} <h1>{{ block.text }}</h1> {% elseif block.type == "h2" %} <h2>{{ block.text }}</h2> {% elseif block.type == "h3 %} <h3>{{ block.text }}</h3> {% endif %}{% endfor %}Making sure each of your components (which represent an individual design pattern inside your template), are flexible enough to handle different types of heading tags (h1, h2, h3, etc.) allows your design to stay consistent, but the SEO of any given page to be optimized based on the content provided.
Image title and alt tags are often overlooked when writing markup, but can play a big role in SEO optimization.
Fortunately, Craft makes this process very straightforward, automatically adding title properties onto the images we upload into the CMS, and giving us quick access to this within our templates.
{% set image = entry.mainImage.first() %}<img src="{{ image.url }}" title="{{ image.title }}" alt="{{ image.title }}" />If you want to update the title of an individual image, you can go back into the CMS and easily update it, having the changes cascade across the site on the next page load.
When it comes to managing SEO on our Craft sites, we’re really big fans of Sprout SEO.
Sprout SEO assists with several things:
For the sake of brevity, I’m not going to be covering two and three from the above list, but I’ll walk through how we’re implementing number one.
The great thing about the way Sprout SEO handles SEO Meta Data is it allows you to configure content on three different levels:
These three levels of specification, create a cascading architecture of data, giving you ultimate control of the data your site renders, but without needing to duplicate meta data on each individual page.
> Create shared metadata globally, add unique data in your entries, and when necessary, specify manually in a template.
With Sprout SEO installed, the first step is adding the optimize tag into your templates. This tag renders all of the meta tags necessary on each page.
You can put this inside the <head> of your document
{{ craft.sproutSeo.optimize() }}With this in place, next comes adding another tag inside each one of your templates.
Inside your templates, outside of any content blocks, add this snippet of code.
{% do craft.sproutSeo.meta({ default: 'default', id: entry.id })%}Essentially, this tag allows you to customize the various pieces of meta data inside each template. For now, we’re going to leave out any configuration parameters, but we’ll come back to this later.
With the code tags in place, let’s move into Craft itself and get things configured.
First thing you’ll want to do is setup your Global SEO defaults. Inside the Sprout SEO item in your sidebar, you’ll see a section called Globals. Inside Globals, create a new global set, and within the global set, you’ll see all of the pieces of content you’re able to configure for your site.
Again, for brevity’s sake, I won’t review all of these items, but I’ll mention that there are sections for both standard SEO tags, and also social tags: Open Graph and Twitter-specific.
After you’ve saved your Global settings, you can test to make sure your meta tags are being rendered into the templates. On each page, you should see the globally defined pieces of data you’ve just created.
Back into Craft.
The next thing to setup are your entry-specific tags. Sprout SEO gives you three fields, you can add onto any section, with the same SEO fields you added in your Global defaults from the previous step.
Intuitively, after you’ve added these fields to a section on your site, when you then go into an individual entry within that section, and add some unique meta data, that data will start to appear on your site.
But wait! There is one more thing that you need to do.
In the previous step, where I said we could be circling back to the templates… Open up the template file, associated to the section where you’ve added the SEO fields.
Inside that template, update the craft.sproutSeo.meta tag to include the entryId parameter. What this does, is make sure the tag is able to pull the Sprout SEO field data, from the entry itself, and update the meta tags accordingly.
{% do craft.sproutSeo.meta({ default: 'default', id: entry.id })%}Now if you check, Viola!
Now, for the last piece to the puzzle. When we’re thinking about overriding SEO meta data within templates, this is usually stemming from us wanting or dynamically add content from the entry itself, into the meta data. For example, on an Article page, you might want the description field to be from the Article Intro field you have within your entry.
Doing so means you don’t need to specify this tag on every page, and can add it dynamically inside the template.
Another common use case is to modify the data within the entry slightly.
In some cases, like in our Article Intro, the content might be wrapped in a Rich Text Field. If we want to use that in a description meta tag, we might want to run that entry data through a few Twig filters, to clean it up for display.
{% do craft.sproutSeo.meta({ default: 'default', id: entry.id, title: entry.title, description: entry.articleIntro|striptags|slice(0, 150) })%}Now, at this point, you should have Global SEO meta data powering your site, the ability to update SEO data on an entry-specific basis, and also can customize and override individual social tags, within an entry itself.
Talk about powerful!
As evident by this article, SEO Optimization in Craft has many moving pieces; however, with correct implementation and content that’s thoughtful and strategically written, you can turn your website into an efficient SEO-optimized powerhouse, driving traffic and engaging visitors.
Subscribe here to get our short and sweet monthly newsletter!
