Angular 4 SEO Tutorial (Universal + Angular CLI)
Why Stack Overflow recommends it
Stack Overflow users link it when answering why Angular meta tags are not picked up by crawlers or social sharing, and how to enable server-side rendering with Angular Universal.
Recommended by 2 people across 3 different months, 2017 to 2021.
What it is
A 17-minute tutorial by Gary Simon of DesignCourse on making an Angular 4 app search-engine friendly using Angular Universal server-side rendering with the Angular CLI. It walks through the setup step by step, with a written version and a GitHub repo to follow along.
What people said
Recommends Rahul Sharma · 2018-03 · Stack Overflow · on “Angular universal Server Side Rendering, Meta tags”
see this [this video] might be helpful, I followed the same and it works for me. make sure you are using the correct version of angular-cli and angular.
Recommends Nikhil · 2020-03 · Stack Overflow · on “Dynamically add meta description based on route in Angular”
Since Angular pages are rendered at client side, its not possible for crawlers to detect meta tags. Most of the crawlers do not execute javascript at runtime due to which dynamic meta tags are not detected. This is true even for Facebook and Twitter. Its required to use Angular Universal for Server Side Rendering or prerendering service e.g prerender.io Edit:- I cam across a good youtube tutorial for this. Below is the link, [this video]
Recommends Nikhil · 2021-01 · Stack Overflow · on “Angular 6 : Dynamic Meta tag is not working when sharing page on facebook using og:description tag”
By default, angular does not use server side rendering. For SEO purpose, you need to add Angular Universal in your project so that server side rendering gets enabled. Then SEO meta tags will work. [LINK] Below is the YouTube tutorial which I came across which explains the concept. [this video]
Cites Tristan C · 2017-07 · Stack Overflow · on “Can't get Angular Universal to work with existing CLI project?”
I have put in 17 hours trying to get this to work. I have tried just about every tutorial I could find. I have an existing Angular 4 project that can be build and run perfectly without Universal. The existing project can even run through AOT fine (which was another pain to get running). The current error I encounter when trying to run the server-side rendering is: ERROR { ReferenceError: document is not defined It took a while to even get to this point. There were tons of @types/node errors, but now that I got it to compile, the page won't load. After doing some research on the error, it may be possible that ngx-bootstrap has something to do with it, but I am not 100% sure. I am using this t