[Blogger] moreタグにアドセンスコードを挿入する方法

このサイトを検索 | Search this site

[Blogger] moreタグにアドセンスコードを挿入する方法

メインブログをBloggerに変更して1年が経過しました。

Awesome Inc. テンプレートをそのまま使用していた頃に比べると、スタイルシートの活用やスクリプトの導入などにより見栄えや使い勝手がよくなりました。

アドセンスで収益を上げることができるかを検証する目的で Gooブログから Blogger へ移行したので、カスタマイズはアドセンスに関係するものが多くなっています。

moreタグをアドセンスコードに置換するスクリプトを設置して以降クリック率が格段に向上したので、Blogger でアドセンスをやってみようと考えている方にお勧めしたい情報です。

この記事は、以下の情報があります。

タイトル変数の調整
タイトルの下にもラベルを表示
ヘッダやウィジェットの余白を調整
クロールエラーを修復
構造化データエラーを修復
robots.txt を修正してGoogleインデックスカバレッジに対応させる
関連記事を表示するスクリプトを設置
more をアドセンスに置換

見た目を改善してアクセシビリティを向上させる

タイトル変数を修正すると、Google などで検索した時に [記事のタイトル：ブログ名] の順序で表示させることができます。

併せて、タイトルの下にラベルを表示すると使い勝手がよくなります。

タイトル変数の調整
タイトルの下にもラベルを表示
ヘッダやウィジェットの余白を調整

タイトル変数の調整

上の画像は [ブログ名：記事のタイトル] の順序で表示されている場合のスナップショットです。

Awesome Inc. テンプレートは <title>[ブログ名：記事のタイトル] </title> の並びになっているので、ブログ名が長い場合は Google などの検索結果にブログ名しか表示されない状態になる可能性があります。

ブログ名が長い場合はタイトル変数を調整することをお勧めします。

Awesome Inc. を開いて <title>～</title> の中に定義されている変数を入れ替えるだけでタイトルを変更することができます。

この並びにすると、Google検索結果が [記事のタイトル：ブログ名] になるので、ユーザーは記事を探しやすくなります。

Bloggerカスタム：<title>～</title>を記事のタイトル、ブログの名前の順に変更する :Scrap 2nd.

タイトルの下にもラベルを表示

Awesome Inc. は投稿記事の最後にラベルが表示されますが、タイトルの下にもラベルを表示させることができます。

通常は本文を読んだらさらにその下までスクロールすることは少ないので、ラベルをタイトルの下に設置するとアクセシビリティを向上させることができます。

Bloggerカスタム：タイトルの下にもラベルを表示できるようにテンプレートを改造する方法 :Scrap 2nd.

ヘッダやウィジェットの余白を調整

当方のブログは 1024×768 のノートPCで閲覧できるように、ブログの横幅やウィジェット間の予約などを調整しています。

Bloggerカスタム：ヘッダ、ウィジェットの余白を調整 :Scrap 2nd.

Google Search Console 対策

Google Search Console には、Awesome Inc. テンプレートに起因するエラー「構造化データエラー」が記録されていました。

エラーを修正すると Google のクローラーに正しい情報を提供できるようになるので、検索結果にいい影響を与えることができる可能性があります。

併せて、Blogger の robots.txt は、/search 以下をクロール拒否する設定になっているので内容を確認しておきましょう。

クロールエラーを修復

Blogger の自動パーマリンクは、記事のタイトルと投稿日から自動的に投稿記事のURLを生成する仕様になっています。

従って、Blogger の自動パーマリンクが有効になっている状態で、ブログを投稿した月とは異なる月に記事を修正した場合やタイトルを変更した時は投稿記事のURLが変わります。

Google Search Console に記録されるクロールエラーは、Blogger の自動パーマリンクに起因するエラーが多数を占めています。

URLが自動的に変更されているためクロールエラーの対象記事を探すのが困難なこともありますが、Blogger の転送機能を利用して新しいURLへ自動的に転送させることができます。

Google Search Console クロールエラーを修復する方法（Bloggerのカスタムリダイレクトの使い方） :Scrap 2nd.

構造化データエラーの修復

Awesome Inc. テンプレートは次の規格を採用しています。

構造化データの規格：schema.org
シンタックス：microformats.org (hentry)

しかしながら、Awesome Inc. テンプレートは Google クローラーが指標としている schema.org が規定するいくつかのフィールド、メタタグが存在しないので Google Search Console では構造化エラーとして記録されています。

Awesome Inc. を修正するとエラーが記録されないようになります。

Bloggerカスタム：Google Search Console 構造化データエラーを修復してみました :Scrap 2nd.

robots.txt を修正してGoogleインデックスカバレッジに対応させる

Blogger に付属する robots.txt は、そのまま利用すると Google Search Console からエラー警告を受けます。

具体的には、/search/label/xxx.html のコンテンツに Googleクローラがアクセスできないと警告されます。

しかしながら、Google クローラーはインデックス処理を実行するのでこの警告はスルーしても問題ありませんが、警告が記録されないように対応することは可能です。

Bloggerカスタム：robots.txt, ads.txt をGoogle検索インデックスカバレッジに対応させる :Scrap 2nd.

Javascript の導入

関連記事を表示するスクリプト、 タグの位置にアドセンスコードを追記するスクリプトを Awesome Inc. テンプレートに設置しました。

more をアドセンスコードに置換

Blogger エディターの  タグを利用しているので、 を記述している場所にアドセンスコードを追加するスクリプトを導入しました。

利用できるアドセンスユニットに制限はありますが、 を利用しているならばこの方法はお勧めできます。

アドセンスのクリック率が劇的に変わります。

検証：Awesome Inc. テンプレート

アドセンスの記事 (Articles about the アドセンス)