FC2 ブログに記事構造化データを自動的に附与させる方法(平成29年 9月 7日 更新)

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有
  • 平成29年 9月 7日、FC2 ブログテンプレート変数に新たな値が追加された事に伴い、一部変更しました。

FC2 ブログのテンプレート変数を活用して、検索結果に有利に働く記事の構造化データを埋め込む方法です。



概要

グーグルが採用している構造化データの中には、ウェブログでも使える記事の構造化データ(Article)があります。

ウェブログの記事に構造化データを与えておく事で、検索される際に特別なカルーセルにて記事が案内される可能性が生じます。

このカルーセルは非常に目立つため、通常の検索に較べてクリック/タップされ易くなります。

FC2 ブログの場合、投稿時に使えるタグに制約はないため、投稿時にいちいち構造化データを記述したタグを埋め込む事でも実現は可能です。

でも、どうせなら記事の投稿に合わせて自動生成出来るようにした方が良いでしょう。

FC2 ブログではカスタマイズ用のテンプレート変数がいろいろ用意されており、これを利用する事で記事に関する構造化データを自動的に附与する事が可能になります。


注意すべき事


FC2 ブログの仕様に依る制約

FC2 ブログの場合、記事の日時などのデータは個々の記事に対してのみテンプレート変数で得られます。

ですから、個々の記事に対してのみ記事構造化データが有効になります。


記事で用いられている画像について

グーグルが記事の構造化データを取扱うには、記事で用いられている画像を構造化データで指定する必要があります。

  • 画像がない場合には代替画像を用意すれば良いようです。

FC2 ブログでは、記事内にある画像をサムネイルとして使用する機能が導入されております。

幸いな事に、テンプレート変数にもサムネイルとして用いられる画像の URL を与える<%topentry_image_url>変数が導入されており、これを利用する事で構造化データに画像への URL を与える事が出来ます。


画像に関する問題点

ですが、残念な事に平成29年 7月30日現在サムネイル画像の縦横の解像度を与えるテンプレート変数は未導入となっております

このため、当分の間はサムネイル代替画像の解像度を与える事とします。


代替画像と異なる解像度の画像では?

そうすると、記事内に画像がある場合に指定した解像度と異なってしまう事がありますが、

  • 記事で用いる画像の縦横の解像度を統一する
  • 画像を用いる場合は、サムネイル代替画像と同じ解像度の画像を別にアップロードしてそれをアイキャッチ画像として指定する

のいずれかの策を取ると良いでしょう。


実際の画像が構造化データで与えられた解像度と異なる場合は?

尚、上記のいずれの策も執らなかった場合、記事に依っては構造化データで指定したサムネイル代替画像の解像度と異なった解像度の画像が用いられる事となります。

構造化データで指定した画像解像度が実際のものと異なった場合、どのような不利益がもたらされるかは実のところ全く分かりません。

ただ、不正な構造化データに関するペナルティは今のところ当該データを無効にされるだけのようですので、それ程心配しなくても良いかも知れません。

  • 構造化データには検索順位を引上げる効果はありません。

一番いい方法は、FC2 さんにサムネイル画像の縦横の解像度を与えるテンプレート変数を設定していただく事ですがねえ…。


記事に自動的に構造化データを仕込むには


予めやっておく事


サムネイル代替画像の指定

グーグルでは、ウェブログ記事に関する構造化データには記事に関する画像が必要になります。

ただ、常に画像が記事に埋め込まれる訳ではないので、代替となる画像を予め設定しておく必要があります。


バナーのアップロード

グーグルでは、ウェブログ記事については発行者(個人のウェブブログなら著者と同義)のバナーも必須となります。

FC2 ブログのアップロード機能を用いてバナーを予めアップロードしておきましょう。


構造化データのテンプレート (平成29年 9月 7日 更新)

  • 平成29年 9月 7日、新変数追加に伴い一部変更しました。

以下のコードを必要に応じてカスタマイズし、お使いの

  • PC 用テンプレート
  • スマートフォン用テンプレート

内にある <!--topentry--> の直後にそれぞれ貼り付けてください。

【…】の箇所は、カッコ内に書かれているものに書き直します。

かなりいい加減な内容なので、構造化データについて知識をお持ちの方はより正しいものに修正すると良いでしょう。

<!--permanent_area-->
<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage" : {
            "@type":"WebPage",
            "identifier": "<%url>blog-entry-<%pno>.html",
            "url": "<%url>blog-entry-<%pno>.html"
            },
        "name": "<%blog_name>",
        "headline": "<%sub_title>",
        "image": {
            "@context": "http://schema.org",
            "@type": "ImageObject",
            "url": "<%topentry_image_url>",
            "width": "【画像の横解像度】",
            "height": "【画像の縦解像度】"
            },
        "publisher": {
            "@context": "http://schema.org",
            "@type": "Organization",
            "name": "<%blog_name>",
            "url": "<%url>",
            "logo": {
                "@context": "http://schema.org",
                "@type": "ImageObject",
                "url": "【バナーへのURL】",
                "width": "【バナーの横解像度】",
                "height": "【バナーの縦解像度】"
                }
            },
        "author": {
            "@context": "http://schema.org",
            "@type": "Person",
            "name ": "【著者名】"
            },
        "datePublished": "<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00",
        "dateModified": "<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day>T<%topentry_modified_hour>:<%topentry_modified_minute>:<%topentry_modified_second>+09:00"
        }
    </script>
<!--/permanent_area-->


解説
画像の横解像度
画像の縦解像度

代替画像の縦解像度と横解像度を整数で与えます。

本来、記事で用いられる画像の解像度はまちまちとなるのですが、使用される画像の解像度を与えるテンプレート変数はまだ制定されていないため、当面このようにします。

この構造化データは JSON-LD を用いております。

フィーチャフォンには<script>要素のタグだけを取払うため、内容が丸見えになってしまいます(詳細)。

でも、このコードはテンプレートに貼るため、フィーチャフォン向けテンプレートにさえ貼らなければ問題はありません。


最後に免責事項と独白を

ここで解説したテンプレートを実際に用いた結果については、一切補償致しません。

くれぐれも自己責任でお願い致します。


それにしても、FC2 ブログは自由度が高いためこんな事まで出来てしまうのですねえ。

糞ダメブロなんかカスタマイズさえさせてくれませんからねえ…。

関連記事
スポンサーサイト