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

はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます

新機能

はてなブログでは、先日公開した「ブログカード」を拡張し、インターネットの一般的なWebサイトに対応しました。URLを貼るだけで、さまざまなWebページをコンパクトな「ブログカード」形式で紹介することができます。

「ブログカード」は、ブログに掲載する記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。今回の改善では、ソーシャルメディアのシェアで参照されるOGP(Open Graph Protocol)をはじめとして、Webページに記述されているmeta要素などのデータを利用し、はてなブログ外の任意のWebサイトに対応しました。

これまでのリリースでは、はてなブログの記事をはてなブログに掲載するときと、外部サイトがoEmbed APIを介してはてなブログの記事を掲載するときに、ブログカードを利用できました。さらに拡張されたブログカードにより、はてなブログの記事だけではなく、さまざまなWebサイトをより魅力的に紹介することができます。どうぞご利用ください。

※OGPに対応していないサイトでは、HTMLからメタデータを適切に抽出できないWebページがあります。その場合、ブログカードによる埋め込みはできません。

Webサイトをブログカードの形式で貼り付けるには

既存の「リンク挿入」機能と同様に、任意のWebページのURLを編集画面にペーストするか、入力補助ツールバーの「リンク挿入」ボタンで表示される「リンクを挿入」ウィンドウで、「埋め込み」形式を選択してください。

任意のWebサイトのリンクを挿入

はてなブログFacebookページもブログカード形式の埋め込みが可能

はてな記法によってブログカードを掲載する

リンク挿入機能を使わず、はてな記法を直接記入して記事を埋め込むこともできます。次のようにhttp記法の:embedオプションを指定してください。

[http://hatenanews.com/articles/201408/22441:embed]
[http://hatenanews.com/articles/201408/22441:favicon:title]

これは次のように展開されます。


「はてなかばんの中身出し」でかばんの中身を見たり、見せたり - はてなニュース