This blog post is part of a series of posts on developing a blog with Next.js and Prismic. If you missed the first one you can find that here. If you have not been following along or just want to deploy something to Now, then you can pull the starter files from here and checkout branch 04-previewing.

In this post we will be using Now to deploy our blog. Now makes serverless application deployment easy! Not only that, but their free tier is very generous. At the end of this post we will also be looking at setting up the GitHub integration where each PR deploys that branch so you can test. Then once merged to master it will also deploy. 

If you have not been following along you can skip this bit, otherwise, I have updated all of the packages to the latest version (at the time of writing) so to make sure there is no inconsistencies you should update also. The versions I am using are:

A look at how to deploy a Next.js and Prismic powered blog to Now's serverless architecture. Now make this very easy and their free tier is very generous. 

Deploying a Prismic and Next.js blog to Now

Ok so now that your all up to date let's get started. First thing we need to do is head over to Now and sign up for an account. You can sign up via email or GitHub which is the handiest. 

Next we need to install the Now CLI and log into our newly created account:

Just follow the instructions to log in. They make it very easy. 

Ok time to add some configuration files and then we are ready to deploy. (I know already)

At the root of the project add a new file:

The configuration is light weight enough. We set the version to use Now V2. We set next.config.js as our entry point which we will create in just a tick. Then finally we tell Now which builder to use. Builders are modules that take a deployment's source and return an output, consisting of either static files or dynamic Lambdas. In this case we are telling Now to use the Next.js builder. 

Before we can deploy we just need to create the next.config.js entry point. This file won't actually do anything but it is needed. 

All that we need to do now is deploy 😃Back in your terminal we are going to use Now CLI to deploy. In your terminal, in the project directory run the following:

This will deploy your application in a couple of seconds.  In the terminal you see a URL output, you can visit this to see your deployed site. The one I just deployed while writing this article can be viewed at https://nextjs-prismic-blog-series-2s8fta3ul.now.sh.

From here any time you make some changes you can just re-run now deploy and it will create new instance. If you do this, you might notice that each build has a new URL. This is due to Now's immutable architecture. If you own a domain that's not in use we  can alias the latest build to it. But we would need to do this manually with each new build, remember builds are immutable. So each time we deploy we need to ensure the latest build is aliased to our domain. You could easily forget to do this. But luckily the Now Github integration takes care of this and is simple to set up along with being powerful.

At the end of this section what we will have is:

Each time we open a PR, Now will build and deploy with our latest changes

Once a PR is merged to master, Now will build and deploy with our latest changes along with auto aliasing that build to our defined domain

Lets connect Github, head over to your account on Zeit and you should see an option to install Now for Github, click on this.

 From there just follow the steps, you will be asked what repositories you would like to add it to. You can add it to all or just selected ones. All that you need to do on the selected repositories is ensure there is a  now.json configuration.

With these steps we have now enabled deploys on every push in branches and pull requests.

Last thing is to auto alias our domain when built on master.I didn't actually purchase a domain for the example blog so the domain I use won't be accessible. I recently purchased another domain for a different project over at https://zeit.co/domains and it made everything simple. If you have a domain not purchased with Zeit, that's no problem it will still work, you can find the steps to follow here to verify it. You may need to do this before the following will work correctly. To auto alias our domain we simply need to add an alias property to our now.json config. See the updated now.json configuration below:

Once you commit and push that, any new PR opened that has this config, will be picked up by Now and a build will start. You can see and example PR I have opened here. When first opened, you will see some activity like:

Once complete, this will give you a unique URL to view your build. If you are happy with it, all you have to do is merge to master. From here now will then build and deploy again. If the alias property is set in now.json this will auto alias to your domain every time. 

If you have no custom server or routes then the above should cover you. But in this series we are using a custom server along with custom routes so we will need to handle them. If you tried refreshing one of the blog post pages you would of noticed a 404 error. To fix this we need to add routes property to our now.json configuration, add the following:

"routes": [
    {
      "src": "/blog/(?<slug>.+)",
      "dest": "/blogPost?slug=$slug"
    }
  ]

We will still need a custom server for local development for now as at the time of writing, Now Dev is still in development. Once complete it will simulate Now's environment locally. You can keep an eye on their blog for updates, also there is an open issue.

