Angular SEO How To Correctly Implement Dynamic Title And Meta?
I have a little question about Angular title and meta. I have imported libraries into my angular. I set my title and description of meta in the constructor of the .ts files like this (different titles and descriptions for every page of course);
//To set the title
this.titleServ.setTitle("SOME TITLE HERE")
//To set the meta
this.meta.addTag({name: "description", content: "SOME DESCRIPTION HERE"})
When I run my website through IIS and check from the browser, I still see something like this;
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
As said, I cant see my page title or page description from source codes (but I can see it from a google search and at the google chrome tab). I am currently trying to set the search engine optimizations. Is there any problem in here? I mean all the tutorials I have seen can see their page title from the section and also can see meta.
What did I do wrong or is there anything I need to do more for the website to be visible in google with some keywords search?
Answer
Angular by default is a client-side application. When you serve the app and view the HTML source, you essentially get the source code of index.html
that's in the root of src
.
For SEO, you need to render the page on the server. That way, when the browser receives the HTML, it is pre-rendered with certain data elements, including the SEO-related tags/content.
This is the official guide on how to add server-side rendering (Angular Universal) to your application: https://angular.io/guide/universal
The key part is, for the server-side rendering to take place, you need to start your app with the dedicated command (e.g. npm run dev:ssr
by default). This will start up node, which will be handling the requests on the server-side.
Related Questions
- → Make a Laravel collection into angular array (octobercms)
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → Angularjs not working inside laravel form
- → Analysis of Flux implementations
- → how to write react component to construct HTML DOM
- → angular ng-repeat and images in a row
- → Conditional BG Color on AngularJS
- → Should I 'use strict' for every single javascript function I write?
- → getting the correct record in Angular with a json feed and passed data
- → "Undefined is not a function" at .toBe fucntion
- → angularjs data binding issue
- → Angular / JavaScript auto hydrate an instance
- → Convert generic text string in json object into valid url using Angular