
ここで言う『ブログカード』は弊ブログが提供しているものに限定します。

ブログカード作成ブックマークレットをアップデートしました
FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...
ブログカードの表示形式に注目
まず、ブログカードと一口に言っても色々ありますね。代表的なものは はてなブログカード, Embedly など。これらのたいていは iframe と呼ばれる形式で表示されます。
iframe要素 はhtmlの一要素で、滞在中とは異なるページあるいはサイトの内容を滞在中ページへ表示させる、というものです。ブログカードの場合、表示したい第三ページの内容をJavaScriptでもってその都度取得しに行く必要があります。
一方、弊ブログ提供のブログカードは JSやiframeを利用しない 素のhtml で表示させます。事前にその内容を取得するためにブックマークレットと連携するわけですね。
* iframeもhtml要素なのでこの表現は正しくありませんが本記事では便宜上これで進めます。
iframeの場合はページを開いた都度外部に情報を取りに行きますのでパフォーマンスで劣りますが、対象ページの内容が変更された際にはそれが反映されます。また、iframeのデザインカスタマイズは非常に困難(というかできない)です。
素のhtmlの場合はパフォーマンスで利がありますが、対象ページの内容が変更されても反映されることなく古い情報のまま表示されます。デザインカスタマイズは容易に行えます。
ブログカードとOGPの関係
ブログカードは OGP と密接に結びついています。言い換えると「OGPを表示させるのがブログカード」です。
OGPについての説明は以下の記事を参照のこと。
OGP設定は大事です OGP (Opne Graph Protocol, オープン グラフ プロゥトコル) というのが何物であってどんな役割か、という説明です。結論から簡単に言うと SNSシェアを重要視する場合にはOGP設定が必須 です。...
OGP情報というのは記事を代表するものの集まりです。
- 記事のリンク
- 記事のタイトル
- 記事の代表画像
- 記事の文章(概要)
これらがその記事を端的に物語るものとなるので非常に重要な情報です。
* OGP情報は他にもありますが特に重要なもののみ上げています。
FC2ブログでのOGP情報
各OGP情報がどのように選出されるか、なんですが、FC2ブログでは「個々の記事に対し自由にOGPを指定する機能」というのはありません。この機能があるサービスの方がむしろ少ない。Shopify なんかはできるかと思いますがこちらはブログサービスではないので比較には向きませんね ^^;
FC2ブログでは以下のルールで自動選出されます。
- リンク
og:url - 記事投稿時に自動付与
- タイトル
og:title - 記事に付けたタイトル
- 画像
og:image - 『本文』に掲載された最初の画像
(但し外部直リンク画像は対象外)
または
アイキャッチ画像指定を行った画像(優先) - 文章
og:description - 『本文』に掲載された文章の最大200文字まで
このルールは 要約タイプテンプレートのトップページ掲載内容と同じ です。全く同じ (´・ω・`)
FC2ブログでこのルールを突破することはできませんので、この厳格ルールをしっかり理解した上で各ユーザーが賢く記事を構成する必要があります。
そしてもう一つ iframe内の内容はOGPまたは要約内容として取得されない という重要な事実があります。そもそもiframeというのは第三ページ・別ページの表示なのであって、表示中ページ・表示中記事に直接属してはいないのですからOGPやトップ要約に選ばれては都合の悪いものです。
弊ブログカードは素のhtmlでiframeではありませんので、OGP, 要約トップの対象になります。ですから、本文の200文字以内にブログカードが掲載された場合にはその「文章内容」がそのまま使われてしまいます。仮にそのブログカードが自身のサイトの別ページであれば「画像」もそのまま選出対象です(外部画像は対象外)
以下がサンプルです。
記事の書き出しがいきなりブログカード、このサンプルは自身のブログの別ページではなく、完全にドメインの異なるページを引用表示させてあります(Google Japanブログを利用させて頂きます)
この記事を投稿し、さらにこの記事をブログカードとして取得すると以下の状態です。
サムネイル画像についてはgoogleブログは完全に第三者のものですからOGP対象とはなりません。同じドメイン(FC2サーバー内画像)も掲載されていませんので、個人設定で指定したデフォルト画像(この場合は私のプロフィール画像)が表示されています。文章はgoogleブログからの引用文がそのまま表記されてしまっています。
ここでちょっと考えてください。OGPというのは記事そのものを物語る存在なのに文章が第三者のもの。これはあまり良い有り方ではないですよね。サンプルを見てもまるでgoogleの社員であるかのような誤解を与える可能性(笑)
今度は自身のブログ内の別ページで試します。
画像が同じドメインなのでOGP対象になってしまいます。これはアカンやつ (´・ω・`)
だって元記事の「flex云々かんぬん」と記事概要文もサムネイルも全く同じだもの。違う記事だし本旨じゃないのに。
これはiframeタイプのブログカードでは起こりませんので、htmlタイプの弊害だと言えますね。
冒頭にブログカードを掲載したい場合の対処法
中には「どうしても記事冒頭にブログカードを掲載したい」という方も。加えて「トップページやOGPからはブログカード内容を除去したい」と。対処法いくつかありますが、結局はルールを理解した上でうまくやる、というだけの方法です。
- iframeタイプのブログカードに変更する
- 『本文』へはブログカードを掲載せず『追記』に掲載
- CSSで表示順序を入れ替える テンプレート作者 akiさんのアイデアです
①については根本的解決(笑)
自身の用途に見合わないのですからiframeで表示させるタイプへの変更をおすすめします。
②について。結局のところ『本文』にブログカードが存在しているが故にOGP対象になってしまうので、一番手っ取り早いのは『本文』への掲載を避けることです。但しこの場合はOGP(画像と文章)と併せて要約記事への掲載内容も失われます。
③なんですけども、FC2テンプレート製作者であるakiさんがアイデアを伝えてくれましたのでご紹介します。
*Essence FC2ブログ共有テンプレートを作成・配布しています。不精なので時々更新。(^^;
「CSSで表示順序を入れ替える」という方法なので、htmlの書き順が変わります。ソースコードは以下の通り
<div style="display: flex; flex-flow: column;">
<div style="order: 2;">2番めに表示したいhtml内容200文字以上</div>
<div style="order: 1;">ブログカードhtml内容</div>
</div>
htmlが増えてしまうのと、書き順と表示順が入れ替わりますので混乱しないことなどが注意点です。SEO的にも特に問題ありません。最大の注意点は 2番目に表示させる内容は200文字以上の文章であること。
200文字を使い切らないとブログカードの内容が入ってきてしまいますので200文字以上の文字列記載が必須です。こちらがOGPになりますので適切な文章を書き記すようにしましょう。htmlタグを含まず200文字以上です(半角の場合は倍と考えてください)
こちらの方法は「どうしても」という時に奥の手として使うと良いと思います。akiさんご協力ありがとうございます :)
あ、あとアイキャッチ画像の機能を利用してサムネイルもしっかり指定した方が良いですね。
まとめ
私がどうしているか、ですけれども、ブログカードは絶対に『本文』には掲載しません。『本文』には記事内容を端的に説明する内容を100文字以内で記載するようこころがけています。SNSなどで紹介された際に「何が書いてあるのかなんとなく伝わる」ことが大事だと思いますので、挨拶文や定型文などは利用しません。OGPというのは結局はそこが最も大事なのであって、「この記事は何が書いてあるの?」の察しをつけられないものはあまりよろしくないと思いませんか (∵`)
ということで、htmlタイプブログカード利用時の注意点と併せ、根本的に「ブログカードはなんのためにあるの?」という説明でもありますので、自身の方針と照らし合わせて最適な記事構成を考えてみてくださいね。
There are no comments yet.