Aggiunta di un Url Slug SEO in viste dinamiche di UI-Router angolare

Question

In un'impostazione Angolare, ho scelto il router angolare UI per passare da una vista all'altra.

mio config si presenta come segue:

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

}) 

Questo comporterà che l'URL di un prodotto apparirà come segue:

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

Invece mi piacerebbe vedere qualcosa di simile:

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

dove most-awesome-product è un Url Slug.

Le mie domande sono:

• quali sono, in generale, i principi di creare siti web SEO friendly angolari utilizzando Routing?
• Come posso modificare l'URL del mio router angolare aggiungendo l'url slug (vedere sopra)?
• cambierà l'url rendere il mio sito web SEO friendly?

Grazie!

Answer 1

Google ha tentato di rendere le app di una pagina più SEO friendly, ma non è sicuro di quanto siano state ottenute, motivo per cui rimango con una struttura di url app non di una pagina quando ho bisogno di un sito SEO friendly.

Un modo per ottenere questo risultato utilizzando il set up è da aggiungere al vostro config $locationProvider.html5Mode(true); e aggiungere sotto l'intestazione HTML <base href="/app/" /> che trasformerà il vostro URL

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

a:

www.website.com/app/browse/productId 

Il mio problema con questo set ho scoperto che è necessario configurare il proprio server in modo che emetta solo un punto di ingresso sul front-end come www.website.com/app. Ecco un tutorial su come configurarlo.

Answer 2

è necessario mantenere il #! URL come fallback per i browser legacy.

per ottenere google per indicizzare il tuo sito non hai più bisogno di istantanee html. ho un sito indicizzato con i seguenti configurazione

1. sitemap
2. pushState senza "#!" urls
3. Tags canonici
4. contenuto accessibile con #! e il routing normale, canonical deve puntare agli URL che si desidera nell'indice. (Ho https + HTML5 gli URL router ui)

Per poter utilizzare i tag canoniche con i parametri Io uso questo frammento: https://github.com/w11k/w11k-angular-seo-header

Non dimenticate di reindirizzare tutte le richieste sul server al file di indice durante la rimozione del hashbang.

Answer 3

È necessario utilizzare il html5Mode per quella

Nel web.config aggiungere

$locationProvider.html5Mode(true); 

Nella pagina index.html

<base href="/"> 

E 'sufficiente, ma quando si aggiorna la pagina darà l'errore quindi è necessario utilizzare la riscrittura url, quindi aggiungere 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> 

e il tuo stato sarà necessario modificare, in questo modo

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

Per ulteriori dettagli vedi AngularJS HTML5 mode reloading page not found solution

Answer 4

Basta aggiungere una riga di codice nel percorso file di configurazione:

$locationProvider.html5Mode(true); 

e dell'indice .html add:

<base href="/"> 

Risolverà il tuo problema.