Dodawanie przyjaznego dla SEO pliku Url Slug w dynamicznych widokach kątowego interfejsu użytkownika

Question

W ustawieniu kątowym wybrałem Angular UI-router, aby przełączać widoki.

Mój config wygląda następująco:

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

}) 

To spowoduje, że adres URL produktu będzie wyglądać następująco:

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

Zamiast tego chciałbym zobaczyć coś takiego:

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

gdzie most-awesome-product jest Url Slug.

Moje pytania są następujące:

• jakie są w ogóle zasady dokonywania kątowe stron WWW SEO Friendly wykorzystaniem Routing?
• Jak zmienić adres mojego routera kątowego, dodając link URL (patrz wyżej)?
• Zmieni adres URL, by moja strona była przyjazna SEO?

Dzięki!

Answer 1

Firma Google stara się, aby jedna strona aplikacji była bardziej przyjazna dla SEO, ale nie wiadomo, jak daleko się posunęły, dlatego też stosuję strukturę URL strony, która nie jest stroną, gdy potrzebuję witryny, by była przyjazna SEO.

Jednym ze sposobów osiągnięcia tego używając swoją konfigurację jest dodać do config $locationProvider.html5Mode(true); i dodać pod nagłówku HTML <base href="/app/" /> który zmieni swój adres

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

do:

www.website.com/app/browse/productId 

mój problem przy tej konfiguracji okazało się, że musisz skonfigurować swój serwer tak, aby wyprowadzał tylko jeden punkt wejścia do twojego interfejsu, taki jak www.website.com/app. Oto tutorial w sprawie ustawienia.

Answer 2

musisz zachować #! adresy URL jako awarie w starszych przeglądarkach.

, aby uzyskać google do indeksowania witryny, nie trzeba już migawek html. Mam witryny indeksowane z następujących ustawień

1. sitemap
2. pushState bez "#!" adresy URL:
3. Znaczniki kanoniczne
4. treści dostępne # #! i normalne rutowanie, kanoniczne muszą wskazywać adresy URL, które chcesz w indeksie. (Mam https + HTML5 ui adresy URL routera)

W celu korzystania z kanonicznych tagi z parametrami Używam tego fragmentu: https://github.com/w11k/w11k-angular-seo-header

Nie zapomnij przekierować wszystkie żądania na serwerze do pliku indeksu po usunięciu hashbang.

Answer 3

Musisz użyć html5Mode dla tego

W web.config dodać

$locationProvider.html5Mode(true); 

W index.html stronie

<base href="/"> 

Jest wystarczająco, ale kiedy będzie odświeżyć stronę spowoduje to błąd, więc trzeba użyć ponownego pisania adresu URL, dodaj więc 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> 

A twój stan będzie trzeba zmienić, jak to

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

Więcej szczegółów patrz AngularJS HTML5 mode reloading page not found solution

Answer 4

Wystarczy dodać wiersz kodu w trasie pliku konfiguracyjnego:

$locationProvider.html5Mode(true); 

i indeksu .html dodaj:

<base href="/"> 

To rozwiąże Twój problem.