Everyone knows how important SEO is to get your website out in front as many eyeballs as possible. Using prismic.io gives you complete control of the content being output to your site, which makes it very SEO-friendly. Here are a few tricks you can use to integrate prismic.io into your SEO strategy.

Set up an SEO tab on your pages

For every custom type that renders a page on your website, we recommend setting up a tab in your custom type specifically for your SEO fields. Here is an example of an SEO tab, and below we will discuss what each field is and what it does.

"SEO" : {
  "uid" : {
    "type" : "UID",
    "config" : {
      "placeholder" : "type an SEO-friendly identifier...",
      "label" : "Unique ID"
    }
  },
  "meta-title" : {
    "type" : "Text",
    "config" : {
      "label" : "meta title"
    }
  },
  "meta-description" : {
    "type" : "Text",
    "config" : {
      "label" : "meta description"
    }
  },
  "canonical" : {
    "fieldset" : "Canonical URL",
    "type" : "Link",
    "config" : {
      "placeholder" : "Select the category to use in the canonical URL",
      "select" : "document",
      "masks" : [ "brewery", "country" ]
    }
  }
}


UID

You can use the UID field (user-friendly unique ID) to create SEO-friendly URLs. This means having relevant and succinct url paths, such as http://www.example.com/about-us. A good rule of thumb is to make your urls clear enough so that a user who only sees the url path will have a good idea of what will be on the page.

It is also important to avoid broken links and duplicate content, both of which can hurt your SEO ranking. The UID field can be used to prevent these from becoming an issue.

prismic.io keeps a history of all the previous UIDs for a given document to ensure that old links are not broken. The document will always be returned even when searching for it using an older UID.

This also means that different URLs can return the same content, giving you duplicate content, and possibly reducing the rank of the page. To avoid this, it is recommended to check the current UID with the UID used to display the page and redirect to the current UID if needed.

// using the NodeJS SDK, in app.js
app.route('/:uid').get(function(req, res) {
 
  // Get the UID used to display the page
  var uid = req.params.uid;
 
  // Query your prismic.io API
  api(req, res).then(function(api) {
    return api.getByUID("page", uid);
  }).then(function(pageContent) {
   
    // If the UID is not the current UID, redirect to the current URL
    if(pageContent.uid != uid) {
      return res.redirect("/"+pageContent.uid);
    }
   
    // If the UID is the current UID, display the page
    res.render('index', {
      pageContent: pageContent
    });
  });
});


Meta-title & meta-description

While it is possible to generate meta tags based on existing content fields, it’s better to create fields specifically for the metadata. In the section below you can see an example of how to integrate these fields into your layout template.

Canonical URLs

Your website content may be accessible from various URLs (like /country/belgium/beer-name and brewery-name/beer-name). In this case you must specify your favorite URL for indexation.

To do so you can add a link to a document in the custom type. In the example above, authors will be able to specify whether we should write the canonical URL with the country or brewery path. The section below shows how to integrate this into your layout template.

Note that this option is only necessary if your pages can be displayed via two different paths. If this is not the case for your pages, then a canonical URL is not required.

Integrate SEO fields into your templates

Here’s an example of a layout template that integrates a meta-title, meta-description, and canonical link.

//- Using the pug templating system
doctype html(lang='en')

- var metaTitle = pageContent.getText(pageContent.type + ".meta-title")
- var metaDescription = pageContent.getText(pageContent.type + ".meta-description")
- var canonicalLink = pageContent.getLink(pageContent.type + ".canonical")
   
head
  title
    != metaTitle ? metaTitle : "Default Title"
  if metaDescription
    meta(name='description', content=metaDescription)
  if canonicalLink
    - var canonicalURL = "http://your-domain.com" + canonicalLink.url(ctx.linkResolver) + "/" + pageContent.uid
    link(rel='canonical', href=canonicalURL)

  link(rel="stylesheet", href="/stylesheets/style.css")
  meta(name="viewport", content="width=device-width, initial-scale=1")

  // Required for Previews and Experiments
  script(src="//code.jquery.com/jquery-1.11.3.min.js")
  script
    = ctx?"window.prismic = { endpoint: '" + ctx.endpoint + "' };":""
  script(src="//static.cdn.prismic.io/prismic.min.js")

body
  block body


The example above uses a link resolver to get the path for the canonical link. Here’s an example of what the link resolver might look like for this.

// Using the NodeJS SDK, in prismic-configuration.js
linkResolver: function(doc, ctx) {
  if (doc.type == 'country') {
    return '/country/' + doc.uid;
  } else if (doc.type == 'brewery') {
    return '/brewery/' + doc.uid;
  }
  return '/';
}

    

You can check out the prismic.io docs to learn more about Link Resolving.

Other SEO practices

There are other practices that you can do to improve your site’s SEO. Here are a few:

Add alt tags to your images

Adding alt tags to your images not only makes them more accessible by providing information about the image for screen readers, but also improves the SEO of your site. By adding a text field along with your image fields you can easily set the alt text for each of your images.

"image" : {
  "type" : "Image",
  "fieldset" : "Image"
},
"image-alt-text" : {
  "type" : "Text",
  "config" : {
    "label" : "Image Alt Text"
  }
}


Here’s how to integrate the image with an alt text into your templates.

// using pug templates
img(src=pageContent.getImage("image").url alt=pageContent.getText("image-alt-text"))


Query resized images for faster page loading

The speed of your website can affect your SEO. One way to make your pages load faster is to optimize your images.

prismic.io allows you to set up max size constraints to perfectly fit your design. Images will be automatically served in the optimized size.

"illustration" : {
  "type" : "Image",
  "config" : {
    "constraint" : {
      "width" : 600,
      "height" : 600
    }
  }
}


Generate a sitemap

A sitemap will help search engines find your pages. The simplest format for a sitemap is a text file containing all the URLs for your site, one URL per line. To generate this text file, we need to retrieve all the documents that create web pages on your site.

  • Query all the documents that create web pages.
  • Increase the page size to 100 to limit the number of pages.
  • Since you will have many documents on each page, use “fetch” to ensure that only the necessary fields are queried. In the example below, no fields are queried.
// recursively fetch all pages
function getPage(api, page, documents) {
  return api.query(
    prismic.Predicates.any("document.type", ["page", "post"]),
    { page: page, pageSize: 100, fetch: [] }
  ).then(function(response) {
    if (response.next_page !== null) {
      return getPage(api, page + 1, documents.concat(response.results));
    } else {
      return documents.concat(response.results);
    }
  });
}

app.route('/sitemap.txt').get(function (req, res) {
  prismic.api(configuration.apiEndpoint).then(function(api) {
    return getPage(api, 1, []);
  }).then(function(documents) {
    var body = "";
    documents.forEach(function(doc) {
      body += (req.protocol + '://' + req.headers.host + configuration.linkResolver(doc) + "\r\n");
    });
    res.send(body);
  }).catch(function(err) {
    res.status(500).send("Error: " + err.message);
  });
});


Faster pages rank better

Your API and media assets are delivered via a global network of edge locations (CDN) located all over the world.

Calls made either from your servers or your visitor's clients will be directed to the closest edge location. The most frequent requests will probably be cached there and served with almost no network latency.

All of our development kits ship with a cache, making it easy to include no matter which technology you use to display your content.

Did this answer your question?