#indexing on google

1 messages · Page 1 of 1 (latest)

bitter pebble
#

ive deployed nextjs app on vercel. tell me the steps of how i index it on google so it appears what i need to do

lusty gateBOT
#

Hi @bitter pebble. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain specific information on how to index your Next.js app on Google after deploying it on Vercel. However, it's important to note that for SEO purposes, Vercel ensures that your SEO ranking is not negatively impacted by duplicate content from Preview Deployments (source (https://vercel.com/guides/are-vercel-preview-deployment-indexed-by-search-engines)).

For detailed steps on how to index your site on Google, you may want to refer to Google's own guide on the topic or other SEO resources.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@bitter pebble kapa.ai is still learning and improving, please let us know how it did by reacting below

bitter pebble
#

@lusty gate how i make good crawl nextjs app and sitemap

lusty gateBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To make your Next.js app crawlable and generate a sitemap, you can follow these steps:

  1. Generate a sitemap at build time: This is best for deployments where content is also generated statically. If your most SEO-critical paths are known at build time, such as landing pages, funnel-related content, and marketing material, then it is advised that you generate the sitemap at build time. You can view the official Next.js example, with-sitemap (https://github.com/vercel/next.js/tree/canary/examples/with-sitemap), to learn how to generate a sitemap at build time (source (https://vercel.com/guides/how-do-i-generate-a-sitemap-for-my-nextjs-app-on-vercel)).

  2. Generate a sitemap using code: You can use the sitemap.(js|ts) file convention to programmatically generate a sitemap by exporting a default function that returns an array of URLs. Here's an example:

import { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
 return [
 {
 url: '<https://acme.com',>
 lastModified: new Date(),
 changeFrequency: 'yearly',
 priority: 1,
 },
 // ...other URLs
 ]
}

(source (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts))

  1. Generate a sitemap at runtime: This works best for deployments where SEO-critical pages are highly dynamic or if you need a sitemap that can change over time. You can create a new file on pages/api/sitemap.js and use a rewrite rule to rewrite requests from /sitemap.xml to /api/sitemap (source (https://vercel.com/guides/how-do-i-generate-a-sitemap-for-my-nextjs-app-on-vercel)).
#
  1. Generate multiple sitemaps: For large web applications, you may need to split a sitemap into multiple files. You can do this by nesting sitemap.(xml|js|ts) inside multiple route segments or by using the generateSitemaps function (source (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generating-multiple-sitemaps)).

Remember to handle any errors that might occur during sitemap generation. For example, there's an open issue where generating a sitemap results in an error when the output is set to "export" (source (https://github.com/vercel/next.js/issues/59136)).

Finally, to make your sitemap discoverable, you can add a <link rel="sitemap" ... /> in the header of your pages. Here's an example:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link
          rel="sitemap"
          type="application/xml"
          title="Sitemap"
          href="/sitemap.xml"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

(source (https://github.com/vercel/next.js/issues/52228))

Please note that the exact steps might vary depending on your specific requirements and setup.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@bitter pebble kapa.ai is still learning and improving, please let us know how it did by reacting below

bitter pebble
#

@lusty gate should sitemap be in app folder or public

lusty gateBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The sitemap should be placed in the app directory, not the public directory. According to the Next.js documentation, you can create a sitemap.xml file and place it in the root of your app directory (source (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap)).

Here's an example of how you can create a sitemap.xml file:

<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9">>
 <url>
 <loc><https://acme.com</loc>>
 <lastmod>2023-04-06T15:02:24.021Z</lastmod>
 <changefreq>yearly</changefreq>
 <priority>1</priority>
 </url>
 <!-- ...other URLs -->
</urlset>

(source (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap))

You can also generate a sitemap programmatically using sitemap.(js|ts) file convention (source (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts)).

The public directory is used to serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/) (source (https://nextjs.org/docs/app/building-your-application/optimizing/static-assets)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: