Adding a SEO friendly Url Slug in Dynamic Views of Angular UI-Router

Google has been attempting to make one page apps more SEO friendly, but not sure how far they have gotten, which is why I stick with a non one page app url structure when I need a site to be SEO friendly.

One way to accomplish this using your set up is to add to your config $locationProvider.html5Mode(true); and add under your HTML header <base href="/app/" /> which will turn your url

www.website.com/app/#/browse/productId

to:

www.website.com/app/browse/productId

My issue with this set up I have found is that you need to configure your server to only output one entry point to your front end such as www.website.com/app. Here is a tutorial on setting this up.

you need to keep the #! urls as fallbacks for legacy browsers.

to get google to index your site you dont need html snapshots anymore. i have a site indexed with following setup

1. sitemap
2. pushstate without "#!" urls
3. Canonical Tags
4. content accessible with #! and normal routing, canonical must point to urls that you want in the index. (i have https + html5 ui router urls)

In order to use canonical Tags with Parameters i use this snippet: https://github.com/w11k/w11k-angular-seo-header

Dont forget to redirect all requests on your server to your index file when removing the hashbang.

You need to use the html5Mode for that

In web.config add

$locationProvider.html5Mode(true);

In index.html page

<base href="/">

It is enough but when you will refresh the page it will give the error so need to use url re-writing, so add in web.config

<system.webServer>    <rewrite>     <rules>       <rule name="Main Rule" stopProcessing="true">        <match url=".*" />        <conditions logicalGrouping="MatchAll">          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                           <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />        </conditions>        <action type="Rewrite" url="/" />      </rule>    </rules>    </rewrite></system.webServer>

And your state will need to change, like this

.state('app.browse-detail', {      url: '/browse/:productId/:slug',      templateUrl: 'templates/browse-detail.html',      controller:'BrowseDetailCtrl as detail',

For more detail see AngularJS HTML5 mode reloading page not found solution