This blog post is part of a series of posts on developing a blog with Next.js and Prismic. If you missed the first one you can find that here. In this post we add functionality to our blog so that you can preview unpublished posts using Prismic's excellent preview feature.

If have been coding along in the series, we will be continuing on from where we finished up in my previous post, Google Analytics with Next.js. If you haven't been coding along to date and want to you can find code the on GitHub (you will want to start at 03). You will also find the finished code in that repository if you would like to use it as a reference. 

So Prismic has the concept of preview, which allows you to preview your work in progress content without publishing. You just need to save it as a draft and it can be previewed. Recently they have also released a cool feature which allows you to share the preview link with anyone and it gives them access to preview your content. Now, just a heads up, we will not be implementing the shareable preview feature in this article. This is only because I choose not to ship Prismic's javascript library into production. Instead my workflow is to have a local instance of my blog running when I want to preview my work in progress posts. I will  add a suggestion at the end on how you should be able to achieve this feature if you feel you need it. Ok so let's get started.

Before we get into the development, let's quickly set up our Prismic Blog preview url up. To do this, you need to log into your Prismic dashboard and head into your blog. From here navigate to settings (bottom left sidebar), here you should see a list item for "Previews", click it.  You should see an option to "Add new site", enter your site name, for the Preview URL add http://localhost:3000/preview and click "Add Site". You should then have a screen that looks something along the lines of:

Now let's set our app up to show the preview. As mentioned we are going to load the Prismic javascript library first. In your custom _document.js we are going to import our PRISMIC_API_URL. 

Adding Prismic preview functionality to our blog so that you can preview unpublished posts. Excellent for when developing new features or content types. 

import { PRISMIC_API_URL } from '../config';

Then in a similar way to how we included the Google scripts on the page we are going to create a function to inject some code and create some window variables. So just before the render function add this snippet: 

setPrismic() {
    return {
      __html: `
        window.prismic = {
          endpoint: '${PRISMIC_API_URL}'
        }
      `
    };
  }

And then let's add Prismic's library and add the window variable. Just below where we added the Google scripts, let's add this one:

// we only load this in development mode
{!isProduction && (
  <Fragment>
    <script dangerouslySetInnerHTML={this.setPrismic()} />
    <script
      type="text/javascript"
      src="//static.cdn.prismic.io/prismic.min.js"
     />
  </Fragment>
)}

Let's create the preview endpoint for Prismic. We are going to need to install a few more dependancies to help us get this done, so lets add those now: 

yarn add cookie-parser cookies prismic-javascript next-cookies 

Then in our custom server let's include these and our linkResolver while we are at it:

const Cookies = require('cookies');
const cookieParser = require('cookie-parser');
const Prismic = require('prismic-javascript');
const { linkResolver } = require('./helpers');

Following that lets add this block of code just after where we handle the route /blog/:slug: 

server.get('/preview', (req, res) => {
  const { token } = req.query;
  Prismic.getApi('https://YOUR_BLOG_NAME_HERE.prismic.io/api/v2', {
    req: req
  }).then(api => {
    api.previewSession(token, linkResolver, '/').then(url => {
      const cookies = new Cookies(req, res);
      cookies.set(Prismic.previewCookie, token, {
        maxAge: 30 * 60 * 1000,
        path: '/',
        httpOnly: false
      });
      res.redirect(302, url);
    });
  });
});

I think Prismic explain what is going on in this block perfectly so I'm not going to change it, heres what they say: 

Retrieve the preview token from the token parameter in the query string

Call the Prismic development kit with this token and the linkResolver will retrieve the correct URL for the document being previewed

Store the preview token in the io.prismic.preview cookie and redirect to the given URL

So in summary when we click "Preview" from a work in progress blog post, it will come to our preview url with a query string which contains a token. Then this block sets it as a cookie and takes care of redirecting us to the correct location. 

NOTE: You might of easily missed it, but in the url in the above block you need to update YOUR_BLOG_NAME_HERE with your blog name. 

So we now have this endpoint, but Next.js is not aware of what we are doing here so let's stop a 404 error from happening and create a place holder page for the preview route. Let's add a new preview.js file to the pages directory and add this code:

const Preview = () => <div>preview...</div>;

export default Preview;


Now all that is left to do is grab the preview cookie value and pass it to Prismic as a ref to authenticate the preview request. First lets update our getBlogPostAPI function to accept the ref parameter. We also want to add this to the request to Prismic. Below you will find the updated function:

