これからはサムネイル設定必須の時代

これからはサムネイル設定必須の時代

webのあれこれ
2017/08/31 0
vanillaice (Akira)
vanillaice (Akira)
Education SEO OGP

「サムネイル」あるいは「アイキャッチ」
全文表示タイプテンプレートをご利用の方はピンと来ないかもしれません。
要約表示タイプの方は気にかけているのではないでしょうか。
要約表示、web一般表現だと
カード系レイアウト, リスト系レイアウト
でしょうかね。
こういうの ↓

Empty-street
Empty-street
Out-of-style
Out-of-style

このタイプのテンプレートのトップページというのは言ってみれば サムネイル必須 なわけですが

テンプレートの表示形態に関わらず、今後はサムネイル設定必須と思った方が良い

という記事でございま (o'ω')ノ
本記事では「サムネイル」という呼び方に統一します。

構造化データマークアップ必須項目 「imageフィールドの値」

構造化データマークアップ というのが最近話題になっていますが、検索エンジンに対しより明確にページ構成を伝えることで情報取得や解釈の効率化を目指す、というものです。

これを導入したからといって検索順位が上がるというわけではありません。
Googleあるある「直接的に関係はないが間接的にはあるかもね」です。
仕様がまだ安定していない面もあり、色々な変更が知らぬ間に加えられていることもしばしば。
もともとAMPでは必須でしたが、必須でなくなっていたり(最近気づいた)
設定必須項目が増えていたり減っていたり。まぁ色々。

現状で必須となっている項目に
imageフィールド
というのがあるのですが、これはいわゆる サムネイル のことです。
Googleが必須にしているということは 必要だから入れろ ってことよね (´・ω・`)
で、私が制作したテンプレでこの構造化マークアップを導入しているものについては、記事内に画像が一枚も無い場合には代替画像を入れています。
でないとテストに合格しません。

やはり 全文表示タイプテンプレ 利用者の方は、「記事を書いたらサムネイル用に一つ画像を入れておく」という意識を持った方が良いのかもしれません。
全文タイプだとどうしても蔑ろにしてしまいがちです。
FC2ブログに限定すると、

  • 全文表示タイプのテンプレート使用
  • 関連記事リストは文章のみ(サムネイルなし)
  • 公式プラグイン「最新記事(サムネイル付き)」を導入していない

このコンボの方はサムネイル導入なし、というパターンが多いです。

進化するRSSサービス

海外だと Bloglovin' (ブログラヴィン) というサービスがトレンドです。

Bloglovin' アイコン

RSSフィードの新しいカタチというんでしょうかね。
なんというかまぁ、シャレオツなサービスでございます。
日本ではいまいちキてない(いつものことだけど)
海外トレンドの3年後ろを歩くのが日本。
気に入ったブログを登録(Follow)し、更新情報を受取るためのサービスです。
そしてフォローサイトをピンボード形式で見ることができます。

ピンボード形式の画面

メイソンリーレイアウトですね。とってもオサレで見やすいです。
何がオサレ感を出しているかというと、やっぱり サムネイル なんですよね。
写真がひとつもなかったら味気ないですし、メイソンリーの場合は写真が無いとイマイチ印象に残りません。
一番最初に目が行くのはやはり写真です。それに最近の若い子は文章よりもサムネイルを見て直感に従ってクリックする人が多いです。
で、先程チョロっと書きましたが、RSSの特徴は
「更新情報を受け取ってもRSSで見るだけでサイトに赴かない」
という方が出て来ることなんですよね。
「うちの仕組みはそんなじゃないよ!」
というのがBloglovin' のウリでもあるんです。

こういう系サービスの仕組みで関わりがあるのは

  • RSS
  • OGP

の2つです。
ここからはFC2ブログの仕様と絡めた説明です。

FC2ブログのRSS配信の仕様

ブログの設定 > 記事の設定 [RSSの設定]

全文要約 とが選べるようになっています。

全文 --- 本文内容全て 追記は対象外
要約 --- 本文内から最大200文字

こういった違いがありますが、全文表示をおすすめします。
理由は サムネイルの取得 です(後述)

RSSを全文にする理由を
「全文にしておかないとわざわざサイトまで続きを読みに行かなければいけなくなるから。」
とする方もいらっしゃいますが、個人的にはそうは思いません (´・ω・`)
是非サイトまでお邪魔して読んであげてください(笑)
私の思うRSSの便利さはそこじゃなくて。
更新情報を受け取れる というところだと思います。
読みたい記事は元サイトまで出向いて読む、というのは当たり前というか基本。
そういう意味でも バイラルとかはクソ だと思ふ。
どのみちFC2ブログの場合は「全文」を選んでも追記は配信されません。

