Solution problem: adding SEO meta tags to <head> #454

kaaboeld · 2016-06-25T13:27:31Z

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

I'm submitting a ...
bug report
feature request
support request => Please do not submit support request here, see note at the top of this template.

We have problem: adding SEO tags for any social networks without external HTML component.
https://gist.github.com/kaaboeld/851bc3190eec67f6723c6054751ee2dc

Please tell us about your environment:
Angular version: 2.0.0-RC-1
Browser: all
Language: TypeScript 1.8
OS: [all | Mac OS X | Windows | Linux ]
Platform: NodeJs
Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

rjokelai · 2016-06-29T11:13:24Z

We solved this by creating the elements with the Renderer and injecting the Document too:

import { Component, AfterViewInit, Renderer, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({ ... })
class AppComponent implements AfterViewInit {
  constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer) {}

  ngAfterViewInit(): void {
    const elem = this.renderer.createElement(this.document.head, 'meta');
    this.renderer.setProperty(elem, 'name', 'foo');
  }
}

maxiar · 2016-08-29T13:58:45Z

Hi @rjokelai / @kaaboeld I'm searching a SEO Angular 2 example fully working for all internet! :)
Please, can you share the code using your recomended fix?

Thanks in advanced..

gjuchault · 2016-08-29T15:14:32Z

@rjokelai I guess this is not the point of prerendering, as this will (correct me if I'm wrong) be added after rendering to the browser

rjokelai · 2016-08-30T04:46:46Z

No, this the way we got it actually working in the universal app. The meta tags are already sent with the prerendered html response. The point here is to use the DOCUMENT token and Renderer, which the universal library is aware of.

They actually use this kind of approach in the universal starter:

https://github.com/angular/universal-starter/blob/master/src/app/app.component.ts#L20

Our specific case is that we have a CMS-backed angular application. The meta information comes from the CMS and should be rendered for crawlers.

jeffwhelpley · 2016-10-03T21:52:16Z

I am going to consolidate this issue with #309 where we are discussing creating universal services that will make it easy to change the meta tags.

angular-automatic-lock-bot · 2019-09-04T18:02:30Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

jeffwhelpley closed this as completed Oct 3, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Solution problem: adding SEO meta tags to <head> #454

Solution problem: adding SEO meta tags to <head> #454

kaaboeld commented Jun 25, 2016

rjokelai commented Jun 29, 2016

maxiar commented Aug 29, 2016 •

edited

Loading

gjuchault commented Aug 29, 2016

rjokelai commented Aug 30, 2016

jeffwhelpley commented Oct 3, 2016

angular-automatic-lock-bot bot commented Sep 4, 2019

Solution problem: adding SEO meta tags to <head> #454

Solution problem: adding SEO meta tags to <head> #454

Comments

kaaboeld commented Jun 25, 2016

rjokelai commented Jun 29, 2016

maxiar commented Aug 29, 2016 • edited Loading

gjuchault commented Aug 29, 2016

rjokelai commented Aug 30, 2016

jeffwhelpley commented Oct 3, 2016

angular-automatic-lock-bot bot commented Sep 4, 2019

maxiar commented Aug 29, 2016 •

edited

Loading