Angular 2 – how do I make my index.html files title and meta tags for keywords and description dynamic

Angular 2 – how do I make my index.html files title and meta tags for keywords and description dynamic.

I’m using typescript with angular 2.

Example of my tags:

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>title needs to be dynamic</title>
    <base href="/"></base>

    <meta charset="UTF-8">
    <meta name="fragment" content="!"/>
    <meta name="description" content="description needs to be dynamic"/>
    <meta name="keywords" content="keywords needs to be dynamic" />

This is my route:

{ path: '/', component: Home, as: 'Home', data:{title: 'Welcome Home'}},

I’ve tried this but it didnt work:

 <title>{{title}}</title>

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

There is a Title service. Otherwise you’re currently on your own. You can use pure JS functionality querySelector()...
There are plans to support more tags in the <head>.
I’m not too deep into SEO but I think it would be better to use a server side solution for meta tags. I doubt search engines pick up meta tags that are added after the initial page load.

Plunker (doesn’t update the window title because the app runs in an iframe but using the browsers inspect tool shows it in the <head><title>....</title></head>)

Jason
Guest

There’s also the @ngx-meta/core plugin, which might help you to make page titles and meta tags dynamically (on the route config and class constructor level).

Please refer the repository for instructions.