三十路だけど公務員辞めてきた。

30歳にして市役所を退職した元公務員のブログ。主に役所の裏側や退職について。

Googleアドセンス審査突破の道③ ~グローバルナビゲーションの作り方~

グローバルナビゲーションとは

f:id:London-airp:20181107164031j:plain


ブログやホームページのヘッダかその付近に付いているメニューバーのことです。
下の2枚の画像におけるヘッダー部分の黒い帯のような部分です。
f:id:London-airp:20180910201132p:plain:w500

f:id:London-airp:20180910201141p:plain:h300

グローバルナビゲーションはプライバシーポリシーと違い、グーグルアドセンスの審査において必須という訳ではありません。

しかし利用者にとって有益なサイトである程グーグルからの評価は高くなりやすいため、存在するに越したことはありません。

私は「お問い合わせフォーム」や審査に必要な「プライバシーポリシー」のリンク先がすぐに目に付きやすくするために、グローバルナビゲーションを設置しました。

他のブログを見ると、ブログ内の細かい分類記事のリンク先として利用している方も多いです。

とりあえず審査に通ったときは設置していたため、その方法を説明します。

グローバルナビゲーション(メニューバー)設置の仕方

今回、下記のブログに掲載されていたコードをコピペさせて頂きました。
http://www.yukihy.com/entry/scroll-menu#メニューの横幅縦幅の変更:embed:cite:w500

このメニューバーは、画面の横幅が狭くなると足りない部分を横スクロールして出してくれます
つまりPCで見てもスマホで見ても、スッキリした同じデザインのメニューバーが現れます。


これとは別にスマホ用サイトでよく見るメニューバーとしては、トグルメニューあるいはハンバーガーリスト(またはメニュー)と呼ばれる種類があります。

トップページのだいたい右上にあるハンバーガーのようなボタン 🉁 を押すと、隠れていたメニューがスッと出てくる種類のものです。

ハンバーガーリストの方が一般的に思われるかも知れませんが、私は横スクロールするメニューバーをコピらせて頂きました。
 
一見オシャレに見えるハンバーガーリストですが、ボタンが小さくて設置位置によっては見落とされがちになるという欠点もあります。


またグーグルの検索エンジンにおいても、PCから見たサイトとスマホから見たサイトの見た目が一致した方が有利らしいです

コードコピー

「デザイン」⇒「詳細(スパナマーク)」⇒「ヘッダ」⇒「タイトル下(”HTMLを記述できます”と書かれている部位)」にリンク先のコードを貼り付けます。
f:id:London-airp:20180910204955p:plain:w600


すると黒いメニューバーが現れます
f:id:London-airp:20180910205728p:plain:w600


続いてスパナマークからスマホマークを押して、スマホ表示の設定を出します
f:id:London-airp:20180910210009p:plain:w600

ここで「設定」ボタンを押してレスポンシブデザインにチェック付けをし、PCとスマホの表示を同じくすることも出来ます。

レスポンシブデザインとは、PCやスマホ、タブレットといった異なるサイズの画面において、最適化して表示してくれる機能のことです。

簡単に言うと、どの種類の端末から見ても同じようなデザインになります。ということは見た目が一致するためSEO的にも有利です。
f:id:London-airp:20180910210324p:plain
 
あくまでスマホ表示は別にするなら、「ヘッダ」を押すと出てくる「PCと同じHTMLを表示する」にチェックを付けると、それだけでスマホ版にも黒い帯状のメニューバーが現れます。
f:id:London-airp:20180910210055p:plain:w600

リンク先の編集とアドレスの挿入

カテゴリ1、カテゴリ2、…とリンク先が用意されているので、お好みのタイトルに編集しましょう。

リンク先のUrlは左側の" "の間に挿入します。

私は「TOP」、「プロフィール」、「お問い合わせフォーム」、「プライバシーポリシー」のリンク先を用意しました。

おススメの記事や渾身の出来の記事があるならば、イチオシ記事としてリンクを置いてもいいでしょう。

私は「プロフィール」として自己紹介記事を割り当てています。
www.taishoku-koumuin.com

※以前は、プロフィールの登録者名から跳べる「about me」を自己紹介記事の代わりにしていました。

aboutページの編集は、「設定」⇒「基本設定」の上から5段目にあるaboutページ編集より行ってください。
f:id:London-airp:20180910212032p:plain:w600

まとめ

まだリンク先が少ないためメニューバーがスクロールする機能は往かせていませんが、今後は記事数を増してリンク先もバンバン貼り付けようと思います。

「Googleアドセンス審査突破の道」と銘打っておきながら、必須項目が第2回で紹介したプライバシーポリシーのみで、後の2つ(「お問い合わせフォーム」、「グローバルナビゲーション」設置)はオマケみたいな内容でした。

それだけ審査基準が非公開のため曖昧なのですが、逆に言うと数少ない必須事項を守り、禁則(エロ、グロ、インモラルなど)を侵さなければ十分に審査は通過できるということです。

<関連記事>
www.taishoku-koumuin.com

www.taishoku-koumuin.com

※このサイトもナビゲーションメニューの基本が分かりやすく載っています。
lab.sonicmoov.com

<続き>
www.taishoku-koumuin.com