はてなブログにおけるOGP調査 - みかづきブログその3

はてなブログにURLを埋め込むときに :embet:cite をつけるとOGPが展開されることがあります。

kimizuka.hatenablog.com

↑ こんな感じです。

今回はその条件とそのときに表示されている情報を調査してみました。

meta情報なし

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>OGPテスト - title</title>
</head>
<body>
</body>
</html>

meta情報が無いと展開されません。
:embed:cite をつけて強引に展開したところ上記のような表示になりました。

meta情報のみ

jsrun.it

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>OGPテスト - title</title>
    <meta name="description" content="OGPのテストです。 - description" />
    <meta name="author" content="kimmy - author" />
    <meta name="generator" content="jsdo.it - generator" />
</head>
<body>
</body>
</html>

meta情報をいれると展開されるようになりました。
つまり展開されている情報はOGPではなかったようです。

meta情報 + FacebookのOGP

jsrun.it

HTML

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
    <meta charset="UTF-8" />
    <title>OGPテスト</title>
    <meta name="description" content="OGPのテストです。 - description" />
    <meta name="author" content="kimmy - author" />
    <meta name="generator" content="jsdo.it - generator" />
    <meta property="fb:app_id" content="518828341562653" />
    <meta property="og:title" content="OGPテスト - og:title" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://jsrun.it/kimmy/4op8" />
    <meta property="og:image" content="http://jsrun.it/assets/o/0/g/H/o0gHC.jpeg" />
    <meta property="og:site_name" content="OGPテスト - og:site_name" />
    <meta property="og:description" content="OGPのテストです。 - og:description" />
</head>
<body>
    <div id="fb-root"></div>
</body>
</html>

画像も入るようになりました。予想通りog:imageを引っ張ってきているようです。
また、titleよりもog:title、descriptionよりもog:descriptionが優先してつかわれていることがわかります。

meta情報 + Twitter CardのOGP

jsrun.it

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>OGPテスト - title</title>
    <meta name="description" content="OGPのテストです。 - description" />
    <meta name="author" content="kimmy - author" />
    <meta name="generator" content="jsdo.it - generator" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="http://jsrun.it/kimmy/5Enm" />
    <meta name="twitter:creator" content="ki_230" />
    <meta name="twitter:title" content="OGPテスト - twitter:title">
    <meta name="twitter:description" content="OGPのテストです。 - twitter:description" />
    <meta name="twitter:image:src" content="http://jsrun.it/assets/l/o/f/2/lof2R.jpeg" />
</head>
<body>
</body>
</html>

meta情報のみのときと変わらない結果となりました。

結論

はてなブログに関して言えば、FacebookのOGPを入れておけば安心ということですね。
キャッシュが強くて検証に苦戦しました。