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

エンジニアの土屋と申します。 今回もAngular JsネタなのですがSEOの関連の小ネタをご紹介したいと思い…

エンジニアの土屋と申します。

今回もAngular JsネタなのですがSEOの関連の小ネタをご紹介したいと思います。
Angular Jsは、最近は様々なサービスで使われてきていることが多くなってきたのですが、
SEO対策に関しての情報が、意外にも少なかったりします。

特にURLを動的に生成する場合は、簡単にmetaタグを動的に生成できないこともあって、Angularの
先人たちも苦労していたようです。

いくつか方法があって、最初はPhantomJSを使ってレンダリングしようと思ったのですが、
少し難しそうだったので、今回は導入難易度が低いphpを使ったSEO対策についてご紹介したいと思います。

・動作させたいこと
Angular JSで動的に生成されたページを、検索で引っかかるようにしたい。
(URL例)https://www.hoge.com/hoge/1/aaaaa

・phpの導入
最初にphpをインストールします。今回実施したサーバにはすでにphpがインストールされていたのですが、
動けばなんでも良いのですがとりあえずphpをインストールしておいてください。

# yum install -y php55

確認用のphpファイルを作成します。

phpinfo.php

<php?
phpinfo();
?>

上記をcUrlコマンドの実行もしくはURLを直接叩いて確認します。php情報が
表示されましたら、問題なく動作していることとなります。

・Angular Js側の実装
まず、動的にタグの内容を取得できるように実装します。

test.js
コントローラー側で以下の処理を追加します。

        ngMeta.setTitle(this.hoge.title);
        ngMeta.setTag('description', this.hoge.title);
        ngMeta.setTag('keywords', this.hoge.company_name + ',' + this.hoge.item.name);
        ngMeta.setTag('og:type', 'article');
        ngMeta.setTag('og:url', $location.absUrl());
        ngMeta.setTag('og:image', this.hoge.image);

index.html
htmlについても、seoの処理を実装いたします。

  <meta name="keywords" content="{{ngMeta.keywords}}" /> 
  <meta property="og:site_name" content="hoge" />
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ngMeta.url}}" />
  <meta property="og:title" content="{{ngMeta.description}}" />
  <meta property="og:description" content="{{ngMeta.description}}" />
  <meta property="og:image" content="{{ngMeta.image}}" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="hoge" />
  <meta name="twitter:description" content="{{ngMeta.description}}" />
  <meta name="twitter:image" content="{{ngMeta.image}}" />
  <meta name="twitter:url" content="{{ngMeta.url}}" />

・phpの実装

動的に情報を取得するphpファイルを作成します。
seo.php

<?php
//取得URLの設定
$SITE_ROOT = "https://api.hoge.com/v1/";

$jsonData = getData($SITE_ROOT);
makePage($jsonData, $SITE_ROOT);

function getData($siteRoot) {
    //パラメータの取得
    $id = $_GET['id'];

    //コンテンツの取得
    $rawData = file_get_contents($siteRoot.'hoge/'.$id);

    return json_decode($rawData);
}

function makePage($data, $siteRoot) {
?>
<!DOCTYPE html>
<html>
    <head>
      <meta property="og:title" content="hoge" />
      <meta property="og:description" content="<?php echo $data->title; ?>" />
      <meta property="og:image" content="<?php echo $data->image; ?>" />
      <meta name="twitter:card" content="summary">
      <meta name="twitter:title" content="hoge" />
      <meta name="twitter:description" content="<?php echo $data->title; ?>" />
      <meta name="twitter:image" content="<?php echo $data->image; ?>" />
      <meta name="twitter:url" content="<?php echo $data->article_url; ?>" />        
        <!-- etc. -->
    </head>
    <body>
    </body>
</html>
<?php
}
?>

・APIを直接実行して確認(cUrl使う)

cUrl -X GET https://api.hoge.com/v1/hoge/1

上記実行し、情報が取得できていたら、seo.phpが動作していることになります。
まだ、このままだとURLを実行して動作させることはできないので、次回、残りの
手順を記載いたします。