5 Great SEO Ideas To Improve Angular Website Ranking

Search Engine Optimization is the process of improving your site visibility from various search engines. It depends on various factors through which your site appears in search results. Angular Universal plays a big role in search engine optimization. Angular Universal is also known as SSR- Server Side Rendering. In this article we will talk about some great ideas that will help you improve your Angular website ranking.

What are the various factors that decrease your website ranking?

• Site is taking more than 3 seconds to load
• Site is built without Angular Universal (without server side rendering)
• Static Contents are not optimized / minified (however this doesn’t apply for Angular websites)
• Lack of meta data
• Less contents on website

5 Great SEO ideas that will help you improve angular website ranking

1. Meta records– provide site title and meta tags to each components as well as the index.html
2. Angular Universal– implement angular universal (SSR)
3. AMP– implement Accelerated Mobile Pages
4. Optimization– optimize your website
5. Compression and caching– enable static contents compression and caching at server
6. Social Bookmarking and Backlinks– add your website to different bookmarking sites and get backlinks

Let’s understand each points with examples.

Update Meta Records

Meta tags improve the site crawl performance so that the search engine visibility is increased.

Meta Records benefits

• Impacts SERP (Search Engine Results Page)
• Impacts ranking of website

Go through below code to add the title and meta data in root page (index.html) as well as in each components.

The next and very important step is to add meta tags in components that helps improve angular website SEO.

We will use Angular Meta service to meta tags of each components.

Import the service.

import { Meta } from '@angular/platform-browser';

Inject the Meta service in component and use the addTags method.

constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'A demo page built by StackBlogger to show the search engine optimization improvements in an Angular website.' });
    this.meta.addTag({ name: 'robots', content: 'index, follow' });
}

That’s it. When you run your page and open View page source, you will notice your meta tags are in action.

Implement Angular Universal (Server Side Rendering)

Angular Universal is a technology that renders your page on server instead of client (as normal Angular or React app does). SSR helps execute the template on server and generates static application page that’s later gets bootstraped on the client. It helps search engines to crawl the page.

Angular Universal benefits

• Helps search engines crawl the pages
• Allows social networks to read pages
• Helps in First Contentful Paint (FCP)
• Improves site performance on mobile and low powered devices
• Angular Universal generated pages are easily searchable, linkable and navigable
• Pages can be displayed even without JavaScript. They are pure HTML.

Let’s start implementing

Run the command below in your Angular project to integrate ng universal express engine.

ng add @nguniversal/express-engine

It will generate following output.

It’s installed! Now is the time to run and test Angular Universal (SSR) in action. Run command below.

npm run dev:ssr

It will run your angular app on the same port 4200. Open http://localhost:4200 in your browser and open View page source.

You will notice the complete HTML is loaded in the browser. Great! Angular Universal is integrated and working.

Build SSR Project for Production

Run below command that will build both the server script and the application in production mode. Use this command when you want to build the project for deployment.

ng build && ng run app-name:server

Implement AMP (Accelerated Mobile Pages)

AMP is used to make fast performance pages which can be opened on mobile devices and that not only improves the search engine ranking but also improves the sales (if your website is into e-commerce domain).

At the moment there is not any appropriate library to convert Angular pages into AMP pages. We would need to convert them manually and render throw SSR (server side rendering).

We will do modification in the server.ts file generated by Angular Universal in above steps.

Manual AMP conversion steps are here – Convert HTML to AMP

Replace server.get('*', (req, res) => { code with below code in server.ts file.

 // All regular routes use the Universal engine
 server.get('*', (req, res) => {
    if (req.query.amp) {
      console.log('AMP page requested');
      // render your amp page
      res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }, (err: any, htmlString) => {
        // Convert the htmlString to AMP before rendering
        res.render(htmlString);
      });
    } else {
      console.log('Non AMP page requested');
      // render normal page
      res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
    }
  });

The code will check for amp=1 in url query string. If it finds then it will come inside the condition and render the AMP string. You need to convert the htmlString to AMP before rendering.

I am creating a tool to convert Angular templates to AMP. I will update my article once the script is ready.

If you need the script, comment on the below post so that I can know how many people are needing it and I can give more time to script generation.

I am creating a script to convert Angular pages to AMP version on the fly. Need your support. Write below if anyone else needs the script ??

— StackBlogger (@stack_blogger) October 6, 2021