*/ -->

SEOで重要な要素である、ディスクリプション(description)をBloggerでも各記事ごとに設定することが、いつの間にか可能になっていたのでこのブログでも設定してみました。

ついでに、不完全に対応していたOGP(Open Graph Protocol)とTwitterカードにも対応させてみます。

ディスクリプション(description)とは?

ディスクリプションとは、HTMLのMETAタグにて指定する要素で、そのページ内容の要約や説明文を記述できるものです。

このディスクリプションを正しく記述しておくことで、Googleのクローラや他の検索エンジンのBotに、そのページの内容が理解されやすくなります。

今回は、このディスクリプションを各記事ごとに指定できるように、Bloggerの設定を変更してみます。

メタディスクリプションを有効にする

まず、Bloggerのダッシュボードから設定を変更したいブログを開き、「設定」の「検索設定」を選択します。

一番上の項目に「メタ タグ」という項目があるので、「編集」を選択すると「検索向け説明を有効にしますか?」と聞かれるので、「はい」を選択します。

「はい」を選択するとテキストボックスが表示されるので、ブログ自体の説明を入力してください。

入力が終わったら「変更を保存」をクリックしてください。これで各記事に要約を設定することができるようになります。

各記事に要約を設定する

投稿済みの記事に対して、要約(ディスクリプション)を指定していきます。

「投稿」から要約を指定したい記事を選び、記事の編集画面へ移動します。

右側の「投稿の設定」から「検索向け説明」を選択して、記事の要約を入力して「完了」を選択します。後は「更新」ボタンをクリックしてください。

これで、記事に対して個別に要約を設定することができました。

テンプレートを編集する

比較的新しいテンプレートを使用している場合はこの項目は不要です。

カスタムテンプレートや、古いテンプレートの場合は以下の記述を挿入する必要があります。

<meta name='description' expr:content='data:blog.metaDescription'/>

上のコードをテンプレートのHEAD要素内に挿入してください。この記述がないと各記事に設定した要約が機能しません。

ついでにOGPとTwitterカードにも対応させる

従来は、OGP(Open Graph Protocol)とTwitterカードに対応させる場合にディスクリプションを指定することが難しかったのですが、このアップデートのお陰で完全に対応させることができるようになりました。

このブログではHEAD要素内に以下のように記述しました。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta property='og:type' content='article'/>
  <meta property='og:title' expr:content='data:blog.pageName'/>
  <meta property='og:description' expr:content='data:blog.metaDescription'/>
<b:else/>
  <meta property='og:type' content='blog'/>
  <meta property='og:title' expr:content='data:blog.title'/>
</b:if>
<meta property='fb:admins' content='100001514670317'/>
<meta property='og:url' expr:content='data:blog.url'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta property='og:image' expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url'/>
<b:else/>
  <meta property='og:image' content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYE3nmHIYuY8N4KYlpAnizK59mPlTjpL4pQ-Zzwa1REMFRwHY4yy9yRqvIDgfbo9TCjkA3CgJT31wkROK7DpwG8pqVlIaITvBZnNrKT9Dx0pxcn5TRnnEIUGWyO16s4KSB0wyPq_Gg_Go/s800/%2525E7%252584%2525A1%2525E9%2525A1%25258C.png'/>
</b:if><meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@takibibouroku'/>
<meta name='twitter:creator' content='@takibibouroku'/>
<meta name='twitter:description' expr:content='data:blog.metaDescription'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <meta name='twitter:title' expr:content='data:blog.title'/>
  <meta name='twitter:image' content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYE3nmHIYuY8N4KYlpAnizK59mPlTjpL4pQ-Zzwa1REMFRwHY4yy9yRqvIDgfbo9TCjkA3CgJT31wkROK7DpwG8pqVlIaITvBZnNrKT9Dx0pxcn5TRnnEIUGWyO16s4KSB0wyPq_Gg_Go/s800/%2525E7%252584%2525A1%2525E9%2525A1%25258C.png'/>
<b:else/>
  <b:if cond='data:blog.pageName'>
    <meta name='twitter:title' expr:content='data:blog.pageName'/>
    <meta name='twitter:image' expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url'/>
  <b:else/>
    <meta name='twitter:title' expr:content='data:blog.title'/>
    <meta name='twitter:image' content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYE3nmHIYuY8N4KYlpAnizK59mPlTjpL4pQ-Zzwa1REMFRwHY4yy9yRqvIDgfbo9TCjkA3CgJT31wkROK7DpwG8pqVlIaITvBZnNrKT9Dx0pxcn5TRnnEIUGWyO16s4KSB0wyPq_Gg_Go/s800/%2525E7%252584%2525A1%2525E9%2525A1%25258C.png'/>
  </b:if>
</b:if>

このままでは他のブログでは利用できません。利用する場合は適宜修正を行う必要があります。

おわり

これにて設定は終了となります。なにか不明な点などありましたらコメントにてお願いします。

最後まで読んでいただきありがとうございました。

関連性がある記事

Disqusでコメント