SNSのボタンを追加したのでついでにogpの設定も追加しておきます。これも、前回のarchiveリストと同様にHexoのドキュメントに乗っているopen_graphというhelperを使えば簡単にできます。

Open Gragh Protocolってなに?

Open Gragh Protocol(以下、OGP)はブログやサイトに予め何が書いてあるかをhtmlのmetaで定義しておき、プログラムやアプリケーションに対してサイトに何が書かれているのかといった情報を伝えるための仕組みです。OGPが設定されているブログやサイトのリンクをFacebookに貼るとリッチな表示になるアレに必要です。

以下のようなogから始まるpropertyを設定することでfacebookにリンクを追加すると自動的にリッチな表示にしてくれます。

<meta property="og:type" content="article">
<meta property="og:title" content="HexoでOpen Gragh Protocolの設定をする">
<meta property="og:url" content="http://ishii.tech/">
<meta property="og:site_name" content="いしいのブログ">
<meta property="og:description" content="略">
<meta property="og:updated_time" content="2016-07-12T11:37:03.812Z">

詳しい仕様は公式を見てください。

Twitterでも同様にリッチな表示にできますが、いくつかのTwitter独自のogp設定が必要です。Twitterの場合は次のような表示になります。

設定

表示したいSNSのIDを入力することで自動的に対応したhtmlが出力されるようになっています。

twitterの設定だけ入れて以下の行をhearに追加しました。

!= open_graph({twitter_id: 'ishii_tech'})

他のOptionは公式を参照してください。

うまく設定できると以下の様に設定に対応したogpが出力されます。

<meta property="og:type" content="article">
<meta property="og:title" content="略">
<meta property="og:url" content="http://ishii.tech/">
<meta property="og:site_name" content="いしいのブログ">
<meta property="og:description" content="略">
<meta property="og:updated_time" content="2016-07-12T11:37:03.812Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="略">
<meta name="twitter:description" content="略">
<meta name="twitter:creator" content="@ishii_tech">

終わり。