Then let's update our blogPost page to grab the cookie and pass it through to the api call. So in blogPost.js we need to import next-cookies:

static async getInitialProps(context) {
  const { slug } = context.query;
  // here we use next-cookies to grab the cookies
  const cookies = getCookies(context);
  // then we grab the prismic preview cookie
  const ref = cookies['io.prismic.preview'];
  // finally we pass it trough to the api
  const response = await getBlogPostAPI(slug, ref);
  return {
    post: response
  };
}

While we are at it lets update the homepage to grab this cookie and pass it through as well. This way once it is set you will be able to see all unpublished posts. In our index.js file in the pages directory let's again import next-cookies and update getInititalProps.

import getCookies from 'next-cookies';

// ... OTHER CODE

Index.getInitialProps = async context => {
  const cookies = getCookies(context);
  const ref = cookies['io.prismic.preview'] || null;
  const response = await getBlogPostsAPI({ pageSize: 5, ref });
  return {
    posts: response.results
  };
};



You might be wondering two things at his point:

> Do we not need to update the getBlogPostsAPI function?

Nope. If you check it out you will see that when we originally coded it, we set it up to spread any parameters we pass through.

> Why are we defaulting to null in getInitialProps and we didn't in the blog post page's? 

For the blog post, the getBlogPostAPI defaults it to null, but in this case we are passing through an unknown order and amount of parameters so we need to ensure it defaults to null before we pass it through. 

All that we need to do is try it out now. First spin you your local dev environment, yarn dev. Then head back over to your blog and create a new blog post, add a title, some text to the body and fill in the SEO tab also. (Filling in all the fields in SEO tab is important, they are required by the app) You should have something like this:

If you click on the preview icon (top right next to publish) it should now take you to your localhost, then redirect you to your blog post. If you head back to the homepage you should also the unlisted blog post in the list.

And there you have it. You can now see how your content will look locally. One of the biggest advantages I found using this is when I was developing new types of content blocks, such as code blocks, it allows you to test them out without having to publish them. In an up coming post I will be showing you how to use Prismic's slices and how to develop components for them. We will be using preview to test them out. If you got stuck along the way you can find the finished code here.

So I mentioned at the beginning that the way I set up this preview was to suit a certain workflow. I didn't like the idea of shipping an extra javascript library when I would only ever use it locally. But if you need to access preview on your live site, I would suggest removing the production check surrounding the Prismic scripts in your _document.js, also you will need to add your live sites URL rather than localhost and I think that should do the trick.  You can get the shareable link when viewing a preview of your blog post. (I didn't get a chance to actually try that out so if you run into issues give me a shout). 

As always if you enjoyed the post give it a share, or if you have any feedback, questions or corrections please give me a shout on Twitter.

This blog post is part two in a series of posts on developing a blog with Next.js and Prismic. If you missed the first one you can find that here.

In this post we will be adding Google Analytics to our blog by leveraging Next.js's custom _document.js file. 

If have been coding along in the series, we will be continuing on from where we finished up in my previous post, SEO in Next.js. If you haven't been coding along to date and want to you can find code the on GitHub (you will want to start at 02). You will also find the finished code in that repository if you would like to use it as a reference.

For the purpose of this post I am assuming you already have a Google Analytics account. If not, head on over to Google to set one up. To complete this part of the series, all you need is your tracking code which will begin with a UA- prefix. (UA-XXXXXXXX-X)

Ok let's get started. First up we are going to create a custom _document.js that will load our Google Analytics script for us. We will only load this script in production so that we don't track items locally. In the pages directory create a new file, _document.js and add the following code:

In this post we look at adding Google Analytics to our Next.js blog powered by Prismic.io. This part 3 or a series of blog posts.

// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
import Document, { Head, Main, NextScript } from 'next/document';
// We wrap our scripts below in Fragment to avoid unnecessary mark up
import { Fragment } from 'react';
export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    // Check if in production
    const isProduction = process.env.NODE_ENV === 'production';
    const initialProps = await Document.getInitialProps(ctx);
    // Pass isProduction flag back through props
    return { ...initialProps, isProduction };
  }

  // Function will be called below to inject
  // script contents onto page
  setGoogleTags() {
    return {
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-XXXXXXXX-X');
      `
    };
  }

  render() {
    const { isProduction } = this.props;
    return (
      <html>
        <body>
          <Main />
          <NextScript />
          {/* We only want to add the scripts if in production */}
          {isProduction && (
            <Fragment>
              <script
                async
                src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"
              />
              {/* We call the function above to inject the contents of the script tag */}
              <script dangerouslySetInnerHTML={this.setGoogleTags()} />
            </Fragment>
          )}
        </body>
      </html>
    );
  }
}

Most of the code above is the default _document.js supplied by Next.js. So what have we added to it? In getInitialProps we are checking if we are in production. The _document.js is is only rendered on the server so we will always have access to this process. We then pass this flag through to the props. 

Next we have the setGoogleTags function. All we are doing here is returning the contents we want to populate the script with via React's dangerouslySetInnerHTML. Towards the bottom we then have a check for production using our flag we created earlier. If in production we are going to render two script tags. One will load the required Google Tag manager library the other will inject our initialisation code. All that's left to do in this file is to update all references of UA-XXXXXXXX-X with your tracking code.

Now that we are after initialising Google Analytics we need to ensure we are firing a page view when we navigate client side. To do this will make some updates to our custom _app.js. Before that let's create a function in our helpers file that will fire the page view event. Add the following function and don't forget to add it to the exports.

function trackPageView(url) {
  try {
    window.gtag('config', 'UA-XXXXXXXX-X', {
      page_location: url
    });
  } catch (error) {
    // silences the error in dev mode
    // and/or if gtag fails to load
  }
}

What we are doing here is calling gtag (that we bound to the window earlier) with a url to track the current page view. We also wrap this in try catch block so that we don't get any errors in development mode or in production if the library fails to load for any reason. Which can happen and has happened to me causing massive page load delays. You will also need to update your tracking code (UA-XXXXXXXX-X) above. Ideally you would have some sort of error notification added to the catch in production so that you know if Google Analytics is not running, although in a small blog I wouldn't count this as critical but it is worth mentioning.

Let's put that newly created function to use. Our goal: When a user navigates client side to a new route we want trigger a page view. To do this will monitor route changes in our _app.js and call our new function when a route change happens. To do this let's add the following two imports to your _app.js:

import Router from 'next/router';
import { trackPageView } from '../helpers';

Here we are importing Next.js's router and also the helper function we just created.  Next let's add a lifecycle hook where will check for the route change then track a page view:

componentDidMount() {
  Router.onRouteChangeComplete = url => {
    trackPageView(url);
  };
}

Here we are leveraging Next.js Router's method to see when route change has been complete, which gives us the page's url. 

Now all that is left to do is test it out. To do this we first want to run it in dev mode and ensure there are no errors and also calls going to Google (you can check in the network tab of developer tools in Chrome). Then let's run it in production mode, which is yarn build followed by yarn start. Here we want to see no errors and we do want to see some calls going to Google. Also if you now log into your Google Analytics dashboard you should see a Real Time user active. If you got stuck along the way you can check out the code here.

In this post we added some simple page view tracking. Although using the method bound to the window is not ideal for this simple use case it works. I would like to revisit this in the future and hopefully leverage some plug in's for it. If you need to track events you could easily add a trackEvent function the helpers file and use it in the same manner as the trackPageView. 

Recently I have been working a lot with Next.js and found myself wanting a simpler way of setting/updating SEO related meta tags. Next.js makes it easy to set and update these with the use of it's <Head> component, but you still had to know which tags to set and override. In each project I was doing I was setting up the same tags over and over. To try reduce this I decided to create the plug-in next-seo. 

For now the next-seo just covers some basic tags such as <title> and some Open Graph tags. I am currently working on the road map for it and hope to incorporate the likes of JSON-LD, extend the social media element and greatly improve the documentation in the near future. In the rest of this post we look at adding next-seo to Next.js's Hello World example. 

IMPORTANT: I recently released V1 of Next SEO, so the example is a little outdated. You can view the updated plugin and documentation here. The principals of the plugin mostly remain the same so if your interested it would be worth reading the example at least. 

Ok let's get started by creating a new Hello World app by running the following commands:

Brief introduction to next-seo a new plugin for making SEO easier in Next.js projects. In this post we walk through adding it to a Hello World app.

npx create-next-app --example hello-world next-seo-example
cd next-seo-example

Next up we want to leverage Next.js's custom _app.js. The goal here is that we set some default SEO attributes that will be rendered on every page. Then we can override specific ones as needed on any page without needing to redeclare the defaults. The _app.js is initialised on every page. 

Let's create a new file in the pages directory and name it _app.js. Then paste the code below:

import App, { Container } from 'next/app';
import React from 'react';
// we import the plugin
import NextSeo from 'next-seo';

// let's create a configuration for next-seo
const DEFAULT_SEO = {
  title: 'Next.js SEO Plugin',
  description: 'SEO made easy for Next.js projects',
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.garymeehan.ie',
    title: 'Next.js Seo',
    description: 'SEO made easy for Next.js projects',
    image:
      'https://prismic-io.s3.amazonaws.com/gary-blog%2F3297f290-a885-4cc6-9b19-3235e3026646_default.jpg',
    site_name: 'GaryMeehan.ie',
    imageWidth: 1200,
    imageHeight: 1200
  },
  twitter: {
    handle: '@garmeeh',
    cardType: 'summary_large_image'
  }
};

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        {/* Then we pass the config to the plugin */}
        <NextSeo config={DEFAULT_SEO} />
        <Component {...pageProps} />
      </Container>
    );
  }
}

There are only a few small additions in this code from the default _app.js. 

What we are doing above is including next-seo, then we declare a configuration object before call <NextSeo> and passing the configuration to it. Ok let's break down what get's rendered based on this configuration object. title & description will render there respected meta tags. Both the openGraph and twitter object will render tags based on Open Graph. The Open Graph protocol allows for any webpage to become a rich object in a social graph. I won't go into great detail now but if you want you can read more on it here. One thing to note is that the image width and height is important to declare and adhere to, as it will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.

Ok so now that we have the defaults in place, lets override the title for the about page. If we open up  about.js and replace it with the following code snippet: 

import NextSeo from 'next-seo';

export default () => (
  <div>
    <NextSeo
      config={{
        title: 'About us',
        description: 'Updated description as well'
      }}
    />About us
  </div>
);

In this case we are not passing a full object to the <NextSeo>, we are only passing a custom object and defining title and description. This will result in the title and description meta tags being updated and all our previous ones remaining the same. 

To test it all out run yarn dev and navigate to http://localhost:3000/ in your browser. If you inspect your homepage <head> tag you should see:

Then when you navigate to the about page if you inspect again you should see that the title and description has been updated. 

And there you have it, a quick introduction to next-seo. As I mentioned above this is still a work in progress and I will be continuing to improve it over the coming weeks. If you have any suggestions or would like to help out you can find me on Twitter or check out next-seo on GitHub.

We look at default SEO, page specific SEO, Open Graph tags and JSON-LD. Along with enriching these with Prismic.

The first part of this post is relevant to all Next.js projects.

If you are coding along we will be continuing on from where we finished up in my previous post. If you didn't complete the first post and want to code along you can find code the on GitHub. You will also find the finished code in that repository if you would like to use it as a reference. 

Next.js exposes a built in component for us to append elements to the <head> of the page. One very important thing to note is that all tags must have a key attribute to avoid duplicate tags. Another thing to note is that the contents of <head> get cleared when unmounting the component. Bearing this in mind the approach I am going to take here is to define a custom set of SEO attributes that should be present on every page, then override the ones that are necessary. I found this a good way to ensure I have default SEO on all pages. To achieve this we will use a custom _app.js component as it gets initialised for each page. 

Ok so let's get to it. We first need to create a new file _app.js in the pages directory and paste the code from below. 

import App, { Container } from 'next/app';
import React from 'react';
// here we are importing Next's custom component
// for managing the <head>
import Head from 'next/head';
// We will create this object shortly
import { DEFAULT_SEO } from '../config';
export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <Head>
          {/* We will add meta tags here shortly */}
        </Head>
        <Component {...pageProps} />
      </Container>
    );
  }
}


Most of the _app.js code above is the default, we are just importing a couple of things and adding the <Head></Head> component. We are also importing a DEFAULT_SEO object, let's create this now and add the meta tags that will use it. Once we have that done I will go through what we added. Firstly in your config.js add the following:

export const DEFAULT_SEO = {
  title: 'Next.js & Prismic SEO',
  description: 'SEO made easy for Next.js & Prismic',
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.garymeehan.ie',
    title: 'Next.js & Prismic SEO',
    description: 'SEO made easy for Next.js & Prismic',
    image:
      'https://prismic-io.s3.amazonaws.com/gary-blog%2F3297f290-a885-4cc6-9b19-3235e3026646_default.jpg',
    site_name: 'GaryMeehan.ie',
    imageWidth: 1200,
    imageHeight: 1200
  },
  twitter: {
    handle: '@garmeeh',
    cardType: 'summary_large_image'
  }
};

Note: Don't forget to update the config object with your own details :) 

Now that we have that object, we can update the placeholder comment in the <Head> component of our _app.js,  with the following code:

<title key="title">{DEFAULT_SEO.title}</title>
<meta
  key="description"
  name="description"
  content={DEFAULT_SEO.description}
/>
<meta
  key="twitter:card"
  name="twitter:card"
  content={DEFAULT_SEO.twitter.cardType}
/>
<meta
  key="twitter:site"
  name="twitter:site"
  content={DEFAULT_SEO.twitter.handle}
/>
<meta
  key="og:url"
  property="og:url"
  content={DEFAULT_SEO.openGraph.url}
/>
<meta
  key="og:type"
  property="og:type"
  content={DEFAULT_SEO.openGraph.type}
/>
<meta
  key="og:title"
  property="og:title"
  content={DEFAULT_SEO.openGraph.title}
/>
<meta
  key="og:description"
  property="og:description"
  content={DEFAULT_SEO.openGraph.description}
/>
<meta
  key="og:image"
  property="og:image"
  content={DEFAULT_SEO.openGraph.image}
/>
<meta
  key="og:image:width"
  property="og:image:width"
  content={DEFAULT_SEO.openGraph.imageWidth}
/>
<meta
  key="og:image:height"
  property="og:image:height"
  content={DEFAULT_SEO.openGraph.imageHeight}
/>
<meta
  key="og:locale"
  property="og:locale"
  content={DEFAULT_SEO.openGraph.locale}
/>

Ok so you have probably seen the likes of title and description tags before, which are probably the bare minimum needed for SEO purposes. You might not have seen the Open Graph tags which are the ones that start with og:. The Open Graph protocol allows for any webpage to become a rich object in a social graph. I won't go into great detail now but if you want you can read more on it here. 

You may have noticed we are setting the height and width of the og:image tag, this is important so that Facebook can render your image the first time your page is shared, without these it will only be on the second share.

We also have a Twitter card type, we have set it to summary_large_image which you can see a preview of in the image above. For more information on the different types available check out Twitter's docs here. Twitter has it's own tags, for example it has twitter:title but there is no need to duplicate tags as Twitter will read the og:title. You can see the full list here.

Now would be a good time to test out what we have so far. Running your app locally and inspecting the <head> element you should see all of our meta tags rendered correctly.

Now that we have our default SEO we want to update it based on what ever blog post we are viewing. We have the bulk of the work done for this so it won't take too much effort to do. Let's open blogPost.js and add import Head from 'next/head' along side our other imports. Now we can just add the <Head> component to our render method of our blogPost.js page just after the opening of <DefaultLayout>. Within this we can add/override any tag, for example to override the <title> we would add:

<Head>
  <title key="title">{post.title[0].text}</title>
</Head>

Try running the app now and you should see the page title update when you navigate to your blog post. If you want to override any more tags for the blog post, this is where you would do it. 

So far we have covered your basic meta tags for SEO, we also covered adding Open Graph tags to enrich your page when sharing it on social media. Next up we are going to look at enriching our blog post for Google with the help of some structured data in the form of JSON-LD. Structured data is a standardised format for providing information about a page and classifying the page content, in our case we will be classifying our blog post as an article and supplying information such as when it was published and the author. More info on structured data & type article.

Below you will find the updated code for our blog post page:

Note: If your app is running, it is expected that this code will be broken, read on to see why.

import React, { Component } from 'react';
import { RichText } from 'prismic-reactjs';
import { getBlogPostAPI } from '../api';
import linkResolver from '../helpers';
import DefaultLayout from '../layouts';
import Head from 'next/head';

export default class BlogPost extends Component {
  static async getInitialProps(context) {
    const { slug } = context.query;
    const response = await getBlogPostAPI(slug);
    return {
      post: response
    };
  }
  // we have added a new function to return the JSON-LD
  addJSONLD(post, info, url) {
    return {
      __html: `{
      "@context": "http://schema.org",
      "@type": "BlogPosting",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "${url}"
      },
      "headline": "${post.og_title[0].text}",
      "image": [
        "${post.og_image.url}"
      ],
      "datePublished": "${info.first_publication_date}",
      "dateModified": "${info.first_publication_date}",
      "author": {
        "@type": "Person",
        "name": "Gary Meehan"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Gary Meehan",
        "logo": {
          "@type": "ImageObject",
          "url": "https://prismic-io.s3.amazonaws.com/gary-blog%2Fa64f6d7e-5c0e-4190-b852-2122e087ae2b_gm.jpg"
        }
      },
      "description": "${post.og_description[0].text}"
    }`
    };
  }

  render() {
    const post = this.props.post.data;
    // we are creating two new variables here
    const info = this.props.post;
    const url = `https://www.yourdomain.ie/blog/${info.uid}`;

    return (
      <DefaultLayout>
        <Head>
          <title key="title">{post.title[0].text}</title>
        </Head>
        <article>
          <h1>{post.title.length ? post.title[0].text : ''}</h1>
          {RichText.render(post.body, linkResolver)}
        </article>
        {/* here we inject the JSON-LD from the function into a script tag  */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={this.addJSONLD(post, info, url)}
        />
      </DefaultLayout>
    );
  }
}

