Webページを作成する際に考えておくべき10のこと #JSON

はじめに

Webページを作成する時に考えておいたほうが良いことはたくさんあります。

これは、Webページを作成した後では既に時遅しということもありますし、カスタマイズしていく上でも大切な方向性となります。

今回は、そんな意味でWebページを作り始める前に意識しておきたいポイントを幾つか紹介しようと思います。10つあるかどうかは知りません。今後書くにあたって増えるかもしれないし、10つもないかもしれません。

Google SEO

検索エンジン最適化ですが、スタート時には考えたいなと思います。後々修正するのは面倒だし、コンテンツを作成していく上でもその方向性は大切になります。上のドキュメントは読んでおいて損はないでしょう。

Google Web Masters Tools

まず、上に登録しておくと、幾つもの要素を検証でき、更に直しの方向性が明らかになります。したがって、Googleアカウントを持っているならば設定しておくと良いと思います。

Google Analytics

Analyticsはアクセスを確認するのに役立ちます。また、Google Analytics APIを使用すると、アクセス数ごとの集計が取得できるので、人気記事を表示するのにも役立ちます。

Google APIを利用するには、以下を設定します。

Google API Console

Google Analytics APIを使ってみました。必要な物はclient_secrets.jsonになりますが、設定するとファイルをダウンロードできるようになります。しかし、Google API Console、分かりにくいです。

実験用に作成したスクリプトは以下。

$ git clone https://github.com/syui/analytics.rb

$ cd analytics.rb

# https://code.google.com/apis/console/
$ cp ~/Downloads/client_secrets.json .

$ rvm use 2.2.0

$ gem i bundler

$ bundle

# https://www.google.com/analytics/web/#report/visitors-overview/a1111111w2222222pxxxxxxx/
$ export GOOGLE_ANALYTICS_PROFILE="xxxxxxx"

$ ./analytics.rb
["/", "MBA-HACK2", "1", "1", "10"]
["/blog/2014/12/28/google-analytics-2014/",
 "Google Analytics API - MBA-HACK2",
 "1",
 "0",
 "4"]
["/blog/2015/01/07/octopress-popular-post/",
 "Octopress Pluginで人気記事を表示する方法 - MBA-HACK2",
 "1",
 "0",
 "3"]
["/blog/2015/07/10/octopress-customize-log/",
 "octopress-customize-log - MBA-HACK2",
 "2",
 "0",
 "3"]
["/blog/2015/07/01/vocaloid-make-music/",
 "vocaloid-make-music - MBA-HACK2",
 "2",
 "0",
 "2"]
["/blog/2015/01/08/hugo-github-pages/",
 "サイトジェネレーターのHUGOを使ってみた - MBA-HACK2",
 "1",
 "1",
 "1"]
["/blog/2015/01/25/coreos-docker-rocket/",
 "Vagrant上のCoreOSでRocketを使う - MBA-HACK2",
 "1",
 "1",
 "1"]
["/blog/2015/06/13/vocaloid-san-music-game/",
 "vocaloid-san-music-game - MBA-HACK2",
 "1",
 "0",
 "1"]
["/blog/archives/", "MBA-HACK2", "1", "0", "1"]
["/blog/page/2/", "MBA-HACK2", "1", "0", "1"]

Gooele Chrome Console

基本的には、Webページを作り上げていく過程でGoogle Chromeのようなブラウザから要素を検証することになると思います。

ここで、例えば、httpsを正常に動作するようにリンクを使う際は、httpではなくhttpsにしておくと良いと思います。

有効になると、Chromeの場合、アドレスバーが緑色になります。

Google Search - Sitelinks Search Box

Googleの検索結果に出てくる検索ボックスを表示したいなあと思い、設定してみました。有名なサイトの場合はGoogleが自動的に設定する場合もあるし、個人サイトでもそれを伝えることによって有効に表示される場合もあります(ただし、伝えても表示されない場合もあります)。head内に入れる感じだと思います。

<head>
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "https://syui.github.io",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://syui.github.io/search/?q={q}",
      "query-input": "required name=q"
    }
  }
</script>
</head>

Google Custom Search

ただし、上記は、サイト内の検索ができなければなりません。

したがって、Googleカスタム検索を設定してみてもよいでしょう。レイアウトは結果のみで、コードを取得し、それを/searchページを作成した上で、貼り付けます。直接貼り付けても良いし、ファイルを用意し、リンクしても良いです。

source/search/index.html

<script>
  (function() {
    var cx = '001002001038849982992:iijfdsia_dfsu';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

ここまで出来たらSitelinks Search Boxの確認。以下のページにアクセスして、WebページのURLを入れて検証しましょう。

ここでOKがでていれば、サイトタイトルでGoogle検索すると、数日後に検索バーが表示されているかもしれませんし、ずっと表示されないままかもしれません。

Google PageSpeed Insights

サイトの速度を測定してみます。こういうのは設計段階で考えないと、面倒くさくなってしまうので、最初はシンプルで最小限なページを作って、機能を追加していく度にチェックしていくのが良いと思われます。例えば、私のブログの値は以下。

モバイル

58 / 100 速度
88 / 100 ユーザーエクスペリエンス

パソコン

69 / 100 提案の概要

表示速度の遅さはあまり実感していなかっただけに、結構ショックなものですね。