In this article, we are adding SEO and PWA in Gatsby, To make our blog optimized for Search engines.

SEO stands for search engine optimization, which helps to rank higher on search engine results, and this creates a perception of credibility and trust among the users.

PWA stands for Progressive Web Application, with this we can provide our users with an app-like experience.

SEO and PWA in Gatsby Application

Both features are very important and necessary for any app that wants a highly interactive and search engine-friendly Interface.

Now, Let’s add an SEO feature to our Gatsby application.

Adding SEO Page in Gatsby Application

This article is the fifth article of the Gatsby and WordPress API Integration series, So we are using our previous files from the previous articles. Click on the below link to see the list of previous articles.

Gatsby and WordPress API Integration Series

Now, you don’t need to create an SEO page in Gatsby, because it’s already been created by Gatsby when you create a project.

But by default, it takes default data and you need to pass dynamic data to this SEO page so that each page like singlePost.js, singlePage.js, category.js, and tag.js can have SEO features.

Here is the updated seo.js page that is getting dynamic values like title, description, image, and article from each page I mentioned above.

import React from "react";
import { Helmet } from "react-helmet";
import { useLocation } from "@reach/router";
import { stripHtml } from 'string-strip-html';
const Seo = ({ title, description, image, article }) => {
  const { pathname } = useLocation();
  const siteUrl = "https://npmrun.com";

  const seo = {
    title: title ? `${title} | npmrun.com` : " NpmRun Programming Blog",
    description: description || "Learn React, Angular and other Javascript Libraries and Framework, Daily Article Updates.",
    image: `${image || "/npmrun.png"}`,
    url: `${siteUrl}${pathname}`,
  };

  return (
    <Helmet title={stripHtml(seo.title).result}>
      <meta name="description" content={stripHtml(seo.description).result} />
      <meta name="image" content={seo.image} />

      {/* OpenGraph tags */}
      <meta property="og:url" content={seo.url} />
      {article ? <meta property="og:type" content="article" /> : null}
      <meta property="og:title" content={stripHtml(seo.title).result} />
      <meta property="og:description" content={stripHtml(seo.description).result} />
      <meta property="og:image" content={seo.image} />

      {/* Twitter Card tags */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={stripHtml(seo.title).result} />
      <meta name="twitter:description" content={stripHtml(seo.description).result} />
      <meta name="twitter:image" content={seo.image} />
    </Helmet>
  );
};

export default Seo;

Here I installed on npm modules stripHtml to strip HTML entities from the content and title.

To install stripHtml you need to run this command.

npm install string-strip-html

Now, to add SEO components to pages you just have to import this component, let’s check a file from previous articles that is singlePost.js, which is used to display single post information getting from the WordPress API with Gatsby and graphQL.

Here is the code for the updated singlePost.js file.

import React from "react";
import { graphql } from "gatsby";
import { Link } from "gatsby";
import Seo from "../components/seo";
const SinglePost=({data})=>{
    const post = data.wpPost;
    const tags = data.wpPost.tags.nodes

    return (
        <>
          <Seo title={post.title} description={`${post.excerpt}`} image={post.featuredImage.node.sourceUrl}/>
        <div class="container">
            <h1>
                {post.title}
            </h1>
            <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
            <div>
            Tags : <br/>
            {tags.map((tag,i)=>(
              <Link  key={i} to={`/tag/${tag.slug}`}><u>{tag.name}</u><br/></Link> 
            ))} 
            </div>
        </div>
        </>
    )
}
export default SinglePost;
export const query = graphql`
  query($id: String!) {
    wpPost(id: { eq: $id }) {
      title
      content
      excerpt
      tags {
        nodes {
          slug
          name
        }
      }
      featuredImage {
        node {
          sourceUrl
        }
      }
    }
    allWpPost(sort: { fields: [date], order: DESC } limit: 5) {
      edges {
        node {
          id
          title
          excerpt
          slug
          featuredImage {
            node {
              sourceUrl
            }
          }
         
        }
      }
    }
  }
`;

Note: You should have a header and footer component inside your application for proper layout.

So this is how you can add an SEO page in Gatsby application.

Now, After adding SEO page in gatsby application, Let’s work on our PWA feature, and this to inside our application.

Adding PWA in Gatsby Application

PWA configuration in Gatsby is very easy, you just need to add some plugins and configure your gatsby-config.js file.

Install these plugins to add PWA features to your Gatsby application.

npm install gatsby-plugin-offline gatsby-plugin-manifest

Now, Let’s configure our gatsby-config.js file and add this code inside this.

{
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
    `gatsby-plugin-offline`,

That’s it, now you are good to go, re-run your application with gatsby develop command.

After this, you will be able to see an install button on your browser to install this website like an app on your desktop as well as on your mobile phone.

After installing it, your website will open like an application installed on your system.

Now, you can see, it looks like a window application installed on your desktop, and here is the shortcut app icon you will see on your desktop.

That’s All Everyone, Share this article with your friends, Happy Coding.