So as you can see from the comments in the code we have three new parts. First up we have the addJSONLD function which simply returns JSON-LD for a blog post. We defined some new parameters, info and url which we pass to our new function. Finally we add a script tag, with a type of application/ld+json and we add the JSON-LD here via React's dangerouslySetInnerHTML. You might of noticed if that if you try running the app it will be broken, this is expected because we have referenced some fields that we are going to set up in the next section. (Any field above starting with og_ are not yet created on Prismic)

In this section we are going to take a look at a workflow I like that gives me control over how my blog posts are shared on social media and represented in Google. Head over to your Prismic account that we created in the first post and click on "Custom Types" in the left side bar, then "Blog Post" (or what ever you might have named it). From here we are going to add a new tab, you should see this option next to "Main". Let's call it SEO, and let's add  some fields via the JSON editor on the right. Add the code below, hit save and we can talk about it then:

What we have just done is created three new fields that we will give us the ability to manually set our title, description and image for when our post is shared.  

OG Title - Allows us to manually set the title of the page. 

OG Description - Having this field allows us to set the description of the page and also the Open Graph description. 

OG Image - We can now add an image that will be used by Open Graph when sharing on social media. It is important to remember here that the image should be 1200px by 1200px as this is what we defined earlier in our config.

Let's put them to use. If you click on "Content" in the left sidebar and click into your blog post, you should now see an SEO tab. Click on this and fill out all the fields and publish your post. If you need an image you can grab this one. You should see something along the lines:

