Angular UI-Routerの動的ビューでのSEOに優しいUrl Slugの追加

Question

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 

私のようなものを見たいのですが、次のように

私のconfigが見えます

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

ここで、most-awesome-productはです。Slug。

私の質問は以下のとおりです。

• 一般に角度ウェブサイトを作るの原理は、ルーティングを使用して友好をSEOていますか？
• URLスラッグ（上記参照）を追加して私のルーターのURLを変更するにはどうすればよいですか？
• 私のウェブサイトのSEOをフレンドリーにするURLを変更しますか？

ありがとう！

Answer 1

Googleは1つのページアプリをもっと親切にしたいと思っていますが、どのくらい離れているかはわかりません。

www.website.com/app/browse/productId 

私の問題：あなたのセットアップを使用してこれを実現するために

一つの方法は、あなたの設定$locationProvider.html5Mode(true);に追加し、

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

にURLを向けるだろう、あなたのHTMLヘッダー<base href="/app/" />の下に追加することですこの設定では、www.website.com/appなどのフロントエンドに1つのエントリポイントだけを出力するようにサーバーを設定する必要があることがわかりました。これを設定するにはtutorialがあります。

Answer 2

＃を保存する必要があります。従来のブラウザの代替手段としてのURL

あなたのサイトをインデックスに登録するには、もうHTMLスナップショットは必要ありません。 私は

1. サイトマップ
2. pushstateせずにセットアップ以下でインデックスサイト持っている "＃を！" URL
3. 標準タグ
4. コンテンツは＃でアクセス可能です。通常のルーティングでは、インデックスで必要なURLを参照する必要があります。私はこのスニペットを使用してパラメータを正規のタグを使用するためには

を（私はhttpsの+ HTML5 UIルータのURLを持っている）：https://github.com/w11k/w11k-angular-seo-header

いけない削除したときに、インデックスファイルに、サーバー上のすべての要求をリダイレクトすることを忘れハッシュバング。

Answer 3

あなたがたindex.htmlページでは

$locationProvider.html5Mode(true); 

を追加web.configファイルではその

ためhtml5Modeを使用する必要が

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

そして、あなたの状態がジャストルート設定ファイルにコードの行を追加しますAngularJS HTML5 mode reloading page not found solution

Answer 4

を参照してください詳細については、この

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

のように、変更する必要があります。

$locationProvider.html5Mode(true); 

とインデックスで.html追加：

<base href="/"> 

これで問題は解決します。