How we ranked # 2 rank on Google in just 2 month

[futuretrainee]

EDIT -> TLDR: Rank for keywords that are easier in the beginning, to get traffic to your site. Show the search engines that people are wanting to see what you are doing/selling. Then slowly build link authority by having blogs post about you. Side note places like ProductHunt (all you have to do is launch and like 20 other places will repost as they just repost the content on product hunt) which has like a 90 DR (which is insane). These backlinks will let search engines know that hey, this is probably going to match the searchers intent. I linked free keyword research tools at bottom. Also... just type into Google and see what sites come up... follow their style and content... there is a reason they are ranking in the top.

Now onto the real post...

https://preview.redd.it/wgtqm1blujt...bp&s=86e16197555cd27dadcce95e4b351249612e517e

Welp I guess I made, it. I'm about to be rich???!

...

no. but I can help show you how we ranked on Google.

Context

• I have a couple of different sites (startups)
• This one is fairly new ~ 2 month old
• Decided to work on SEO specifically as the main traffic source
• Using Next.js so no pre-built SEO help (aside from the metadata api + some other things) that something like Wix/Shopify would give

Ok so now that you know the context, lets show you how we ranked on Google (follow along if you want to copy us). Note, that this is for Next.js but the same concepts can be applied to other frameworks.

First

Each page of your app needs to have an exported metadata object.

We are using Next.js's App router. This is important as it comes pre-baked with some helpful SEO tools. One thing is the ability to export metadata at the top level of the page. This looks something like this:

export const metadata = {title: "Blog", description: "This is a cool blog lol..."}

What is metadata you might ask? Well to put it simply in this context, it helps describe what your page is and/or will be doing. Search engines are looking for the content/pages that will deliver exactly what the user is looking for. Let's say the users query is "best crock pot chicken". The intent of the user is probably not to buy a crock pot, but instead read an article or watch a video on how to cook the best crock pot chicken. Search engines know this and will rank sites that best answer your users intent. One way we can help search engines is by making sure the metadata on each page is optimized for exactly what the page is trying to portray.

Second

You need a sitemap.xml

In Next.js a sitemap is super simple to add, and will help Search Engines know what pages to rank/priority.

In the

/src/app

folder add a

sitemap.ts

file in it, paste this code:

import { MetadataRoute } from "next";
import { headers } from "next/headers";

/**
 * @description 
 * This function will generate a dynamic sitemap including all the blogPosts we have added to the db.
 * NOTE: this will add the actual file to the domain path like: https://acme.com/sitemap.xml
 * 
 * 
 * @example

        
            https://acme.com
            2023-04-06T15:02:24.021Z
            yearly
            1
        
        
            https://acme.com/about
            2023-04-06T15:02:24.021Z
            monthly
            0.8
        
        
            https://acme.com/blog
            2023-04-06T15:02:24.021Z
            weekly
            0.5
        
    
 *
 * @see
 * https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap
 */
export default async function sitemap(): Promise {
  const headersList = headers();
  const domain = headersList.get("host")!;

  // this will be our static pages we don't store in the DB. ex) pricing, about, etc...
  const staticPages = [
    {
      path: null, // this is the root ex. https://acme.com
    },
    {
      path: "blog",
    },
  ];

  return [
    // just the basic pages we have for marketing
    ...staticPages.map(({ path }) => ({
      url: `https://${domain}/${path ?? ""}`,
      lastModified: new Date(),
    })),
  ];
}

Third

You need a robots.txt file

I know it sounds simple, but this can help Search engines more efficiently index your site by knowing which paths to stay away from. Just add this code in the

/src/app

folder:

import { type MetadataRoute } from "next";
import { headers } from "next/headers";

export default function robots(): MetadataRoute.Robots {
  const headersList = headers();
  const domain = headersList.get("host")!;

  return {
    rules: {
      userAgent: "*",
      allow: ["/", "/api/og/*"],
      disallow: "/private/",
    },
    sitemap: `https://${domain}/sitemap.xml`,
  };
}

Fourth

You need to export a large metadata object for your marketing home page.

This is the main entry point for 90% of your customers so make sure you incorporate all the keywords/titles/descriptions you need.

You can add this to your root layout in

/src/app/layout.tsx

file:

export const metadata: Metadata = {
  title: {
    default: "Your name",
    template: `%s | Your name`,
  },
  keywords: [
    // add a bunch of keywords like "things lol"
  ],
  metadataBase: new URL("https://www.yourname.com"),
  description:
    "Your description",
  authors: [
    {
      name: "you",
      url: "https://www.you.com",
    },
  ],
  creator: "you",
  openGraph: {
    title: "Your OG title",
    description:
      "Your OG description",
    url: "https://www.yoursite.com",
    siteName: "yoursite.com",
    type: "website",
    locale: "en_US",
  },
  icons: {
    icon: "/favicons/favicon.ico",
    shortcut: "/favicons/favicon-16x16.png",
    apple: "/favicons/apple-touch-icon.png",
  },
  manifest: `https://www.yoursite/site.webmanifest`,
};

Fifth

You should have OG images.

What is an OG image? An OG image is a "Open Graph" image used to represent content on social media. It's the visual preview displayed when links are shared. It usually enhances link click through rates because it has a snapshot of your product.

You can add a .png (usually you just take a screenshot of your hero section) to your root page by going to

