nginx + php でAngular JsのSEO対策してみた2

システムエンジニアの土屋と申します。 (http://tokyo.supersoftware.co.jp/te…

システムエンジニアの土屋と申します。

(http://tokyo.supersoftware.co.jp/technology/7882)の続きになります。
前回書き忘れたのですが、今回のSEO対策はFaceBookやtwitterでアクセスしても
動的にディレクトリが生成された記事が表示されるようにする、という目的になります。

今の設定のままだと、https://www.hoge.com/hoge/1/aaaaa でアクセスしても
リダイレクトされてしまうのでnginxの設定を行います。

・nginx側の実装(抜粋)
/etc/nginx/nginx.conf

    server {
        listen       80;
        listen       [::]:80;
        server_name  www.hoge.com;
①      root         /home/ec2-user/front/batch;  

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        # redirect http to https 
        if ($http_x_forwarded_proto != https) {
            return 301 https://$host$request_uri;
        }

        location / {
②        if ($http_user_agent ~ "(facebookexternalhit/[0-9]|Twitterbot)"){ 
③          rewrite ^/hoge/(\d*).*$ https://www.hoge.com/seo.php?id=$1 redirect; 
          }
         # try_files $uri $uri/ = 404;
            try_files $uri$args $uri$args/ /index.html;
        }

①がseo.phpファイルが配置されているディレクトリになります。
②がTwitterやFacebookがアクセスしているかユーザーエージェントで判別する処理になります。
③ユーザーエージェントが条件に合致した場合のリダイレクト先になります。

・確認(Twitter、Facebook)
実際に投稿して、問題なく表示されるかを確認します。
Twitterに関しては投稿前に以下のツールで確認できます。
https://cards-dev.twitter.com/validator

設定した記事のサムネイル、タイトルが表示されれば完成です。

・終わりに
2回に分けてAngular JSのSEO対策についてお話ししましたが、環境構築で問題なければ
そこまで苦労しないと思います。
若干駆け足になってしまいましたが、Angular JSで動的に生成したページをもTwitterや
Facebookで表示させたいときに、少しでもお役に立てれば幸いです。