Skip to content

Commit

Permalink
docs(seo): add chapter for search engine optimized URLs/routes
Browse files Browse the repository at this point in the history
  • Loading branch information
Eisie96 authored and shauke committed Jul 18, 2022
1 parent 6ea180d commit d82361d
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 2 deletions.
25 changes: 23 additions & 2 deletions docs/concepts/search-engine-optimization.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,32 @@ To use a custom `robots.txt`, place it as a file in the `dist` folder.

## Page Metadata

The PWA uses the library [@ngx-meta/core](https://www.npmjs.com/package/@ngx-meta/core) for setting tags for title, meta description, robots, canonical links and open graph infos in page headers.
The PWA uses the library [@ngx-meta/core](https://www.npmjs.com/package/@ngx-meta/core) for setting tags for title, meta description, robots, canonical links, and open graph infos in page headers.

Meta information can be added to the routing in form of the data property `meta`.
Have a look at [`app-routing.module`](../../src/app/pages/app-routing.module.ts) for examples.
It is also possible to use translation keys here.

[`seo.effects.ts`](../../src/app/extensions/seo/store/seo/seo.effects.ts) is the central place for customizations concerning dynamic content, e.g. names of products or categories (asynchronous data from the API).
[`seo.effects.ts`](../../src/app/extensions/seo/store/seo/seo.effects.ts) is the central place for customizations concerning dynamic content, e.g., names of products or categories (asynchronous data from the API).
Effects are an essential part of our [State Management](./state-management.md).

## Optimized URLs

Optimized URLs are a major factor in determining search engine rankings.
They should have a clear structure and must be readable.
By default, product, category, and content page routes contain their localized context path.
Parameters are appended to theses paths that contain localization-independent and uniquely identifiable data.

| Type | Structure | Parameter | Example |
| ------------ | ---------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| category | complete category path | **-ctg**: category id | /computers/notebooks-and-pcs/notebook-accessories-ctgComputers.1835.1284 |
| product | complete category path with product name | **-prd**: product sku, </br>**-ctg**: category id | /computers/notebooks-and-pcs/notebook-accessories/kensington-keyfolio-prd5981602-ctgComputers.1835.1284 |
| content page | complete content page path | **-pg**: content page id | /help/faq/seo/how-to-pghow-to-seo |

**_NOTE:_** The given parameters for each url are needed to differentiate category, product, and content page routes.
It is important to ensure that no identifier contains the specified parameter id.
For example, a category name including a `-ctg` substring could lead to unwanted behavior.

**_NOTE:_** Route generation and parsing for category, product, and content-page routes can be customized.
This will require changes to the well documented [`product.route.ts`](../../src/app/core/routing/product/product.route.ts), [`category.route.ts`](../../src/app/core/routing/category/category.route.ts), or [`content-page.route.ts`](../../src/app/core/routing/content-page/content-page.route.ts) files.
Additionally, the corresponding pipes (e.g., [`product-route.pipe.ts`](../../src/app/core/routing/product/product-route.pipe.ts)) may have to be updated to fit your needs as will [`routing.ts`](../../src/app/core/utils/routing.ts).
6 changes: 6 additions & 0 deletions docs/guides/migrations.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ kb_sync_latest_only

# Migrations

## 2.4 to 3.0

For better Search Engine Optimization the route formate and route handling for products, categories, and content pages has been reworked.
All these routes now contain hierarchies and have different id markers. For categories it was changed from `cat` to `ctg` and for products from `sku`to `prd`.
This way, it is intended to have less conflicts and limitations with potential category/product ids, e.g., 'cats' or 'skunks'.

## 2.3 to 2.4

The PWA 2.4 contains an Angular update to version 13.3.10 and many other dependencies updates.
Expand Down

0 comments on commit d82361d

Please sign in to comment.