SEO w/ Angular Universal on Google Cloud Platform

Getting Search Engines and Crawlers to properly index your app/site content isn’t included out of the box with Angular when publishing to Google Cloud. However, they do provide Angular Universal to help us solve this issue.

Let’s get started…

First, we’ll setup a new Google Cloud Server:

Next, we’ll enable the Cloud Build API:

While that finishes we can install and authorize the Google Cloud CLI: https://cloud.google.com/sdk/docs/install-sdk

Then we can spin-up our Angular Universal project:

> ng new my-project
> ng add @nguniversal/express-engine

After adding Angular Universal to our project the updated package.json should resemble something like this:

"scripts": {
  "ng": "ng",
  "start": "node dist/my-project/server/main.js",
  "start:dev": "ng serve",
  "start:prod": "ng serve --configuration production",
  "build": "ng build --configuration production",
  "release": "npm run build:ssr && gcloud app deploy --project=jmy-project",
  "test": "ng test",
  "dev:ssr": "ng run my-project:serve-ssr",
  "serve:ssr": "node dist/my-project/server/main.js",
  "build:ssr": "npm run build && ng run my-project:server",
  "prerender": "ng run my-project:prerender"
}

One little caveat to remember is that we need to manually change the start script (that runs on the GCP instance) to run the node server.

Finally, we can run release and verify server-side rendering is functioning properly by viewing the page source. You’ll know it’s working if we can see our component markup:

Isn’t it nice when things are simple and just work? 🍻

Liked the article? Questions? Ideas? Feel free to reach out!