How to Create SEO-Friendly URLs in angular?
Tags: seo, web, angular
Published: 2023-02-02 15:22:05

Originally Posted: [https://www.arunyadav.in/codehacks/blogs/post/17/how-to-create-seofriendly-urls-in-angular](https://www.arunyadav.in/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](https://stackblitz.com/edit/angular-ivy-y7dyns) example

Here is a [Github](https://github.com/engg-aruny/Seo-Friendly-url) 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.

```html
<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.

```typescript
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.

```typescript
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


![Notice SEO URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tewmji2k0bn29mfpf4kq.png "Notice SEO URL")

Here is a [stackblitz](https://stackblitz.com/edit/angular-ivy-y7dyns) example

Here is a [Github](https://github.com/engg-aruny/Seo-Friendly-url) example

**Screenshot of sample example**



![Demo Screen Shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ylsajbl48qc0nkte4e9.png 
 "Demo Screen Shot")

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.