HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする

2014年8月31日

Hexo Node.js Google Analytics Google + Facebook Twitter

はじめに

こんにちは。インフラエンジニアレベル１のf_prgです。 Hexoはブログツールなのですが、デフォルトだとSEOやSocial Graphの設定がされてません。 Google Analytics, Google +, Facebook, Twitterの設定の方法をご紹介したいと思います。

HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする

テンプレートの_config.ymlを修正します

themes/landscape/_config.ymlファイルにありますパラメータを編集します。 themes/landscape/README.mdとhttp://hexo.io/docs/helpers.htmlを参考にしてください。

## Miscellaneous
google_analytics: UA-XXXXXXXXXXXXXXX
favicon:
twitter: f_prg
google_plus: f.prg.ex
fb_admins: YYYYYYYYYYYYYYY
fb_app_id: ZZZZZZZZZZZZZZZ

入力後に更新すれば、生成されるHTMLが下のようになります

<meta property="og:type" content="article">
<meta property="og:title" content="HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする">
<meta property="og:url" content="http://blog.star-flare.com/2014/08/31/hexo_site_options/">
<meta property="og:site_name" content="f_prgのブログです。">
<meta property="og:description" content="HexoでGoogle Analytics, Facebook, Twitterの設定をする
はじめに
こんにちは。インフラエンジニアレベル１のf_prgです。Hexoで、Google Analytics, Facebook, Twitterの設定ができるのでその方法をご紹介したいと思います。
HexoでGoogle Analyticsを使用する
テンプレートの_config.ymlを修正します">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする">
<meta name="twitter:description" content="HexoでGoogle Analytics, Facebook, Twitterの設定をする
はじめに
こんにちは。インフラエンジニアレベル１のf_prgです。Hexoで、Google Analytics, Facebook, Twitterの設定ができるのでその方法をご紹介したいと思います。
HexoでGoogle Analyticsを使用する
テンプレートの_config.ymlを修正します">
<meta name="twitter:creator" content="@f_prg">
<link rel="publisher" href="f.prg.ex">
<meta property="fb:admins" content="YYYYYYYYYYYYYYY">
<meta property="fb:app_id" content="ZZZZZZZZZZZZZZZ">

ちょっと下には、Google Analyticsの設定があります。

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXXXXXXXXX']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

まとめ

これでSEOやSocial Graphの効果が出そうですね。 Google Analyticsで効果測定ができそうです。

補足、おまけ

Twitter CardのValidationは https://dev.twitter.com/docs/cards/validation/validator で可能です。

参考資料・リンク

http://hexo.io/docs/helpers.html