What is this project ?

Why is SEO important?

Example from Prismic blog

Good SEO gives your site the best chance at ranking high on Google, giving you more visitors. You can have the nicest site in the world, but it doesn’t matter if no one sees it. If you’re not in the top 10 sites of Google search results you’ll be seen by almost no one.

Better SEO leads to increased traffic, which means you’ll get more of whatever your site’s goals are. More sales, more leads, or a bigger audience.

Compared to other methods like advertising, SEO is a cost-effective way to get people to your site. Especially as a developer, if you can nail the technical SEO up front, the site will reap the rewards for years to come.

If you want to learn more about how you as a developer impact SEO, dig a little deeper in my other post.

Preformatted element

• Push to deploy. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
• SSL certificates. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim.
• Database backups. Mattis mauris semper sed amet vitae sed turpis id. Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.

Next.js vs Create React App for SEO

Before we can fully appreciate what Next.js offers us, let’s look at the early days of building with React. You were encouraged to use Create React App, which builds out your page with client-side rendering (CSR). CSR means that the user gets sent an empty shell for their HTML along with JavaScript files. When the JavaScript loads and runs, it injects all of the needed elements into the DOM, building the content on the user’s machine.

Not only is this slower because it takes time for the page to load and render, but it comes with the assumption that the JavaScript is going to load and execute perfectly on whatever machine it’s being run on. That’s risky when you consider that Google’s web crawler can run JavaScript, but it’s not known how well it performs, leaving far too much to chance.

Instead of sending an empty HTML document, it’s better to have all of the content already baked into the HTML when you send it to the user. This way if JavaScript takes a while to load or fails outright, users (and Google) can still read and access your content.

1. Next.js vs Create React App for SEO
2. Next.js rendering methods: SSG, SSR, ISR
3. Next/Image
4. Next.js vs Create React App for SEO
5. Next.js rendering methods: SSG, SSR, ISR
6. Next/Image

Next.js rendering methods: SSG, SSR, ISR

Now that we know we don’t want to render client-side for best SEO results, let’s run down the different rendering methods that Next.js has built-in that solve the issues above.

Using semantic HTML elements

Our project is already using semantic elements, but this is entirely up to us. Next.js doesn’t do it for us, and won’t throw any errors or warnings if you create a project entirely with divs. Semantic elements are how Google figures out the content structure of your site, so they’re critically important.

First, let’s talk headings. Every single page needs to have just one <h1> . Most pages will have several <h2> elements. The more complex your content, the deeper your headings will go, from h1 to h6. Headings need to go in order as your information nests. This example outline shows what I mean :

I made sure all of our Slices are wrapped in elements. the element defines a section of a webpage with related content. So a Pricing Table Slice would be a because everything inside is related to Pricing. Sections should always contain a heading.

I also used the , , and elements in specific places.

// components/Layout.js
import Navbar from "./Navbar";
import Footer from "./Footer";
import Head from "next/head";
export default function Layout({ children, metadata, settings }) {
  return (
    <>
      <Head>
        <title>
          {metadata.meta_title} - {settings.data.website_name}
        </title>
        <meta name="description" content={metadata.meta_description} />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Navbar settings={settings} />
      <div>{children}</div>
      <Footer />
    </>
  );
}

This is my new slice to test publishing. I hope it works !!