CODEWITHSUNDEEP
angulargoogle-search-console
Jason Harris
Jason Harris

Reputation: 376

Using Angular to dynamically add and remove <meta name="robots" content="noindex" />

Google Search Console isn't indexing my Angular SPA application. The Angular team dynamically inserts a "noindex" meta tag in the head and after page rendering completes an Angular component deletes the "noindex" meta tag. From my understanding this strategy supposedly avoids indexing the SPA before Angular renders the website and avoids indexing 404 pages. I followed the same approach as the Angular.io SPA, but I'm seeing different results with Google Search Console.

My SPA is a vanilla Angular CLI project with several lazy loaded routed modules and components within lazy loaded routed modules are responsible for deleting the "noindex" meta tag.

Clearly Google is indexing Angular.io just fine https://www.google.com/search?q=angular+router+-site%3A+angular.io

Here's my index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site Title</title>
  <meta name="description" content="My SEO meta description" />
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script>
    // Dynamically, pre-emptively, add `noindex`, which will be removed when the doc is ready and valid
    tag = document.createElement('meta'); tag.name = 'robots'; tag.content = 'noindex';
    document.head.appendChild(tag);
  </script>

</head>
<body>
  <app-root></app-root>
</body>
</html>

And the Angular.io index.html. https://github.com/angular/angular/blob/57f7996b6d2bee5a63902637fdec5b60b9a857cd/aio/src/index.html#L35

This is my app.route.ts

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    loadChildren: './routed/home/home.module#HomeModule',
    data: {
      page: 'home',
    }
  },

  // <editor-fold desc="Catch-All Routes">

  {
    path: '**',
    loadChildren: './routed/not-found/not-found.module#NotFoundModule'
  }

  // </editor-fold>
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRouterModule { }

And this is an excerpt of my lazy loaded routed home module component that deletes the "noindex" meta tag.

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  constructor(private metaService: Meta) {
    this.metaService.removeTag('name="robots"');
  }

  ngOnInit() {
  }

}

And this is the Angular.io component responsible for removing the "noindex" meta tag https://github.com/angular/angular/blob/57f7996b6d2bee5a63902637fdec5b60b9a857cd/aio/src/app/app.component.html#L53

https://github.com/angular/angular/blob/57f7996b6d2bee5a63902637fdec5b60b9a857cd/aio/src/app/layout/doc-viewer/doc-viewer.component.ts#L161

When viewing the page source in chrome developer tools the <head> tag does not contain a "noindex" meta tag. However, when logging in to the Google Search Console and performing a Live Test I get this error: "Excluded by 'noindex' tag. 'noindex' detected in 'robots' meta tag"

Upvotes: 8

Views: 5060

Answers (1)

izzie
izzie

Reputation: 1

Accordingly to this article https://www.searchcandy.uk/seo/can-you-use-javascript-gtm-to-add-a-noindex-meta-robots-tag/ google stops indexing when robots noindex meta tag is found on the page and it will not resume when the tag is resumed. So adding noindex tag to remove it later might be not a good idea.

Upvotes: 0

Related Questions