RSSのサムネイル取得の仕様

FC2は関係ありません。web一般の「RSS」なので独自の仕様です。
RSSパース系サービスの画像抽出条件は大抵の場合以下の通り。

  • 本文最初の画像が対象(FC2ブログは追記が配信されないため)
  • 外部直リンクも 対象
  • FC2エディター内絵文字も 対象

次章の「FC2サムネイル」の抽出条件とは異なりますので、ここは押さえておかなければいけません。
RSSは他者に登録してもらう性質ですので、通常自分で見ることはあまりありませんが、RSSから情報を取得して表示するプラグインはたくさんあります。
有名どころだと Linkwithin, 複眼RSS など。
これらは先にご紹介したBloglovin' と同じく RSSのパース (書き出し, 描画) を行うサービスです。

FC2ブログ個人設定を「全文」にしておきましょう、というのは、
例え画像が本文に含まれているとしてもそれが200文字以降だった場合には取得してもらえません。
それ故の「全文」です。

また、FC2ブログ内で表示されるサムネイルと、同じ記事のRSSパースプラグインで表示される画像が違う というお問い合わせが以前多くありましたが、これは それぞれの画像抽出条件が異なるから です。

FC2ブログのサムネイルの仕様

以下のような条件があります。

  • 本文 に掲載されている一番最初の画像(追記内の画像は対象外)
  • 外部直リンクは対象外
  • FC2エディターツール内のモバイル機種絵文字は対象外

本文にある画像で、かつ一番最初のもののみが対象となります。
1枚しか無い場合にはそれが対象。
画像が無い場合には サムネイル無し

外部直リンク無効は当然ですね。ここについて文句のある方もいらっしゃるようですが。
外部サーバーにある画像をFC2運営が所有者確認することはできません。
著作権の問題もありますのでこれは健全な仕様です。

エディターの機種絵文字というのはこういうの ↓



これらは対象外です。
自分でFC2サーバーにアップロードした絵文字については対象になります。
モバイル機種絵文字 = 対象外なのではなく
//static.fc2.com
の文字列を持つURLをはじいてます。

FC2ブログのサムネイル基本仕様 +α「アイキャッチ画像」機能

サムネイル対策用機能とでも言えば良いのでしょうか。
「記事内に画像を載せたくないけれど、サムネイル用の画像だけは用意しておきたい」
という場合に使える新機能(つっても導入されてだいぶ経つ)

これは結局さ、OGP向け に追加してくれたんだと思いますね (´・ω・`)
シェア対策というか。
使いどころは

  • 本文内に画像添付はしたくない。でも シェアされた時には画像が有った方が人目を惹く など
  • 本文内に画像は複数あるものの、「一番最初の画像」では都合が悪い

こんな感じでしょうか。
例えば同じカテゴリの記事は全て同じサムネイルで揃える、だとか。
そういったことも可能になりました。

OGPのサムネイル取得仕様

OGP というのはシェア時に文章だけでなく画像も抽出してくれますが、こちらにはこちら独自の仕様があります。
基本的にFC2ブログ側の都合は無関係な全web共通仕様ですが、FC2の本文・追記の特徴やサムネイルの特徴は踏まえておく必要があります。
web全般は「全般」FC2の仕様と絡む結果は「FC2」と記しておきます。

  • 絶対パス が必須条件 --- 全般
  • FC2サムネイル取得条件に準ず --- FC2
  • 条件に合致する画像が無い場合には プロフィール画像を選出, プロフィール画像未設定の場合には 画像無し --- FC2

OGPをテンプレートに自分で記載している、という方については上記と同じようにはなりません。
上記はFC2ブログ個人設定でOGPを有効にしている場合です。
有効化するとFC2がテンプレートのhead情報内にmetaタグを追加してくれますが、その際には上記のような仕様となります。
基本的にはFC2サムネイルの条件と同じですが、OGPの条件「絶対パス」とFC2の仕様「画像なし = プロフ画像 = プロフ画像設定なしの場合は何もなし」が追加されます。

それぞれ異なる仕様を上手に使う

統一するも、敢えて統一せずにおくのも自由ですが、理解しておくことで「問題だ」と感じた時に対処できます。
わかってなければ対処できない。当たり前だが (´・ω・`)
整理して表にしておきます。

