Improving SEO on the website

According to Wikipedia:

Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.

Successful SEO means a web page will be more likely to appear higher on a search engine results page. This is a complex and dynamic process, since search engines do not fully disclose their algorithms and change them from time to time.

According to Webopedia, many factors can potentially be involved in the search ranking of a particular web page:

Keyword density, or the frequency with which a targeted word or phrase appears in the content of the page. (SEO is improved by keywords that are used appropriately.)
Bounce rate, or how often a user visits the page and exits without visiting any other pages. (High bounce rate can detract from SEO.)
Metadata, or the information that summarizes the content on the page.
Social media traffic, which indirectly signals that a page contains content that’s in high demand. (High traffic from social media is beneficial to SEO, but lack of social media traffic doesn’t necessarily have a negative impact.)
Links, including backlinks, outbound links, and internal links, which indicate credibility and relevance to and from other content on the internet. (Google looks favorably on sites that strategically direct traffic to other sources.)
EAT (Google’s acronym for expertise, authority, and trustworthiness), which signifies that a page has a reputable author.
Security, as signified by a site’s SSL certificate, which search engines use to verify that site has a secure connection and it’s safe to share personal information.
Load speed, or the time it takes a web page to completely load. (Slow load speed can detract from SEO.)
Mobile responsiveness, or how a web page adjusts to different screen sizes.
User experience, or the features that could improve (or diminish) a user’s interaction with the content on a page.

This article focuses on a specific technique for improving SEO, which is to incorporate structured metadata on the contents of each page to social media platforms and search engines using a package called next-seo.

Next SEO is a plug in that makes managing your SEO easier in Next.js projects. It allows you to easily add SEO attributes (metadata) into specific pages, or have default attributes on every page via the _app component.

Next SEO supports the Open Graph protocol which was created by Facebook but also supported by Twitter and Linkedin. In addition, Next SEO supports Twitter Cards and Schema JSON-LD data which are used by Google, Microsoft, Pinterest, Yandex.

My default next-seo configuration is in next-seo-config.js and loaded on every page using the DefaultSeo component in _App.tsx

const SEO = {
  openGraph: {
    type: 'website',
    locale: 'en_AU',
    site_name: 'Learning Jamstack',
    images: [
      {
        url: 'https://learning-jamstack.hellotham.com/images/screenshot.png',
        alt: 'Screenshot'
      }
    ]
  },
  twitter: {
    handle: '@chris1tham',
    site: 'Chris1Tham',
    cardType: 'summary_large_image'
  }
}

export default SEO

On the index page, I add additional JSON-LD tags appropriate for a blog site as well as the site title and description

<NextSeo
  title={site.title}
  description={site.description}
  openGraph={{
    title: site.title,
    description: site.description
  }}
/>
<BlogJsonLd
  url={site.url}
  title={site.title}
  images={[site.url + '/images/screenshot.png']}
  datePublished="2020-12-01"
  dateModified={buildDate}
  authorName={site.author}
  description={site.description}
/>

There are also user profile specific Open Graph and JSON-LD tags:

<NextSeo
  title={title}
  description={description}
  openGraph={{
    title: title,
    description: description,
    type: 'profile',
    profile: {
      firstName: 'Chris',
      lastName: 'Tham',
      username: 'chris1tham',
      gender: 'female'
    },
    images: [
      {
        url: site.url + '/images/hellokitty.jpg',
        alt: title
      }
    ]
  }}
/>
<SocialProfileJsonLd
  type="Person"
  name="Chris Tham"
  url={site.url}
  sameAs={[site.facebook, site.instagram, site.linkedin, site.twitter]}
/>

Finally, for each blog post/article, we use specific article tags:

      <NextSeo
        title={meta.title}
        description={meta.description}
        openGraph={{
          title: meta.title,
          description: meta.description,
          type: 'article',
          article: {
            publishedTime: meta.date,
            section: meta.categories[0],
            authors: [meta.author],
            tags: meta.tags
          },
          images: [
            {
              url: site.url + meta.featured_image.replace('.svg', '.png'),
              alt: meta.title
            }
          ]
        }}
      />
      <ArticleJsonLd
        url={url}
        title={meta.title}
        images={[site.url + meta.featured_image.replace('.svg', '.png')]}
        datePublished={meta.date}
        dateModified={meta.date}
        authorName={[meta.author]}
        publisherName={meta.author}
        publisherLogo={site.url + '/android-chrome-512x512.png'}
        description={meta.description}
      />

There are various tools to check the validity of the SEO metadata

Improving SEO on the website

Subscribe to get updates to this site!

Subscribe