HubSpotのページ編集でキービジュアルを設定すると自動的にFacebookとTwitterのOGPコードが出力されます。
Twitterはカードの種類が複数あるため、通常であればラージサイズが設定された以下のメタタグが出力されます。
<meta name="twitter:card" content="summary_large_image">
ですが、何故か必ずcontent="summary"になってしまうことがあったので、その条件を調べ上げてHTML+HubLテンプレートに少し手を加えて対処した方法を紹介します。
調査したところ2つの条件があるようで、1つはキービジュアルに設定する画像の大きさが関係していました。
横幅(width)299px以下、縦幅(height)156px以下だとsummaryになってしまいます。
Twitterの画像に関わる仕様(Reference)を見ると300x157が最小値となっているので準拠しているようです。
もう1つの条件はプレビューです。
ページプレビューだけではなく、コンテンツステージングもプレビュー扱いとなるようです。コンテンツステージングで公開していてもsummaryになるため注意が必要です。
今回はこのコンテンツステージングが問題になりました。
コンテンツステージングなのでOGPチェックは意味をなさないと思いますが、できればsummary_large_imageで出力してほしいところです。
無理やりですが後述の方法を使用すれば対策はできるので、まずはOPGコード(メタタグ)がどのようにして出力されているか説明します。
HTML+HubLテンプレートを使用する場合に必ず記述する変数で standard_header_includes というものがあります。
公式サイトの説明[ページテンプレートの必須変数]では以下のように書かれています。
jQuery、layout.css、添付されるスタイルシート、meta viewportタグ、Google アナリティクスのトラッキングコード、その他のメタ情報、およびドメイン／テンプレート／ページレベルでheadタグに付加されるコードを追加します。この変数はHTMLテンプレートの<head>に追加する必要があります。
1つの変数に色々なコードがまとめてあるという内容で、standard_header_includes変数を展開すると以下のように沢山のコードが含まれています。
このようにstandard_header_includes変数には様々なコードが含まれていて、ページ編集でキービジュアル設定をONにしているとOGPコードのog:imageやtwitter:imageなどが含まれるようになります。
17行目にメタタグ<meta name="twitter:card" content="summary">が出力されていますが、コンテンツステージングのためsummary_large_imageになっていません。
そこでHubLフィルターreplaceを使ってメタタグを置換します。
HubLフィルターreplaceは文字列を置換することができるので、<meta name="twitter:card" content="summary">を<meta name="twitter:card" content="summary_large_image">に置換して出力させるようにします。
変更箇所はstandard_header_includes変数にreplaceフィルターを入れるだけですが、少し手を加えて以下のように変更します。
これでキービジュアルが設定されている場合のみ強制的に置換するようになりました。
プレビューやコンテンツステージングまで対応することはないと思いますが、このような対処法もあるということで何かのお役に立てればと思います。