Universal: Google bot crawling Universal App and not using dynamic meta data tags for search results

[atlmtw]

Bug Report

What is the expected behavior?

Google bot should pull dynamic meta data tags that were added / updated using Angular's meta service to produce text previews.

What is the current behavior?

Google bot instead, pulls text from the DOM for search result previews. Thus, the text previews are bunch of jumbled up text.

What modules are related to this issue?

- [ ] platform-browser (meta service)

Minimal reproduction with instructions:

1. Setup angular routing
2. Add meta to each route to dynamically inject and update meta tags
3. Inspect page to see that meta tags are in fact produced correctly
4. Integrate angular universal with application
5. Deploy web app
6. Search website domain in google to see text preview

What is the use-case or motivation for changing an existing behavior?

So that I can continue using Angular without worrying about SEO

Environment:

@nguniversal versions

• platform-server: 7.1.0
• common: 7.0.0

<!--
Output from: `ng --version`.
If nothing, output from: `node --version` and `npm --version`.
  Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
-->

Is there anything else we should know?

And if this is mainly an SEO issue that Angular Universal cannot help, I do apologize. This is from my assumptions that it should behave in the way I described above.

[peturh]

This is a show-stopper for us at the moment.

[CaerusKaru]

Can you provide a minimal reproduction that doesn't include deploying the app?

[atlmtw]

Are you asking the steps I took to reach this? I don't know how to display what Google Bot will show without having it indexed. But to be more specific here's what I injected onto each page using Angular's Meta from @angular/platform-browser. (I have more than one group of meta tags of couse, this is just an example how they're each structured)

homepageMeta: [ { name: 'robots', content: 'INDEX, FOLLOW' }, { name: 'keywords', content: 'Something, something, something, something' }, { name: 'description', content: 'The description that should be pulled by google bot' }, { property: 'og:title', content: "Website Homepage" }, { property: 'og:description', content: "Same description as above." }, { property: 'og:image', content: "Link to an image host" }, { property: 'og:url', content: "The website link" }, ],

and using Meta's .addTags and .updateTag methods to inject them into the header. Of course with updateTag we loop through each tag in homepageMeta for example.

And as stated before, they are visible when inspecting the page and viewing the header tag.

If there is a way to preview what gets displayed by Googlebot before indexing, please let me know. I am not knowledgable enough in this area.

[magnattic]

Likely the same issue as this one on the angular/angular repo: https://github.com/angular/angular/issues/19606

Also a showstopper for us. Does anyone know a workaround?

Update: It actually was an unrelated bug in our code, we accidentally used
this.meta.updateTag({ name: 'og:description', content: description });
instead of
this.meta.updateTag({ property: 'og:description', content: description });
which lead to the duplicated tags during runtime.