CODEWITHSUNDEEP
javascriptreactjsseogatsby
Liv Stan
Liv Stan

Reputation: 429

Prevent Gatsby page at a specific domain path from appearing in Google Search

Is it possible to prevent a Gatsby page at a specific domain path from appearing in Google Search.

I don't want to prevent the whole site from appearing in Google Search, just one page that exists at a specific path. e.g. www.mywebsite.co.uk/hide-me

Upvotes: 2

Views: 1710

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29315

Use the <Helmet> component to set the robot's meta tag.

const HideMe = ()=>{
  return <>
    <Helmet>
      <meta name={`robots`} content={`noindex, nofollow`} />
    </Helmet>;
    <h1>I'm the Hide Me page </h1>
  </>;

Most of the Gatsby starters comes with a SEO component which contains, among other stuff, the robots meta tag, if that's your case, you may need to customize it for each page passing the proper prop. For example:

const SEO = ({ index, follow, description, lang, meta, title }) => {
  const { site } = useStaticQuery(graphql`
              query getAllMetadata {
                  site {
                      siteMetadata {
                          title
                          description
                          author
                      }
                  }
              }
    `,
  );
  const metaDescription = description ?? site.siteMetadata.description;

  return <Helmet htmlAttributes={{ lang }} title={title} titleTemplate={`%s | ${site.siteMetadata.title}`}>
    <meta name={`robots`} content={`${index ? `index`:`noindex`},${follow ? `follow`:`nofollow`}`}/>
    <meta name={`description`} content={metaDescription}/>
    <meta name={`og:title`} content={title}/>
    <meta name={`og:description`} content={metaDescription}/>
    <meta name={`og:type`} content={`website`}/>
    <meta name={`twitter:card`} content={`summary`}/>
    <meta name={`twitter:creator`} content={site.siteMetadata.author}/>
    <meta name={`twitter:title`} content={title}/>
    <meta name={`twitter:description`} content={metaDescription}/>
  </Helmet>;
};

Note: I'm assuming both index and follow as booleans but customize it as you wish or whatever fits you more

If that's your case, in your /hide-me page you will have something like:

const HideMe = ()=>{
  return <>
    <SEO index={false} follow={false} />
    <h1>I'm the Hide Me page </h1>
  </>;

Moreover, you will need to add to all links that point to that page the rel attribute nofollow to avoid tracking by Google's crawlers.

<Link rel={`nofollow`} to={`/hide-me`}>Untracked link</Link>

In addition, you may also want to remove that page from the sitemap.xml (in case you have it) file, you can easily achieve it using one of the sitemap plugins like gatsby-plugin-sitemap, that comes with an exclude rule.

Upvotes: 5

Related Questions