If you remember from earlier we already have these fields referenced for the JSON-LD. All we need to do is update the  <Head> to override our defaults with our newly defined information. To do this, on the blogPost.js page update the <Head> component to this:

<Head>
  <title key="title">{post.og_title[0].text}</title>
  <meta
    key="description"
    name="description"
    content={post.og_description[0].text}
  />
  <meta key="og:url" property="og:url" content={url} />
  <meta key="og:type" property="og:type" content="article" />
  <meta key="og:title" property="og:title" content={post.og_title[0].text} />
  <meta
    key="og:description"
    property="og:description"
    content={post.og_description[0].text}
  />
  <meta key="og:image" property="og:image" content={post.og_image.url} />
</Head>

All we need to do now is test it out! So let's test it out in development mode and production mode. To do this we run: yarn dev for development mode and for production we need to first build it by running yarn build followed by yarn start. If you inspect the blog post code in your browser you should now see the updated meta tags along with the JSON-LD script tag. 

Two steps you could take at this point is to use a debug tool for validating your structured data, Google has one which can be found here and you can use the sharer debugger from Facebook which can be found here

Phew, that was a lot to take in. So in this post we have covered:

Enriching your page with custom Prismic fields for SEO

This is just a taste of what we could do with each of the items covered. You could probably write a post for each of them, but hopefully this gives you an idea of where to start. 

If you got this far be sure to check out this post, SEO in Next.js with next-seo, where I introduce next-seo a plug in to help with some of SEO related code we just wrote. 

Gary Meehan

Recent Blog Posts