2017.8.31現在

FC2サムネイル
(関連記事, 最新記事含む)
RSS OGP
取得対象範囲 本文(一番最初の画像) 同左 同左
FC2エディター絵文字 対象外 対象 対象外
外部直リンク 無効 有効 無効
アイキャッチ機能 有効 無効 有効
相対パス(*1) 有効
アイキャッチ指定画像に自動切り替え
絶対パス(http)に書き換え
有効 有効
FC2側で絶対パスに書き換えて有効化
httpsスキーム(*2) 有効
アイキャッチ指定画像に自動切り替え
出力時はhttpsのまま
有効 有効
出力時はFC2側でhttpに変更

(*1)と(*2)は暫定的な内容かもしれません。

(*1) 画像アドレスを相対(スキーム省略)で掲載した場合

//blog-imgs-***.fc2.com/*/*/*/固有ID/ファイル名.jpg

こういう書き方をした場合ですね。
もしかしたら前提処理かもしれません。
FC2ブログのSSL化へ向けて仕様の変更がちょこまかと入っており、現在ではこれで落ち着いているようですが、SSL化後も同じかどうかは不明です。
変更が生じた場合には記事内容を修正することになると思います。

以前はスキームを省略することでサムネイル対象外となりましたが、現在では
アイキャッチ指定画像としての掲載に自動で切り替わります

↓↓↓

こうして「アイキャッチ画像」のところへ自動で追加されます。
これ投稿前にはわからないのですが、投稿後に編集画面を開くことで確認できます。
記事内にも画像があり、アイキャッチ画像として同じ画像が設定されている、という状態です。
画像を変更したい場合にはアイキャッチ画像「削除」をクリックしないと解除されませんので注意。

OGPはどうなるかというと、http: を追加して出力しています。
OGPはスキーム省略不可ですのでこういった処理になってる。

FC2ブログのSSL化を踏まえ、スキームを省略してアドレスを記載している方もいらっしゃると思いますが、こういう仕様になっていますので注意。
ただ、RSSはアイキャッチ画像が配信されませんが、このパターンでは記事内にも画像がありますので配信OKである、と。そゆことですね (´・ω・`)

(*2) 画像アドレスをhttpsスキームで掲載した場合

こちらも暫定的かなぁ、と思います。
FC2ブログの画像アドレスは全ユーザー共通で http ですが(2017.8.31現在)、やはりSSL化を踏まえて既に https で記載している方もいらっしゃるかもしれない。
FC2ブログの画像サーバーはhttp, https どちらのプロゥトコルでも情報取得ができるようになってますので、画像が表示されないといったことは起こりませんが、あくまでも正しいアドレスは現状だと http の方です。

このパターンも前章と同じく、アイキャッチ画像として自動設定されます。
そしてOGPはどうなるかというと、記載した https が破棄されて http に変更された上で出力。

まとめ

先に掲載したBloglovin' のようなサービスは今後増えていく可能性が高いですね。
仮にサムネイルを全く意識せずそのまま続けていきますと、こんな感じになります ↓

全部プロフィール画像、みたいな (´・ω・`)
Bloglovin' の仕様というのは 基本はRSS、OGPも参照 という組み合わせですのでこうなります。
プロフィール画像未設定の方は 画像なし、テキストのみ ってことになるのかな。たぶん。
そういうサンプルを見たことが無いので不明ですけれど。
あと、基本はRSSに則しているので、絵文字の使い方 を考えないとボードが絵文字だらけになります(笑)
(本文最初の画像が絵文字の場合(FC2エディター云々は考慮されません))
しかも拡大されますのですごくきちゃない。
そんなだとフォロー辞めたくなる ^^;

各記事にサムネイル画像が付いている方がとっつきやすいというのもありますし、Googleも「設定するべき」と考えているようですので、少し意識しながら記事を書くと良いのかな、と思います。

 0

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

webのあれこれ