ここでは、ミニサイトに関連する、外部サイトの設定などを行っていきます。アクセス解析や広告などの設定を行っていきます。

アクセス解析の設定をしよう

ミニサイトは公開するだけではなくて、ちゃんと読まれているか確認したいですね。そこで、アクセス解析の設定をしましょう。ここでは、Google アナリティクスを使うことにします。

Google アナリティクスにログインし、「管理」から「プロパティ」を追加し、サイトの登録をしましょう。この時点で、サイトのURLを決めておきましょう。URLについては、ミニサイトを公開しよう も参考にしてみてください。

URL は後で変えることもできますが、いつかは決めないといけないことなので、考えておきましょう。

Google アナリティクスにサイトを登録したら、トラッキングコードが表示されます。これをheadタグ内に貼り付けます。HTML のテンプレートファイルに貼り付けておきましょう。自分のIPアドレスを除外しておくことも忘れずにしておきましょう。

また、Google Search Consoleにも登録しておきましょう。検索ワードによる表示順位などを確認できるようになります。

広告の設定をしよう

ミニサイトには広告も貼り付けておきたいですね。少額かもしれませんがお小遣いを狙うことができます。

Google AdSenseにログインしましょう。自動広告だと作業が楽です。すでに自動広告を使っているなら、AdSense のコードを取得します。これもheadタグ内に貼ります。すぐに広告が表示されるわけではないので、気長に待ちましょう。

他に、アフィリエイト広告を貼り付けたいなら、サイトの登録や広告の取得を行っておきましょう。サイトを登録するまで広告が貼れない場合は、どのページに何の広告を張るか、まとめておきましょう。

デザインに利用できるものを使おう

ミニサイトの各ページのデザインをするために、いくつかの便利サービスがあります。

一つ目は、必要なアイコンが使えるFont Awesomeです。見出しやボタンなど、いろんなところで使えるアイコンがたくさんあって便利です。少し前から、登録しないと使えなくなったんですけども。headタグ内にリンクを追加すれば使い始められるので、使うのも簡単です。

二つ目は、webフォントが使えるGoogle Fontsです。日本語が使えるフォントもいくつかあり、Noto Sans JP はよく見かける気がします。これもheadタグ内にリンクを追加すれば、CSS ファイル内で設定できるようになります。

三つめは、ちょっと種類が違いますが、Bootstrapです。タグにクラスを設定したりすると、いい感じにデザインしてくれるフレームワークです。ただ、使い方はなかなか難しいです。

他にも、いろいろあると思います。デザイン面でレベルアップができるように、いろんなサービスを試してみましょう。

シェアボタンの設定をしよう

各ページには、シェアボタンをつけておいた方がいいでしょう。ここでは、代表的なシェアボタンの設定を見ていきます。

一つ目はTwitterです。公式サイトを見ながらやると、次のように設定すればいいことがわかります。

<a href="https://twitter.com/intent/tweet?url={URL}">
  ツイート
</a>

{URL}には、エンコードしたURLを入れます。テキストなども設定できます。

二つ目ははてなブックマークです。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}">
  はてぶ
</a>

これで、ボタンを押すと、ブクマするかどうかの確認画面が表示されるようになります。

最後は、Facebookです。

<a href="https://www.facebook.com/sharer.php?u={URL}">
  フェイスブック
</a>

これで、ボタンを押すとシェア画面が表示されるようになります。

テンプレートをもとに個別ページを作る際は、{URL}の部分を実際のURLで置き換えましょう。

OGPの設定をしよう

OGP の設定もしておきましょう。必須項目ではないですが、きちんと設定しておけば、ツイッターやフェイスブックでシェアされたときに、サイトの情報が正しく反映されます。

<meta property="og:url" content="ページのURL" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="fb:app_id" content="appIDを入力" />

これらをheadタグ内に追加します。全部を追加する必要はありませんが、拡散を考えているなら追加しておいた方がいいでしょう。最後のfb:app_idはサイトをフェイスブックに登録していないなら書く必要はありません。

ちなみに、当サイトの例を書くと、今読んでいるこのページでは次のように設定しています。

<meta property="og:url" content="https://minisite.nakaken88.com/work/outsource/" />
<meta property="og:type" content="article">
<meta property="og:title" content="外部サイトの設定をしよう" />
<meta property="og:description" content="ミニサイトに対して、アクセス解析・ウェブフォント・広告などの外部サイトの設定を行います。" />
<meta property="og:image" content="https://minisite.nakaken88.com/img/img-outsource.png" />
<meta property="og:site_name" content="なかけんのミニサイト講座" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@nakaken88888888" />

サイトの内容に合わせて設定してください。

そのほかの設定について

正直、これ以外に設定することはほとんどありません。他に設定するとすれば、メタディスクリプション（Googleの検索ページに載る「ページ概要」）やロボットの設定（特定のページをロボットが巡回するのを防ぐ設定など）などがあります。これらはなくても何とかなるでしょう。

また、外部サイトの設定ではないですが、metaタグに設定するものとして、サイトアイコンの設定などもあります。余裕があれば設定しましょう。

IEに対応したい場合は、他にも追加の設定や CSS の見直しなどが必要となります。個人的には、IEは無視していますが。

まとめ

主な外部サイトの設定をまとめておきます。

ちなみに、当サイトでは、Bootstrap は使ってないし、meta robots の設定はしていませんが、他の設定はすべて行っています。

おわりに

ここでは、外部サイトに関する設定などを見てきました。headタグ内に追加するものがほとんどでしたね。サイトのデザインに影響のない設定もあるので、ついつい忘れてしまいがちな設定ですが、はじめにやっておかないと修正箇所が多くなってしまうので、あらかじめ考えておきましょう。

記事を書いていこう からは、各ページの中身を書いて、ミニサイトを完成させていく段階です。完成向けて頑張っていきましょう。