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

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

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

.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.

Мои вопросы:

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

Спасибо!


angularjs seo angular-routing angular-ui-router
person JohnAndrews    schedule 07.09.2015    source источник
comment
Я также начал работать над библиотекой — github.com/jjbskir/angular-prerender — для предварительно визуализировать html-страницы, чтобы помочь с SEO и красивыми URL-адресами.   -  person jjbskir    schedule 22.09.2015

Ответы (4)


arrow_upward
8
arrow_downward

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

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

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

to:

www.website.com/app/browse/productId

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

person jjbskir    schedule 16.09.2015

arrow_upward
4
arrow_downward

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

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

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

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

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

person Carka    schedule 10.09.2015
comment
Звучит многообещающе. Можете ли вы показать мне пример того, как это выглядит? App.js - person JohnAndrews; 11.09.2015
comment
почему бы вам не удалить идентификатор из своего URL-адреса и не сопоставить его обратно в вашем приложении? Швы - это самый простой способ. Или просто используйте название продукта в качестве еще одного параметра URL. чтобы получить к нему доступ в заголовке страницы, просто используйте titleExtend с предоставленной директивой. - person Carka; 11.09.2015

arrow_upward
4
arrow_downward

Вам нужно использовать 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',

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

person Ali Adravi    schedule 17.09.2015
comment
Куда вы помещаете web.config? - person JohnAndrews; 13.10.2015

arrow_upward
1
arrow_downward

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

$locationProvider.html5Mode(true);

и в index.html добавить:

<base href="/">

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

person Preetam Yadav    schedule 11.02.2017