> For the complete documentation index, see [llms.txt](https://docs.spurtcommerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.spurtcommerce.com/addons/cms-related-addons/seo.md).

# SEO

**Installation of Spurtcommerce Product Variant Add-On**

This document will help you to install Product Variant add-on to your spurtcommerce server for single vendor as well as multi vendor

**you can install this Add-on through following steps**

step 1: [<mark style="color:blue;">Setup an API (Step By Step)</mark> ](#setup-an-api-step-by-step)to add extension for admin

step 2: [<mark style="color:blue;">Admin setup</mark>](#admin-setup)

Step 3: [<mark style="color:blue;">Store setup</mark>](#store-setup)

**About addon**

This document will help you to install SEO addon to your spurtcommerce Community Edition. This addon is a default integration in Multi-Vendor. When this plugin is installed, your eCommerce portal can be optimized for search engine with meta tags.

**Features:**

* In Admin, under 'Manage SEO' admin can either select Product, Category, Pages or Blogs.&#x20;
* On selecting a particular option, the list page appears, with an option adjacent to each of the items as 'Update Meta'.
* On clicking on 'Update Meta' a pop-up opens, where the admin can update the title, description and keywords.
* &#x20;On saving the same, the Meta tags for a particular option - either product, category, blogs or pages gets updated.&#x20;

#### [<mark style="color:blue;">**Setup an API (Step By Step)**</mark>](#setup-an-api-step-by-step)

For setting up the API, you need to execute the following steps:

* Installing an extension&#x20;
* Run the application&#x20;
* Make the build

**Step 1 : Installing an extension**&#x20;

These are the steps that need to be executed for installation of the extension.

Usually spurcommerce comes packed in a zip, whose name ends in <mark style="color:green;">**"seo-addOn.zip".**</mark> Extract the zip file, open api folder and open addon folder within that and copy the content of addon folder into the specified path.

&#x20;                                      **Path - \<PROJECT\_ROOT>/addon**

**Step 2 : Run the application**

After you have completed the installation of the above mentioned steps, you can run the application and also view the changes.

```
$ npm start serve
```

Once you execute the above command, add-on file will get integrated into the backend API.

**Step 3 : Make the build**

These are the steps that need to be followed for generating the build.

To run the below command

```
 $ npm run build
```

Then latest built files can be deployed into the server.

## <mark style="color:blue;">Admin Setup</mark>

These are the steps that need to be followed to do the front end admin setup.&#x20;

* Installing an extension
* Update the configuration
* Module Detail
* Run the application
* Make the build<br>

**Step 1 : Installing an extension**

These are the steps that need to be executed for installation of the extension.

Usually spurcommerce comes packed in a zip, whose name ends in "seo-addOn.zip".&#x20;

Extract the zip file and copy the content of admin/add-ons folder into the specified path

&#x20;                                     **Path - admin/add-ons**

**Step 2 : Update the configuration**

After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce config files. For this, you need to follow the steps below.&#x20;

**Update Reducer Config**

```
Import below line into the add-ons/add-ons-reducer.ts
import * as fromBlogSeo from './cms/seo/blog-seo/core/reducer/blog-seo.reducer';

```

```
import * as fromCategorySeo from './cms/seo/category-seo/core/reducer/category-seo.reducer';

```

```
import * as fromPageSeo from './cms/seo/page-seo/core/reducer/page-seo.reducer';


```

```
import * as fromProductSeo from './cms/seo/product-seo/core/reducer/product-seo.reducer';


```

```
import * as fromGenerateSiteMap from './cms/site-map/core/generatesitemap-reducer/generatesitemap.reducer';

```

\
**Add the reducer into the below object**

&#x20;  blogSeo: fromBlogSeo.reducer,

&#x20;  categorySeo: fromCategorySeo.reducer,

&#x20;  pageSeo: fromPageSeo.reducer,

&#x20;  productSeo: fromProductSeo.reducer,

&#x20;  Generatesitemap: fromGenerateSiteMap.reducer

<br>

1. **After adding its looks like below**

```

export const AddOnReducers: ActionReducerMap<State> = {
            blogSeo: fromBlogSeo.reducer,
                                               categorySeo: fromCategorySeo.reducer,
                                               pageSeo: fromPageSeo.reducer,
                                              productSeo: fromProductSeo.reducer,
                                       Generatesitemap: fromGenerateSiteMap.reducer


};




```

**Update State Config**

&#x20;   1\)    Import below line into the <mark style="color:green;">**add-ons/add-ons-state.ts**</mark>

```
 import { BlogSeoState } from './cms/seo/blog-seo/core/reducer/blog-seo.state';

import { CategorySeoState } from 
           './cms/seo/category-seo/core/reducer/category-seo.state';

import { PageSeoState } from './cms/seo/page-seo/core/reducer/page-seo.state';

import { ProductSeoState } from './cms/seo/product-seo/core/reducer/product-seo.state';
import { GeneratesitemapState } from './cms/site-map/core/generatesitemap-reducer/generatesitmap.state';

```

1. Add the state into the below object

&#x20;    blogSeo: BlogSeoState,

&#x20;  categorySeo: CategorySeoState,

&#x20;  pageSeo: PageSeoState,

&#x20;  productSeo: ProductSeoState,

&#x20;  Generatesitemap: GeneratesitemapState

<br>

1. **After adding its looks like below**

export interface AddOnAppState {

&#x20;  blogSeo: BlogSeoState,

&#x20;  categorySeo: CategorySeoState,

&#x20;  pageSeo: PageSeoState,

&#x20;  productSeo: ProductSeoState,

&#x20;  Generatesitemap: GeneratesitemapState

<br>

}

**Step 3 : Change the routing file**<mark style="color:green;">**(cms.routing.ts)**</mark>

Inside the <mark style="color:green;">**src/theme/default/admin/cms/components/manage-seo/manage-seo.routing.ts**</mark>

1. Import below line

```
import * as cmsRouting from '../../../../../../../add-ons/cms/cms.routing';

```

2\. Add these routes below the manageSeoRoutes array

manageSeoRoutes.push(cmsRouting.productSeoRoutes\[0]);

manageSeoRoutes.push(cmsRouting.categorySeoRoutes\[0]);

manageSeoRoutes.push(cmsRouting.blogSeoRoutes\[0]);

manageSeoRoutes.push(cmsRouting.pageSeoRoutes\[0]);

manageSeoRoutes.push(cmsRouting.siteMapRoutes\[0]);

<br>

Inside the <mark style="color:green;">**src/theme/default/admin/cms/components/header/header.component.html**</mark>

<mark style="color:green;">**Below line no:82**</mark>

```
 <li [appHideIfUnauthorized]="'cms-blogs'" >
                           <a href="javascript:void(0)" [routerLink]="['/cms/manage-seo/product_seo']" [routerLinkActive]="'active'">
                               Product
                           </a>
                       </li>

                       <li [appHideIfUnauthorized]="'cms-blogs'" >
                           <a href="javascript:void(0)" [routerLink]="['/cms/manage-seo/category_seo']" [routerLinkActive]="'active'">
                               Category
                           </a>
                       </li>


                       <li [appHideIfUnauthorized]="'cms-blogs'" >
                           <a href="javascript:void(0)" [routerLink]="['/cms/manage-seo/page_seo']" [routerLinkActive]="'active'">
                               Pages
                           </a>
                       </li>


                       <li [appHideIfUnauthorized]="'cms-blogs'" >
                           <a href="javascript:void(0)" [routerLink]="['/cms/manage-seo/blog_seo']" [routerLinkActive]="'active'">
                               Blog
                           </a>
                       </li>

 <li [appHideIfUnauthorized]="'cms-blogs'" >
                           <a href="javascript:void(0)" [routerLink]="['/cms/manage-seo/sitemap']" [routerLinkActive]="'active'">
                               Sitemap
                           </a>
                       </li>

```

**Step 4 : Run the application**

After you have integrated the Blogs Module into Spurtcommerce, you can use the following command to run the application.&#x20;

```
 npm run large-serve

```

## <mark style="color:blue;">Store Setup</mark>

1. Import below line into the <mark style="color:green;">**add-ons/add-ons.shared.component**</mark>

**Update Component Config**

After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce config files. For this, you need to follow the steps below. <br>

Extract the zip file and copy the content of store-angular/add-ons folder into the specified path

&#x20;                                                        **Path -  store-angular/add-ons**

**Step 2 : Update the configuration**

After the installation of the extension, you will have to update certain configurations into the default Spurtcommerce config files. For this, you need to follow the steps below.&#x20;

**Update Component Config**

Import below line into the <mark style="color:green;">**add-ons/add-ons.shared.component**</mark>

```
import { ProductSeoComponent } from './seo/Product-seo/template/product-seo/product-seo.component';

```

```
import { CategorySeoComponent } from './seo/category-seo/template/category-seo/category-seo.component';

```

```
import { PageSeoComponent } from './seo/page-seo/template/page-seo/page-seo.component';

```

```
import { BlogSeoComponent } from './seo/blog-seo/template/page-seo/blog-seo.component';

```

1. **Add the following components into the below object**&#x20;

1\)      ProductSeoComponent,

2\)   CategorySeoComponent,

&#x20;3\)   PageSeoComponent,

&#x20;  4\)   BlogSeoComponent,

3\. **After adding its looks like below**

&#x20; export const ADD\_ON\_COMPONENTS = \[

&#x20;                                1\)      ProductSeoComponent,

&#x20;                             2\)   CategorySeoComponent,

&#x20;                             3\)   PageSeoComponent,

&#x20;                              4\)   BlogSeoComponent,

]

**Step 3 : Module Detail**

The modules pertaining to seo are listed below. You may use these modules, in any page of Spurtcommerce.&#x20;

Also, you can find the steps below to use the modules in seo  in Spurtcommerce pages.&#x20;

&#x20; In the seo addon having four components.

ProductSeoComponent,

&#x20;  CategorySeoComponent,

&#x20;  PageSeoComponent,

&#x20;  BlogSeoComponent,

ProductsSeoComponent

&#x20;     Directive&#x20;

```
   <app-product-seo [productSlug]="id"></app-product-seo>in
```

&#x20;    CategorySeocomponent

&#x20;                 Directive

```
 <app-category-seo [categorySlug]="categorySlug"></app-category-seo>                 
```

**pageSeocomponent**

&#x20;**Directive**

```
   <app-page-seo [pageSlug]="pageId"></app-page-seo>
```

&#x20;               &#x20;

**BlogSeocomponent**

**Directive**

```
    <app-blog-seo [blogSlug]="blogId"></app-blog-seo>
```

&#x20;                &#x20;

**Step 4 : Run the application**

After you have integrated the Blogs Module into Spurtcommerce, you can use the following command to run the application.

```
ng serve

```

Once you execute the above command you can view the installed module in Spurtcommerce, within the page in which you have integrated.

\
**Step 5 : Make the build**

\
To run the below command

```
 ng build –prod

```

Then the latest built files can be deployed into the server.

\
\
\
\ <br>

&#x20;                         &#x20;

\
\
\
\
\ <br>

<br>

\ <br>

&#x20;

<br>

<br>