Добавление SEO дружественного URL-адреса в динамических представлениях Angular UI-Router

В настройке Angular я выбрал Angular UI-router для переключения между представлениями.

Мой конфиг выглядит следующим образом:

.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',
    })

})

Это приведет к тому, что URL-адрес продукта будет выглядеть следующим образом:

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

Вместо этого я хотел бы увидеть что-то вроде:

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

где most-awesome-product - Url Slug.

Мои вопросы:

  • Каковы, в общем, принципы создания Angular Сайтов SEO с использованием маршрутизации?
  • Как изменить URL-адрес моего маршрутизатора Angular с добавлением URL-адреса (см. выше)?
  • изменит URL-адрес вашего сайта на основе SEO?

Спасибо!

Ответы

Ответ 1

Google пытается сделать приложения на одной странице более ориентированными на SEO, но не уверен, как далеко они прошли, поэтому я придерживаюсь структуры URL-адресов, отличной от одной страницы, когда мне нужен сайт, чтобы быть дружественным к SEO.

Один из способов сделать это с помощью вашей настройки - добавить в конфигурацию $locationProvider.html5Mode(true); и добавить в свой HTML-заголовок <base href="/app/" />, который превратит ваш URL

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

в

www.website.com/app/browse/productId

Моя проблема с этой настройкой, которую я обнаружил, заключается в том, что вам нужно настроить сервер для вывода только одной точки входа в ваш интерфейс, например, www.website.com/app. Ниже приведено учебник.

Ответ 2

вам нужно сохранить #! urls как резервные копии для устаревших браузеров.

чтобы получить Google для индексации вашего сайта, вам больше не нужны html-снимки. У меня есть сайт с индексом со следующей настройкой

  • карта сайта
  • pushstate без "#!" URLs
  • Канонические теги
  • содержимое доступно с помощью #! и нормальная маршрутизация, канонические должны указывать на URL-адреса, которые вы хотите в индексе. (у меня есть https + html5 ui URL-адреса маршрутизатора)

Чтобы использовать канонические теги с параметрами, я использую этот фрагмент: https://github.com/w11k/w11k-angular-seo-header

Не забудьте переадресовать все запросы на ваш сервер в ваш индексный файл при удалении hashbang.

Ответ 3

Вам нужно использовать html5Mode для этого

В web.config добавьте

$locationProvider.html5Mode(true);

На странице index.html

<base href="/">

Достаточно, но когда вы обновите страницу, она даст ошибку, поэтому вам нужно будет использовать повторную запись 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>

И ваше состояние должно измениться, как это

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

Подробнее см. Неверное решение по загрузке режима HTML5 в режиме AngularJS

Ответ 4

Просто добавьте строку кода в файл конфигурации маршрута:

$locationProvider.html5Mode(true);

и в index.html add:

<base href="/">

Он решит вашу проблему.