Question 50810 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to render html from angular source code for SEO purpose – Javascript

Our web application is built on Angular JS front-end and node js backend.
Each of our pages is dynamic. So whenever I see view source the code looks like

https://prnt.sc/Tuw-HTdKyy37

Due to our business requires the pages to be SEO friendly to rank in google and make google bots crawl our pages. It is only possible if our site source code renders in HTML with proper tags for content such as following:

< title > my title </title>
<description> my desc....</description>

<body> my body</body>

etc..

Since each web page is built using angular and always renders dynamic content, how can we make it SEO-friendly? So when search engine bots to crawl it has all the tags and content organized as expected by the Google bots for indexing our website

Here is a link to our website for your reference to view the angular code:

https://www.linkscart.com/p/-pressed-powder-shadow/id-643053355d130e55e9d05916

Tags:

2

Answers


  1. 0

    Well! let me try helping you out with SSR! Server-side rendering.

    • Install Angular Universal: I guess you must be knowing how to install, but let me put the code

      npm install @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader

    • Then create an angular Universal application

    • Configure the server suitable for angular universal by creating a server file which will be waiting for the incoming requests and render your application on server side. Something like this:

      const express = require(‘express’);
      const { ngExpressEngine } = require(‘@nguniversal/express-engine’);
      const { provideModuleMap } = require(‘@nguniversal/module-map-ngfactory-loader’);
      const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(‘./dist/server/main’);

      const app = express();

      app.engine(‘html’, ngExpressEngine({
      bootstrap: AppServerModuleNgFactory,
      providers: [
      provideModuleMap(LAZY_MODULE_MAP)
      ]
      }));

      app.set(‘view engine’, ‘html’);
      app.set(‘views’, ‘dist/browser’);

      app.get(‘.‘, express.static(‘dist/browser’));

      app.get(‘*’, (req, res) => {
      res.render(‘index’, { req });
      });

      app.listen(3000, () => {
      console.log(Listening on http://localhost:3000);
      });

    • Now run build:ssr, this will create bundles on either side.

    • Last you need to start the server.

    THis will work like a charm by rendering your HTML from Angular for SEO purposes.

    I found that using this method will help you indexing your web pages which is really important. It was headache to me when I threw myself working on a similar case. Indexing will improve your sites visibility in search engine results.

    Login or Signup to reply.
  2. 0

    I found your website was developed with Angular from your shared Link.

    To make the SEO with dynamic pages you can follow below steps

    When building an Angular application, it’s important to set dynamic page titles that are optimized for SEO. Here’s how you can do it:

    1. Install the @angular/platform-browser package:

    npm install @angular/platform-browser --save

    2. In your app.module.ts file, import the BrowserModule and Title modules:

    import { BrowserModule, Title } from '@angular/platform-browser';

    3. Add the BrowserModule to the imports array in your @NgModule decorator:

    @NgModule({
  imports: [
    BrowserModule
  ],
  // ...
})

    4. In your component, inject the Title service and set the page title:

    import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.css']
})
export class MyPageComponent {
  constructor(private titleService: Title) {
    // Set the page title
    this.titleService.setTitle('My Page Title');
  }
}

    5. To set dynamic page titles based on the content of your page, you can pass in a dynamic value to the setTitle() method. For example:

    import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.css']
})
export class MyPageComponent {
  pageTitle: string = 'My Dynamic Page Title';

  constructor(private titleService: Title) {}

  ngOnInit() {
    // Set the page title dynamically based on the page content
    this.titleService.setTitle(`${this.pageTitle} - My Site Name`);
  }
}

    By setting dynamic page titles, you can improve the SEO of your Angular application and make it more discoverable in search engines.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search