Strtegies to Get This Nextjs Blog Quickly Indexed with Google

Hey there, fellow Next.js enthusiast! 👋 If you've just launched your shiny new website built with Next.js, like I just did with this blog, you're probably wondering the same thing: how to get it noticed by search engines?.

I started this new blog with Next.js, it is actually an excellent choice for SEO, as it provides several built-in features that can help improve this blog's search engine visibility. As soon as I purchased this domain, I registered this blog with Google Search Console. It is definitely the first step for any new website to get indexed and found by search engine. However, for a better seo performance, there are more to tackle....

Google Search Console Registration

As I've said, this is the first step to take, registering your website with Google Search Console. This allows you to monitor your site's performance in Google Search results and identify any issues that may affect your rankings.

Google can take some time to index a new website fully, take my site as an example, it is up and run for the past two days, I checked Google Search Console, only two pages are indexed right now. BTW, you can simply check how many pages have been indexed by typing site:yourdomain.com on the url address bar, it will show you all the indexed pages.

So I have done what are supposed to do:

I submitted my sitemap.xml to the GSC
I also manually requested indexing for some of my posts' pages using its "URL Inspection" tool.
I checked robots.txt file, and make sure it doesn't block search engines from crawling my website

However, even with all the steps being taken, indexing with Google can take time, especially for new websites. Google typically takes a while to discover and fully crawl a new site, particularly for a website such as this brand new one that has a low backlink profile and limited content.

Other SEO Optimization Strategies for New Websites

Optimize Meta Tags

What are meta tags? They are those little snippets of HTML that are placed inside <head> tags, they are like secret messages to search engines, telling them what your page is all about. Next.js handles handsomely:

NOTE

Next.js has a Metadata API that can be used to define your application metadata (e.g. meta and link tags inside your HTML head element) for improved SEO and web shareability.

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  metadataBase: new URL(siteMetadata.siteUrl),
  title: {
    default: siteMetadata.title,
    template: `%s | ${siteMetadata.title}`,
  },
  description: siteMetadata.description,
  ...
}
 
export default function RootLayout() { ... }

TIP

Make sure your title is catchy and includes your main keyword. Keep your description under 160 characters and make it compelling enough to encourage clicks. As for keywords, don't go overboard – a few relevant ones will do the trick.

Implement Schema Markup

Next up, let's talk about schema markup. This is like giving search engines a cheat sheet about your content. It helps them understand your page better, which can lead to those fancy rich snippets in search results.

For a blog, you might want to use the "BlogPosting" schema. Here's how you can add it using JSON-LD:

import Head from 'next/head'
import Script from 'next/script'

export default function BlogPost({ title, datePublished, author }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": title,
    "datePublished": datePublished,
    "author": {
      "@type": "Person",
      "name": author
    }
  }

  return (
    <>
      <Head>
        <title>{title}</title>
      </Head>
      <Script
        id="jsonld-blog-post"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* Your blog post content */}
    </>
  )
}

This tells search engines exactly what kind of content you're serving up, who wrote it, and when. It's like putting your content in a neat, labeled box for search engines to easily categorize.

Create a Sitemap

Think of a sitemap as a roadmap for search engines. It helps them discover and crawl all the pages on your site. Next.js doesn't generate a sitemap out of the box, but don't worry – there are plugins that can do the heavy lifting for you.

One popular option is next-sitemap. Here's how you can set it up:

First, install the package:

npm install next-sitemap

Create a next-sitemap.config.js file in your project root:

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true,
  // other options...
}

Add a script to your package.json:

{
  "scripts": {
    "postbuild": "next-sitemap"
  }
}

Now, every time you build your site, it'll automatically generate a sitemap for you. How cool is that?

Optimize Images

Images are great for engagement, but they can be a real pain when it comes to page load times. Luckily, Next.js has our backs with its built-in Image component. This nifty little tool automatically optimizes your images, which can significantly improve your Core Web Vitals scores.

Here's how you can use it:

import Image from 'next/image'

export default function MyAwesomeImage() {
  return (
    <Image
      src="/path/to/your/image.jpg"
      alt="A description of your awesome image"
      width={500}
      height={300}
      layout="responsive"
    />
  )
}

