Making Your Statamic Entries SEO Friendly

Use fieldsets easily set up page-specific SEO, and provide some handy defaults for those nights when you blog after a few too many beers.

Published on August 1, 2016


Who's this for

  • Statamic developers and CMS junkies


  • Out of the box, Statamic has expontentially more flexibility than WordPress core. Using Statamic's fieldsets, we can start solving for issues that would otherwise require a mosaic of WordPress plugins.

Anyone who’s spent time with WordPress will recognize it both as remarkable and deeply flawed piece of software. That’s a topic for a whole different series of posts—look to the skies for that one soon—but suffice to say, I’ve recently started exploring other CMS systems.

My favorite by a landslide so far has been Statamic, a flat-file CMS that I discovered via a Tighten Co. blog last spring. Since that post was published, Statamic v2 has emerged from beta, and reminded me just how much I was missing in WordPressLand.

I built this blog in Statamic over the course of a couple of Saturdays, and one of the very few hiccups I encountered was with SEO. When using WordPress, I automatically turn to the Yoast SEO plugin, whose default settings are smart enough to cover the bases with minimal effort.

Stamamic has no comparable plugin yet. But, using fieldsets (imagine if WordPress had Advanced Custom Fields built right in) and some ternary operators, it’s easy to manage your SEO on a post-by-post level:

1. Define your fieldset

Fieldsets are accessible from the sidebar navigation of your Statamic control panel. With a fresh installation, you will have a fieldset called “Blog Post” that caters to blog basics: title, hero image, tags, and so on.

Click into that fieldset, click “Select a Field”, choose “textarea”, and click the plus sign. This will call a modal that contains the settings for your new field. Title your field “Meta Description,” and if you want to be thorough, provide a description and validation rules, as well.

Adding a field to your Statamic fieldset

Once saved, you’ll see your new field appended to the end of the fieldset.

2. Add the field to your template

Next, we want to add that field value to the head of our template. But not only that, we want to include a default value, too, so in case we forget to add a specific meta description, we have a backup in place. Rather than a chunky if/else statement, this is great opportunity for a ternary operator.

Statamic themes are built with Antlers, a templating language reminiscent of Laravel Blade. Antlers was built with an eye towards simplicitly and legibility, both of which are evident in how it handle something like a ternary operators (here called “variable fallbacks”):

{{ meta_description or title or "Latest Blog Post" }}

Super legible, with a clear order of precedence, and nary of a question mark in sight. Let’s put it to work for our new field:

<!-- Check it out: this will display our new meta description, or default to a fallback phrase -->
     <meta name="description" content="{{ meta_description or "Pittsburgh Product and Web Development" }}">
    <title itemprop='name'>{{ title }} | {{ site_name }}</title>

    <!-- Opengraph (for Facebook, LinkedIn, Pinterest, Slack, etc.) -->
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="website" />
     <!-- On Facebook, this will show the title of the entry, or default to my name -->
    <meta property="og:title" content="{{ title or "Cameron Scott" }}" />
    <!-- Here's our entry-specific meta description again, plus fallback -->
    <meta property="og:description" content="{{ meta_description or "Pittsburgh Product and Web Development" }}" />
    <meta property="og:url" content="{{ site_url or url}}" />
    <meta property="og:site_name" content="{{ title }} | {{ site_name }}" />
    <meta property="og:image" content="{{ site_url }}{{ intro_image | url }}" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary" />
    <!-- We're taking the same approach on Twitter: show the custom value, or default to a back-up -->
    <meta name="twitter:title" content="{{ title or "Cameron Scott" }}" />
    <meta name="twitter:description" content="{{ meta_description or "Pittsburgh Product and Web Development" }}" />
    <meta name="twitter:site" content="@cameronhscott" />
    <meta name="twitter:creator" content="@cameronhscott" />
    <meta name="twitter:image" content="{{ site_url }}{{ intro_image | url }}" />

Both the Opengraph Protocol and Twitter look for a similar set values. In both cases, we’re first providing an entry-specific value first. If that’s absent, we provide a general fallback to ensure we’re covered no matter what.

Want to test before you go live? Facebook offers a super-secret Opengraph debugging tool to show you how it will interprate your entry.

Is this solution as flashy as Yoast’s traffic light system? Sure ain’t, but it doesn’t need to be. Out of the box, Statamic and Antlers are already providing simpler answers to problems that core WordPress can’t begin to tackle.

I’ve only been using Statamic for a month now, and know full well that I’ve only scratched the surface of what it can do. Did I screw something up? Is there an easier answer than the one above? Yell at me on Twitter if you have ideas on how to improve.