Railsのmeta-tags gemで og:image:widthと og:image:heightを設定する

f:id:jun9632:20170630233130p:plain

タイトルの通りですが、Ruby on Rails でSEO系のタグをいい感じに設定が出来る meta-tags のgemを使って、og:image:widthと og:image:heightを設定する方法です。

meta-tags gemは以下です。

github.com

で。

そもそも、なんで、og:image:widthと og:image:heightを設定するかと言えば

Facebookでページをシェアする際に、はじめてのページだと画像が一発で表示されないんです。その対応として、以下の方法があるようです。

シェアデバッガーを使用して画像をプリキャッシュする
og:image:widthおよびog:image:height Open Graphタグを使用する

です。

公式はこちら

ベストプラクティス - シェア機能 - ドキュメンテーション - 開発者向けFacebook

最初のシェアデバッガーを使用して画像をプリキャッシュするというのは、がっつり手作業なので却下です。

以下のページが、URLを入力して、「取得」みたいなボタンを押すイメージです。

developers.facebook.com

もう一つの

og:image:widthおよびog:image:height Open Graphタグを使用するは、タグを設定しておけば良しなにはからってくれそうなので、こちらを採用します。

書き方

そして、ココからが本題のコードの書き方です。

最初に書きます。

- set_meta_tags ({title: 'タイトル',
        description: 'デスクリプション',
        og: {image: {_: 'https://example.com/aaaa.jpg', width: 1200, height: 630}}})

です。

一番の肝心なところは、

_:

imageにhashで指定するんですが、画像のURLのkeyを

_ (アンバーバー)

にしないといけないんです。

そうなんですね。ぐらいの感想しかでない感じです。

なにはともあれ、_ (アンバーバー)を使ってください

そうすると。

<meta property="og:image" content="https://example.com/aaaa.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

と出力してくれます。

marketing-web.hatenablog.com