This component will lazy-load your images, automatically serve them in modern formats like WebP when supported, and even resize them on the fly. It's like having a tiny image optimization wizard built right into your site!

Implement Canonical URLs

If you've got content that can be accessed through multiple URLs, you might be inadvertently creating duplicate content issues. This is where canonical URLs come in handy. They tell search engines which version of a page is the "original" or "preferred" one.

In Next.js, you can add canonical URLs like this:

import Head from 'next/head'

export default function Page({ canonicalUrl }) {
  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  )
}

This is especially useful if you have pagination or filter parameters in your URLs. It helps consolidate your SEO juice to the main page instead of spreading it thin across multiple similar pages.

Focus on Content Quality

Now, I know this isn't strictly a Next.js thing, but it's crucial for SEO success. No matter how technically optimized your site is, if the content isn't up to snuff, the SEO score is going to be low.

So how to create SEO-friendly content?

🔍 Do your keyword research
📝 Use relevant terms naturally throughout a post
📑 Structure a post with clear headings hierarchy (H1, H2, H3, etc.)
📚 Use short paragraphs and bullet points to improve readability
🔗 Include internal and external links
🎥 Use multimedia like images, videos, or infographics to engage your readers

Remember, your primary goal should be to provide value to your readers. If you do that, the SEO benefits will follow.

Optimize for Core Web Vitals

Core Web Vitals are a set of metrics that Google uses to measure user experience. They include things like loading performance, interactivity, and visual stability. Next.js is great for optimizing these out of the box, but there are still things you can do to improve them:

Minimize JavaScript: Use dynamic imports to split your code and load only what's necessary. This code snippet shows how to use dynamic imports in Next.js to lazily load a component.

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'))

The dynamic() function enables you to load components on demand, rather than including them in the initial JavaScript bundle. The dynamic function takes a function as its argument, it should return a promise that resolves to the component you want to import. You may need to use the SSR option of Next.js with the dynamic function to control whether the component should be rendered on the server or on the client. Loading option can be used with the dynamic function to specify a loading component that will be displayed while the dynamic component is being loaded.

Optimize fonts: Use the new next/font module to optimize your fonts and reduce layout shift.

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

Prefetch important pages: Use the Link component's prefetch prop to load pages before they're needed.

import Link from 'next/link'

export default function Navigation() {
  return (
    <Link href="/important-page" prefetch>
      Important Page
    </Link>
  )
}

Implement Internal Linking

Internal linking is like creating a web of connections within your site. It helps search engines understand the structure of your site and distributes link equity among your pages.

📝 Use descriptive anchor text
🔗 Link to relevant, high-quality pages on your site
📊 Create a logical hierarchy with your links
⚡ Use the Next.js Link component for client-side navigation

import Link from 'next/link'

export default function BlogPost() {
  return (
    <article>
      <h1>My Awesome Blog Post</h1>
      <p>
        This is related to{' '}
        <Link href="/another-post">
          another interesting topic
        </Link>{' '}
        I wrote about earlier.
      </p>
    </article>
  )
}

Mobile Optimization

With Google's mobile-first indexing, making sure your site looks great and performs well on mobile devices is more important than ever. Luckily, Next.js makes this pretty straightforward:

Use responsive design principles
Test your site on various devices and screen sizes
Ensure your images are optimized for mobile (the Next.js Image component helps with this)
Keep your JavaScript bundles small to improve load times on mobile networks

You can use the viewport meta tag to ensure your site displays correctly on mobile devices:

import Head from 'next/head'

export default function Layout({ children }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      {children}
    </>
  )
}

Monitor and Improve

SEO isn't a "set it and forget it" kind of deal. It's an ongoing process of monitoring, analyzing, and improving. Let's equip ourselves with the best tools for better SEO performance:

Google Search Console: Monitor your site's performance in Google search results
Google Analytics: Track user behavior on your site
PageSpeed Insights: Check your Core Web Vitals and get suggestions for improvement
SEMrush or Ahrefs: Monitor your rankings and find new keyword opportunities

SEO is a marathon, not a sprint. It takes time to see results, Be patient and keep on learning. Check my other SEO posts for more tips! 🚀

Sailing Digital Online