読者です 読者をやめる 読者になる 読者になる

まりぴよこのブログ

日々の日記。技術ネタでまとまりきってないものの記録、伝わる文章の書き方を練習とか。

はてなブログにリンクを挿入するときのembedがなんで出てこないのか調べてみた

何度か続けてブログを書いている時に、参考ページのURLをぺたぺた貼ってて どーしても気になるのが、

コピペった時に出てくるポップアップで、何故か「埋め込み表示が出てこない」時・・

「埋め込み」が出てこない例:

f:id:mpiyok:20150529081220p:plain

なんでやねん;; コピペった時の操作ミス(どうやって・??)なのか??とかしばらく悩んでたのですが。。

あまりに気になるので調べてみた。

はてなブログのヘルプ

リンクの挿入とコンテンツの埋め込み - はてなブログ ヘルプ

埋め込み 動画や音楽などのコンテンツを、サイトごとに最適化された形式で埋め込みます。一般的なWebページを貼り付けた場合は、ブログカードが利用できます。 :embed

ブログカードってなに・・??

ブログカードとは

ブログカード - はてなブログ ヘルプ

※OGPに対応していないなど、メタデータを適切に抽出できないWebページでは、ブログカードによる埋め込みはできません。

コレだ!

OGPってなに・・・??

OGPとは

nex.fm

紹介ページが詳しいので、めっちゃざっくり引用すると

OGP (Open Graph Protocol)。

facebookmixiGREEなどのSNSで使われている共通の仕様

「このウェブページは、こんな内容です」ということを明言するための仕様

メタタグを追加するだけ

こんなメタタグ

タグ 概要 必須
og:type ウェブページが何のページであるか blog,article,website
og:title ウェブページの名前
og:image ウェブページのサムネイル
og:url ウェブページの URL
og:description ウェブページの説明 -
og:site_name サイト名 -
og:email, og:phone_number 連絡先 -
og:locality 場所 -
og:latitude, og:longitude 経度緯度での位置情報 37.416343,-122.153013 -
og:country-name 国名 US, JP -

なるほど〜〜

メタタグ見てみた

例に挙げちゃって済みません;;

昨日の記事で、embed出来たとこと出来なかったとこで、メタタグみてみた。

embed出来た例 (esa.io)

こんなメタタグが・・

f:id:mpiyok:20150529083024p:plain

こうなる!

esa.io

Qiita Teamのページは og:ナンチャラ のタグ見つからず。

なるほどなるほど。 あ〜スッキリ♪