2

I am creating dynamic URLs in Next.js. I want Google bots to crawl my sites like Stack Overflow and show my URLs in Google

my site is like Stack Overflow when I can add questions for each question a URL is generated dynamically like below

here are the dynamic URLs created


   {Items.reverse().map((itm, k) => (
        <Link
          key={itm._id}
          href={{
            pathname: "query/[itm]",
           
          }}
          as={`query/${encodeURIComponent(itm._id)}`}
        >
          <Alert className="question13">{itm.Name}</Alert>
        </Link>
      ))}

I tried head in the page I rought to and its been 2 days I have hosted my site I am having 1000s of URLs like this in this link components what else should I add to do better SEO


<Head>
  <title>wixten - {itm.Name} </title>
                <meta
                  name="viewport"
                  content="initial-scale=1.0, width=device-width"
                />
                <meta name="description" content={itm.Name} />
              </Head>

want Google bots to crawl my sites like Stack Overflow and show my URLs in Google

4
  • 1
    What is the actual problem? Are the metatags not showing? Are your pages not being indexed by Google? Commented Jan 14, 2022 at 18:45
  • my pages are not getting indexed wixten.com/robots.txt
    – vivek kn
    Commented Jan 15, 2022 at 11:21
  • How long has your site been up? What are some example URLs on your site? If you paste a deep URL into your browser does it load the page correctly? How do users navigate between pages (what type of tags do you use in the DOM for navigation)? Commented Jan 27, 2022 at 15:31
  • Most of the reasons for Google not indexing a site can be found here: Why aren't search engines indexing my content? Commented Jan 27, 2022 at 15:32

1 Answer 1

0

You have to set Open Graph in your project. Read More

import Head from "next/head";
import { useRouter } from "next/router";

const HeadTags= (props) => {
  const router = useRouter();
  const {
    title = "set default title",
    metaDescription = "set default metaDescription",
  } = props;
  return (
    <Head>
      <title>{title}</title>
      {/* mobile devices by default takes the content from desktop and squueze it. But we want it to be responsive */}
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      {/* First line of result when somoene searches your page */}
      <meta name="description" key="description" content={metaDescription} />
      <meta name="title" key="title" content={title} />
      <meta property="og:title" key="og:title" content={title} />
      <meta property="og:locale" key="og:locale" content="en_US" />
      <meta charSet="utf-8" />
      // this is where the URL you want
      <meta
        property="og:url"
        key="og:url"
        content={`${process.env.BASE_URL}${router.asPath}`}
      />
      <meta property="og:type" key="og:type" content="website" />
      <meta
        property="og:description"
        key="og:description"
        content={metaDescription}
      />
      // set image when you share the link. you could pass by props
      <meta
        property="og:image"
        key="og:image"
        content={`${process.env.BASE_URL}/images/frontend.jpeg`}
      />
    </Head>
  );
};

You import this to Header component so it will be rendered in each page.

 const DynamicComponent=()=>{
  // prepare your dynamic values to pass Header component 
  const title=dynamicTitle;
  const metaDescription=dynamicMeta
   return (
         <>
           // since Head component is rendere inside Header, you pass those to the HeadTags component
           <Header title={title} metaDescription={metaDescription} />
         </>
      )
  }

Your application will get crawled and indexed as soon as the client receives an HTML document from the server. With Next.js, you can have all the information pre-loaded so the search engine robot sees all the information.

8
  • i tryed this none of my pages are getiing indexed
    – vivek kn
    Commented Jan 27, 2022 at 9:25
  • @jisaks did you used Head component inside Header compoennt
    – Yilmaz
    Commented Jan 27, 2022 at 9:26
  • github.com/vivekkn91/wixten
    – vivek kn
    Commented Jan 27, 2022 at 9:29
  • i have added the github repo of my full code
    – vivek kn
    Commented Jan 27, 2022 at 9:30
  • i have read that its important to have back links is its that important? with out back link will my urls wont be indexed?
    – vivek kn
    Commented Jan 27, 2022 at 9:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.