How to Create SEO-Friendly URLs in angular?

Originally Posted: https://www.arunyadav.in/codehacks/blogs/post/17/how-to-create-seofriendly-urls-in-angular

Summary

Search engines recognize hyphens as word separators, making it easier for them to understand the structure of the URL.

What do you mean by SEO-friendly URL?

SEO-friendly URLs (also known as "search engine friendly" URLs) are URLs that are structured in a way that makes them easy for search engines to understand and index. These URLs are designed to be both user-friendly and search-engine friendly by using clear, concise, and descriptive keywords.

What do you mean by SEO-friendly URL?

SEO-friendly URLs (also known as "search engine friendly" URLs) are URLs that are structured in a way that makes them easy for search engines to understand and index. These URLs are designed to be both user-friendly and search-engine friendly by using clear, concise, and descriptive keywords.

Some of the key characteristics of SEO-friendly URLs include:

Use of keywords in the URL: URLs that include relevant keywords are more likely to rank well in search engine results pages (SERPs).

Use of hyphens to separate words: Search engines recognize hyphens as word separators, making it easier for them to understand the structure of the URL.

Short and concise URLs are easier for users to read and remember and more likely to be indexed by search engines.

Avoiding special characters: Special characters like question marks, ampersands, and equal signs can make URLs more difficult for search engines to understand.

How to make Angular SEO-friendly URLs?

Here is a stackblitz example

Here is a Github example

app.component.html

This code is an example of an HTML template for the ProductComponent in Angular. It displays two links, one labeled as "Best Practice - SEO friendly" and the other labeled as "Bad Practice - Not SEO friendly".

The first link is an anchor tag with the routerLink directive, which is used to navigate to a route in an Angular application. The routerLink directive is bound to the seoFrendlyUrl variable, which is a SEO-friendly URL that includes the product id and a hyphenated version of the product name. There is also an image of a dummy user next to the link and the text "Go to Product Detail" to indicate the purpose of the link.

The second link is an anchor tag with a click event bound to the goToProductDetail function. This function navigates to the product detail page using the router.navigate method, which takes an array of route parameters as its argument. However, this link is not SEO **friendly as it uses a JavaScript click event to navigate, and search engines **can't crawl it. The link also includes an image of a dummy user and the text "Go to Product Detail" to indicate the purpose of the link.

<p>product works!</p>
<h1>Both Example Works Similar</h1>

<!-- Best Practice - SEO frendly -->
<h2>Best Practice - SEO frendly</h2>
<a routerLink="{{seoFrendlyUrl}}">
    <img src="../../assets/img/dummy-user.jpg">
    Go to Product Detail
</a> &nbsp;


<!-- Bad Practice - Not SEO frendly -->
<h2>Bad Practice - Not SEO frendly</h2>
<a style="cursor: pointer;" (click)="goToProductDetail()">
    <img src="../../assets/img/dummy-user.jpg">
    Go to Product Detail
</a>

app.routing.module.ts

The routes constant is defined as an array of route configurations, where each configuration is an object that defines the path of the route and the component that will be displayed when the route is navigated to. The routes defined here include 'home', 'about', 'products' and 'products/:id/:name'. The :id and :name are path parameters, they are dynamic segments of the url.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { ProductDetailComponent } from './product/product-detail/product-detail.component';
import { ProductComponent } from './product/product.component';


const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductComponent },
  { path: 'products/:id/:name', component: ProductDetailComponent }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.ts

This code is an example of a ProductComponent in an Angular application. The component is responsible for displaying product details, including the product name and an SEO-friendly URL. (Notice browser)

The seoFrendlyUrl variable with a string that includes the product id and a hyphenated version of the product name. The goToProductDetail function is used to navigate to the product detail page using the router.navigate method, which takes an array of route parameters as its argument. The getHyphenatedString function is used to format the product name into an SEO-friendly format by replacing certain characters, removing spaces, and converting it to lowercase.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';


@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
  productName = "fake blush, glow and sheet (mask)";
  seoFrendlyUrl: string | undefined;


  constructor(private readonly router: Router) { }


  ngOnInit(): void {
    this.seoFrendlyUrl = `/products/2/${this.getHyphenatedString()}`
  }


  goToProductDetail() {
    this.router.navigate(["products", 2, this.getHyphenatedString()])
  }


  getHyphenatedString() {
    let limitedTitle = this.productName.substring(0, 100);
    let hyphenatedString = limitedTitle
      .replace(",", "")
      .replace(/[^\w\s]/gi, '')
      .replace(/[\(\)]/g, '')
      .replace(/\s+/g, '-')
      .toLowerCase();
    return hyphenatedString;
  }
}

Output

Notice: products/2/fake-blush-glow-and-sheet-mask

Here is a stackblitz example

Here is a Github example

Screenshot of sample example

Overall this code is showing the difference between an SEO-friendly link and a non-SEO-friendly link, The SEO-friendly link uses the routerLink directive, which allows search engines to crawl the link and index the corresponding page, while the non-SEO-friendly link uses a JavaScript click event to navigate, which search engines can't crawl.