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

「サムネイル」あるいは「アイキャッチ」全文表示タイプテンプレートをご利用の方はピンと来ないかもしれません。要約表示タイプの方は気にかけているのではないでしょうか。要約表示、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も「設定するべき」と考えているようですので、少し意識しながら記事を書くと良いのかな、と思います。

KrowNews
2021/12/06 (Mon) 11:48

No title

いつもお世話になっております。KrowNewsです。(https://krownews.jp/)

FC2ブログのRSSフィードについてお聞きしたいことがあります。
FC2ブログのRSSフィードを編集することはできないのでしょうか…?

目的ですが、記事をRSSでGoogleニュース(https://news.google.com/publications/CAAqBwgKMNS8rAsw4cfEAw?hl=ja&gl=JP&ceid=JP%3Aja)の方に送っており、

Googleニュース側でサムネイルを表示させたかったのですが、やり方がわからず、外部に仕事を発注しようとしたのですが、

RSSフィードを編集する必要があるようでした。

しかし、FC2ブログのRSSフィードは編集できないようで、多分諦めるしかないのですが、何かvanillaice (Akira)様にもアドバイスをいただけないかなと思い、投稿させていただきました。m(_ _)m

個人的に、RSSの設定は全文表示にしていて、記事の頭に画像を貼るのも試したのですがダメでして…。

vanillaice (Akira)
vanillaice (Akira)
2021/12/07 (Tue) 19:57

To KrowNewsさん

こんばんは ('0')/

> FC2ブログのRSSフィードを編集することはできないのでしょうか…?〜

結論から言うと難しいと思います。wordpressのようにphpファイルを操作できませんので、もしやるとしたら記事をUPする度にxmlファイルを手書きで作成しなければいけなくなり現実的ではありません。

KrowNewsさんは主に「アイキャッチ画像指定」を利用しており、記事「本文」への画像掲載はしない、という運営をされていると思いますので、以下の記事を参照してFC2ブログアイキャッチ機能を把握してください。

参考記事: FC2ブログ「サムネイル」徹底解析(「知っておくべき「アイキャッチ画像」の重要な特徴」の章)
https://vanillaice000.blog.fc2.com/blog-entry-824.html

RSSで画像配信されているかどうかは、ブログアドレスの末尾に
?xml
を付け加えてアクセスし、各記事の
<content:encoded>
から
</content:encoded>
の間に
<img
の文字列があるかどうかを見てください。含まれていればその画像はRSSで配信されています。見つけられない場合は「記事内掲載なし + アイキャッチ機能」で指定しているということです。一度ご確認くださいね。

KrowNews
2021/12/08 (Wed) 22:41

いつもお世話になっております。

「もしやるとしたら記事をUPする度にxmlファイルを手書きで作成」⇦こちらのやり方教えていただけないでしょうか?
どれだけ手間がかかってもかまわないので、編集する方法があるのであればぜひ知りたいです。m(_ _)m

お忙しいところ恐縮ですが、どうかよろしくお願いいたします。m(_ _)m

ちなみに、以前一部の記事に記事本文頭に画像を貼って試したことがありまして、その時は
<content:encoded>
から
</content:encoded>
の間に
<img
の文字列があったのですが、Googleニュースには結局反映されませんでした。

これは聞いた話なのですが「RSSフィードが編集可能なWordpressでも、仕様が変わったため今のGoogleニュース用にサムネイルを表示させるには色々と工夫が必要です」ということでした。

vanillaice (Akira)
vanillaice (Akira)
2021/12/08 (Wed) 23:40

To KrowNewsさん

こんばんは ('0')/

内容的にテンプレートに関するご質問から逸脱していますので、ご自身で解決をお願いします。以下のページを参照されると良いかもしれません。
https://developers.google.com/search/docs/advanced/sitemaps/news-sitemap?hl=ja&ref_topic=4359874&visit_id=637745692683706979-1495919607&rd=3

その前に、先日お伝えしたようにアイキャッチ機能ではなく記事内掲載を行うのが先だと思います。google newsはOGPもRSSも参照しますが、h1付近の画像を重視するアルゴリズムというのも同時に持っています。
OGPで画像が指定されているとしてもRSSには無い、記事内にも無いという画像を引っ張ってもらうのは難しいのではないでしょうか。
また、xmlファイルをその都度アップロードするとしても記事内に画像が無いのにRSSに含めてしまえばクローキングに値するため私の方からお伝えすることは控えます。
どうされるかはお任せしますね。よろしくお願いします。

-----
あと先日もお伝えしたんですが、新規の記事はp要素のstyle属性を削除した方が良いですよ。恐らく後々困ることになると思います。「もしかして忘れているのかな?」と思ってしているコメントなので、ご承知の上でしたらスルーで構いません ('0')/

KrowNews
2021/12/09 (Thu) 13:33

To vanillaice (Akira)さん

お世話になっております。諸々、承知しました。ありがとうございます。
画像は今後、記事内掲載をするようにします。

style属性の削除についてですが、記事はpagesに書いたのをコピペしており、毎回style属性が自動で入っているのですが、削除するのは、毎回記事ごとにやらないといけないでしょうか?
1日に多くの記事を処理することがあるので、ちょっと大変だなと。

vanillaice (Akira)
vanillaice (Akira)
2021/12/10 (Fri) 13:29

To KrowNewsさん

こんにちは ('0')/

以前書いた記事がありますのでご参照ください。
参考記事: Wordで記事を書くとテンプレートが崩れることがあります
https://vanillaice000.blog.fc2.com/blog-entry-906.html

「wordで」としていますがmacにおいては「pages」が該当です。この内容に納得が行けば対処、行かなければそのままの方針で良いと思います。
フォントについては「第三者の操作は不適切」という人も居て、そういう方は「自分で(主にブラウザに)指定したフォントで見たい」という意向でしょうから、それもアリなのかな、と思います。
ただ以下のような形になることもあります。
参考記事: 注意喚起 Mac最新OS Catalinaはヒラギノ角ゴPro/ProNが未搭載に
https://vanillaice000.blog.fc2.com/blog-entry-963.html

chromeでsans-serifフォント指定を「していない」という方は非常に多いです。なので明朝体になっている可能性はありますね。
フォントについては個人の感覚に左右されるので結論が出しにくいかもしれません。
ただサイズについては「11px」はweb上ではナシだろうな、と思います。今回修正のためにスタイルシート側で
.p1{font-size: 数値px !important;}
と最優先指定をしましたよね。これは今後テンプレートを変更する度に必ず移設しなければいけない内容です。で、ブラウザの作業としては

ブラウザデフォルト 16px

style属性により 11px に変更

スタイルシートによるサイズに変更

ということをやっています。本来であれば

ブラウザデフォルト 16px

スタイルシートによるサイズに変更

というフローで済みます。p要素の数だけそれを繰り返します。以前のものは致し方ないとしても、新しい記事でその作業をする必要はない(もう11pxを打ち消すことが明白になっている)わけですから、無駄ですよね (∵`)
「合理的なレンダリング」を重視するならばpagesの利用をやめる、「個人の作業効率」を重視するならばpagesを利用、という感じでしょうか。
KrowNewsさんの場合特に装飾などしておられないのでFC2エディターにベタ打ちで十分ではないかと思いますが、保存や記録や作業時間帯及びツールなど環境によって一概には言えないので、ご自身の判断にお任せします。

-
2021/12/10 (Fri) 16:37

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/12/11 (Sat) 16:40

To 内緒さん

了解です。お疲れ様でした :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)