/src/app

and then put your image. You must name it this:

opengraph-image.png

Sixth

Look for keywords that don't have a hard keyword ranking.

How do you find this ranking? Go here it is free and will help you see what keywords are harder to rank for. Start getting traffic and ranking by going for easier keywords. You can go for harder ones, but that will require much more than what we talked about in this post.

Resources:

Taxonomy - this repo helps a lot with understanding the SEO basics of what we talked about

Ahrefs - this is a free keyword difficulty checker

Conclusion

Honestly the best form of SEO is just shipping your product. It takes some time for Google to index your site. I'm not an SEO expert, just a dude who wanted to share what helped me. This isn't law and there are probably people out there screaming saying "Oh no you missed this! and that!", but this is just my experience. Hopefully this helps. TBH how did we get to position number 2 so fast?? Well, our keywords are super easy to rank for. You will need quality backlinks and killer content if you really want to rank high on Google for hard keywords. Some of my sites are ranked on third page and have been working on them for a while, but the keywords are just so tough it takes time. Don't give up.

 

[carmen2569]

@futuretrainee This is Seo 101

 

[sheep4christ]

@carmen2569 All you need is the fundamentals. Congrats to OP and their success.

 

[carmen2569]

@sheep4christ Yeah - especially in seo. I know people who’ve built 6 figure businesses very fast offering basic AF seo services. Can’t argue with the results I guess!

 

[futuretrainee]

@sheep4christ Thank you!

 

[blessed4]

@carmen2569 It also helps if you provide title to all your images

 

[noname5137]

@futuretrainee All that is possible in every platform. This is standard SEO. You don't have to use next.js.

 

[futuretrainee]

@noname5137 Definitly! Just the code and such is specific to next.js that’s why I mentioned it

 

[drumz]

@noname5137 Yeah, this is a simplistic view of SEO, but it’s good info for a neophyte, albeit unnecessarily overfit to a Next.js context.

Two key gotchas missing are:

• The keyword in question isn’t specified, and it’s easy to rank for the long tail (for example, if you wanted to rank for hippoalbatross, a word I just made up, you could do it as quickly as you can get indexed. This Reddit thread will probably rank for this term in a matter of hours
• For shorter tail keywords, some authority will likely be needed, which comes from link building or social signals (which are still essentially links)
  • Link building is a lot harder than on-page optimization

Nonetheless, great job OP at discovering this and for seeing some success!

 

[futuretrainee]

@drumz This is a really great post! Thank you for the insight. Also you are right, I just looked up this post, and it ranked as number 1 on google! Super cool! I'm not the most skilled SEO expert, just starting out so any info really helps.

Som infor: our keyword was a short two word common phrase, but it's traffic wasn't significant and it's difficulty to rank for is low. Definitely why we ranked so fast, but the cool thing about it and the reason we started to try and rank for it was because my theory is that in the coming months, this keyword will blow up! So hopefully we can get a head start!

 

[futuretrainee]

@drumz Also Next.js specific because our site is using Next.js and I never see posts on how to optimize SEO using code, most of the time it is like, keyword and metadata this, but like where in the code do I put it, so I just wanted to show what I learned!

 

[martijnnl]

@futuretrainee Tldr; only way to rank for any keyword in 2 months is to target an incredibly niche keyword that has little to no competition

 

[futuretrainee]

@martijnnl Yes last part of post talks about this

 

[dekaewaii]

@futuretrainee This is the common process across the websites. But we want to know about content strategy or link building strategy. And what is your keyword search volume?

 

[catherinenosleep]

@dekaewaii Me too . Link building is the meaty part

 

[trishamurph]

@futuretrainee Much love for Anonymous_Aardvark, er, I mean @futuretrainee

 

[outpouring]

@futuretrainee Or just use a beehiiv site which uses next.js and comes with all of this or more and can be started in seconds

 

[alessandro2121]

@futuretrainee Pretty neat! Thanks for sharing

 

[marych]

@futuretrainee Instead of exporting meta object on every page, would it work by exporting on parent and child layouts?

 

[futuretrainee]

@marych Yes! You can do:

/layout.tsx - has one exported metadata object

or

each /page.tsx - has one exported metadata object

but if you have a blog and it's programmatically being created, you can generate the metadata object for each page like this (this code is originally from that resource I sent down below Taxonomy):

async function getPostFromParams(params) {
  const slug = params?.slug?.join("/");
  const post = allPosts.find((post) => post.slugAsParams === slug);

  if (!post) {
    null;
  }

  return post;
}

export async function generateMetadata({
  params,
}: BlogPageProps): Promise {
  const post = await getPostFromParams(params);

  if (!post) {
    return {};
  }

  const url = env.NEXT_PUBLIC_APP_URL;

  const ogUrl = new URL(`${url}/api/og`);
  ogUrl.searchParams.set("heading", post.title);
  ogUrl.searchParams.set("type", "Blog Post");
  ogUrl.searchParams.set("mode", "dark");

  return {
    title: post.title,
    description: post.description,
    authors: post.authors.map((author) => ({
      name: author,
    })),
    openGraph: {
      title: post.title,
      description: post.description,
      type: "article",
      url: absoluteUrl(post.slug),
      images: [
        {
          url: ogUrl.toString(),
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.description,
      images: [ogUrl.toString()],
    },
  };
}