広告を掲載したい(3)

「広告を掲載したい(3)」のサムネイル画像
WEBページ制作

WEBページを作成したものの、広告の載せ方がいまいち良くわからない。
そんなシロウトが目標を達成するために試行錯誤する現在進行形の体験記・第3回目。

 前回の記事である「広告を掲載したい(2)」をアップしてから1週間。その間私はGoogle Consoleのモバイルユーザビリティエラーと戦っていましたよ・・・。

 前回の記事では、「必要なページを用意してgoogleにインデックス登録されるのを待つだけ」と書いたのですが、インデックス登録されてからが少し大変でした。

 前回の記事をアップした2日後には必要なページがインデックス登録されたのですが、モバイルユーザビリティについてのエラーが2つ表示されていました。エラー内容を確認すると、「テキストが小さすぎて読めません」と「ビューポートが設定されていません」の2つ。

モバイルユーザビリティのエラーが2つ
モバイルユーザビリティについてのエラーが2つ

 私はHTMLの<head>に<meta>タグでビューポートを設定するのではなく、CSSでメディアクエリを使用してビューポートを設定しているので、googleに「ビューポートが設定されていない」と判断されるということはCSSファイルに問題があるということだと思いました。

CSSでメディアクエリを使用してビューポートを設定
CSSでメディアクエリを使用してビューポートを設定

当サイトの場合はdip解像度が「200px~1023px」と「1024px~」の2つに分けてレスポンシブ対応しており、前者はスマホやタブレット、後者はPCでの表示を見込んで設定しています。

 そこで、それから4日間毎日CSSファイル内の疑わしいと思われる箇所を修正して、夕方に再検証を依頼→次の日の明け方に「修正されていません」というメールがGoogle Consoleから送られてくるというやり取りが続きました。
 朝一番で見るメールが、スマホに届いた「修正されていません」メールだというのは地味にテンションが下がります・・・。

毎朝届く無慈悲なメール
毎朝届く無慈悲なメール・・・

 そして昨日、いよいよCSSファイルの記述におかしな箇所が見つけられなかったため、いっそのこと一から作り替えよう!と思い立ち作業しました。新しいCSSファイルを作成して、念のためにCSSファイルの名前も変えて、内容も前回のCSSファイルのコードをコピペするのではなく、初めからデザインし直す感じでコードを入力しました(ページのHTMLは再利用)。
 そのようにしてページが完成したら、いつものように夕方に再検証を依頼して、今朝届いたメールにはようやく「修正が確認されました」との記載がありました。

修正された旨のメール
やった!とうとうやったよ!

 結局のところ何が原因だったのかはわかりませんが、何度も検証に失敗する場合は、既存のCSSファイルの内容を修正するよりもCSSファイルを一から作成し直すほうが手っ取り早いかもしれません。というか、Google Consoleにはどこがダメなのかを指摘してほしい・・・。

 そんなわけでようやく今回の本題です。
 無事にページがインデックス登録され、エラーも修正したということで、前回の目標「お問い合わせ&プライバシーポリシーのページを準備する」をクリアしました!次のステップへ進みます。

 ここでいよいよ、最終目標「広告を掲載したい」の入口であるGoogle AdSenseに登録申請をします。ということで、今回の目標はコチラ!

~今回の目標~
Google AdSenseの審査を通過する

 まずはGoogle AdSenseのWEBサイト(日本語ページ) にアクセスして、画面右上に表示されている「ご利用開始」ボタンをクリックした先で、必要な事項(サイトアドレス、メールアドレス、名前、住所など)を入力していきます。
 入力が終わったら、「サイトをAdSenseにリンク」という項目が表示されるので、画面に表示されている説明の手順どおりに進めます。
 まずは画面の下部に記載されている「AdSenseコード」をコピーして、自分のサイトの<head>内に貼り付け、それが終わったら画面下部にある「サイトにコードを張り付けました」というチェックボックスにチェックを入れます。
 これでこちらの作業は終了し、Google側でコードの確認が正常に済めば画面が切り替わって、審査に入る旨のメッセージが表示されます。

審査に入る旨のメッセージ
とうとう審査が始まったどー

 審査には2週間ほどかかる場合もあるということで、気長に知らせを待ちたいと思います~。

(ライター:たてめ)