ホーム / Adsense /

【アドセンス】Bloggerで＜head＞の後にコードを貼り付ける「AdSense自動広告」「twitterカード」

2018年10月20日土曜日

Adsense

t f B! P L

ブログをやっていく上で、色々機能の追加をするときに、<head>の後にコードを貼り付けると言う説明をよく見かけます。

htmlに詳しい人なら直ぐに出来てしまうことですが、私のような素人にはさっぱりわかりませんでした。

色々調べて、やっとやり方がわかって、htmlに追加しても何故か変更が保存できないこともありました。

これについては、別の原因があったのですが・・・・

今回は、Bloggerで使いそうな「アドセンス自動広告」と「twitterカード」のやり方を紹介しながら説明していきます。

１．アドセンス自動広告


アドセンスの審査に通ったら、やっておきたいですね。

モバイル全画面広告, アンカー広告などが自動で表示されるようになります。

まず、Google AdSenseで自動広告のコードを取得します。

自動広告の画面で、「自動広告を設定」をクリックします。


すると小窓が開いてコードが表示されます。


このコードをコピーして、<head>の後に貼り付けます。

実際の貼り付け手順ですが、先ずは、テーマの画面で「HTMLの編集」をクリックします。


<head>は直ぐに見つかると思いますので、下のように先ほどコピーしたコードを貼り付けます。



これで完了です。

自動広告が出るまではちょっと間が開くかもしれないので、しばらくしてから確認してみてください。

２．twitterカード


twitterカードは、ブログの記事をツイートしたときに、記事内の写真をツイートに表示するようにする設定です。

画像の他にも、あるようですが、今回は画像に特化して説明していきます。

やり方は、上で背湯瞑したAdSense自動広告と同じです。

コードは下記コードを使いました。

<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@ツイッターID' name='twitter:site'/>
<meta content='@ツイッターID' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <b:else/>
      <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
      <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    </b:if>
    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    <b:else/>
      <meta content='https://デフォルト画像のURL' name='twitter:image'/>
    </b:if>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    </b:if>

<!--END Twitter Card -->

上記コードをメモ帳などに貼り付けて、ツイッターIDやデフォルトの画像のURLを変更してから<head>の下に貼り付けます。

デフォルト画像のURLは、記事に画像が無いときに代替で表示される画像です。

ブログの象徴的な画像を選んでおけば良いと思います。

URLはブログで使いたい画像を右クリックして「画像アドレスをコピー」で取得できます。

青字は画像のサイズです。

現在は'summary'となっていますので、表示は下の通りです。


'summary large image'とすれば、下記のような大きな画像になります。


私の場合は、<head>の下には、AdSense自動広告のコードが貼り付けてあるので、その下に配置してあります。


ここまで出来たら、どんな風になるのか確認です。

「Card validator（twitterの公式サービスです）」のページに行って、URLを貼り付け、「Preview caed」を押せば、twitterでの表示が確認できます。



画像サイズはどちらが良いか迷うところですが、私にもどちらが良いか解りません(^_^;)

好みで選べば良いかと思います。

以上で紹介した二つの他にも、審査に通っていないので使っていませんが、「amazon publisher」も同様の手順で貼り付けできます。 

このブログを検索

QooQ