在角ui路由器的动态视图中添加一个友好的搜索引擎优化Url段

In an Angular setting, I have chose Angular UI-router to switch between views.

在角度设置中，我选择了角度UI-router来在视图之间切换。

My config looks as follows:

我的配置如下:

.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/app/home');

  $stateProvider

    // Nav
    .state('app', {
      url: '/app',
      templateUrl: 'templates/navbar.html',
      abstract: true,
      controller:'AppCtrl as app',
    })

    // Home
    .state('app.home', {
      url: '/home',
      templateUrl: 'templates/home.html',
      controller:'HomeCtrl as home',
    })

    .state('app.browse', {
      url: '/browse',
      templateUrl: 'templates/browse.html',
      controller:'BrowseCtrl as browse',
    })

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

})

This will result that the url of a product will appear as follows:

这将导致产品的url如下所示:

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

Instead I would like to see something like:

相反，我想看到的是:

www.website.com/browse/productId/most-awesome-product

where most-awesome-product is an Url Slug.

最有价值的产品是Url段。

My questions are:

我的问题是:

what are in general the principles of making Angular Websites SEO friendly using Routing?
使用路由使有棱角的网站SEO友好的一般原则是什么?
how can I change the url of my angular router with adding the url slug (see above)?
如何通过添加url段(见上面)来更改我的角路由器的url ?
will changing the url make my website SEO friendly?
更改url会使我的网站SEO友好吗?

Thanks!

谢谢!

4 个解决方案

#1

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.

谷歌一直在尝试使一个页面应用程序更易于SEO，但不确定他们已经走了多远，这就是为什么当我需要一个站点对SEO友好时，我坚持使用非一个页面的应用程序url结构。

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

使用设置完成此任务的一种方法是添加到配置$locationProvider.html5Mode(true);在你的HTML标题下添加，它将会打开你的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.

我的问题是，我发现您需要配置您的服务器只输出一个入口点到您的前端，如www.website.com/app。这里有一个关于设置的教程。

#2

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

你需要保留#!url作为遗留浏览器的回退。

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

为了让谷歌索引您的站点，您不再需要html快照。我有一个网站索引与以下设置

sitemap
网站地图
pushstate without "#!" urls
pushstate没有“# !”url
Canonical Tags
规范的标签
content accessible with #! and normal routing, canonical must point to urls that you want in the index. (i have https + html5 ui router urls)
内容访问# !正常的路由，canonical必须指向索引中你想要的url。(我有https + html5 ui路由器url)

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

为了使用带参数的规范标记，我使用以下代码片段: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.

删除hashbang时，不要忘记将服务器上的所有请求重定向到索引文件。

#3

You need to use the html5Mode for that

您需要为此使用html5Mode

In web.config add

在网络上。配置添加

$locationProvider.html5Mode(true);

In index.html page

在索引。html页面

<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

这就足够了，但是当你刷新页面时，它会给出错误，所以需要使用url重写，所以添加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

有关更多细节，请参见AngularJS HTML5模式重载页面未找到的解决方案

#4

Just add a line of code in route configuration file:

只需在route配置文件中添加一行代码:

$locationProvider.html5Mode(true);

and in index.html add:

和索引。html添加:

<base href="/">

It will resolve your problem.

它将解决你的问题。

#1