HubSpotのページ編集でキービジュアルを設定すると自動的にFacebookとTwitterのOGPコードが出力されます。
Twitterはカードの種類が複数あるため、通常であればラージサイズが設定された以下のメタタグが出力されます。
<meta name="twitter:card" content="summary_large_image">
ですが、何故か必ずcontent="summary"
になってしまうことがあったので、その条件を調べ上げてHTML+HubLテンプレートに少し手を加えて対処した方法を紹介します。
content="summary"で出力されてしまう条件
調査したところ2つの条件があるようで、1つはキービジュアルに設定する画像の大きさが関係していました。
横幅(width)299px以下、縦幅(height)156px以下だとsummary
になってしまいます。
Twitterの画像に関わる仕様(Reference)を見ると300x157
が最小値となっているので準拠しているようです。
もう1つの条件はプレビューです。
ページプレビューだけではなく、コンテンツステージングもプレビュー扱いとなるようです。コンテンツステージングで公開していてもsummary
になるため注意が必要です。
今回はこのコンテンツステージングが問題になりました。
コンテンツステージングなのでOGPチェックは意味をなさないと思いますが、できればsummary_large_image
で出力してほしいところです。
無理やりですが後述の方法を使用すれば対策はできるので、まずはOPGコード(メタタグ)がどのようにして出力されているか説明します。
OGPコードはどのようにして出力されているか
HTML+HubLテンプレートを使用する場合に必ず記述する変数で standard_header_includes
というものがあります。
公式サイトの説明[ページテンプレートの必須変数]では以下のように書かれています。
jQuery、layout.css、添付されるスタイルシート、meta viewportタグ、Google アナリティクスのトラッキングコード、その他のメタ情報、およびドメイン/テンプレート/ページレベルでheadタグに付加されるコードを追加します。この変数はHTMLテンプレートの<head>に追加する必要があります。
1つの変数に色々なコードがまとめてあるという内容で、standard_header_includes
変数を展開すると以下のように沢山のコードが含まれています。
<meta property="og:description" content="ページ編集のメタディスクリプション">
<meta property="og:title" content="テストページ">
<meta name="twitter:description" content="ページ編集のメタディスクリプション">
<meta name="twitter:title" content="テストページ">
{{ js_integration_head_start() }}
{{ head_elements() }}
{{ head_css() }}
{{ head_js() }}
{{ js_integration_head() }}
<link rel="canonical" href="https://www.accesight.com/test" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://www.accesight.com/sample.jpg#keepProtocol" />
{% if "" != "" %}<meta property="og:image:alt" content="" />{% endif %}
<meta name="twitter:image" content="https://www.accesight.com/sample.jpg#keepProtocol" />
{% if "" != "" %}<meta name="twitter:image:alt" content="" />{% endif %}
<meta property="og:url" content="https://www.accesight.com/"/>
<meta name="twitter:card" content="summary">
<meta http-equiv="content-language" content="ja" />
<script>var hsVars = { app_hs_base_url: 'https://app.hubspot.com' };</script>
{{ include_default_custom_css(content.include_default_custom_css, template_meta.include_default_custom_css, domain_settings.include_default_custom_css) }}
{{ include_attached_css(content_group.attached_stylesheets or domain_settings.attached_stylesheets, content.enable_domain_stylesheets, template_meta.enable_domain_stylesheets, theme_meta.enable_domain_stylesheets, domain_settings.enable_domain_stylesheets) }}
{{ include_attached_css(template_meta.attached_stylesheets, content.enable_layout_stylesheets) }}
{{ include_attached_css(content.attached_stylesheets) }}
{{ require_attached_js(template_meta.attached_js) }}
このようにstandard_header_includes
変数には様々なコードが含まれていて、ページ編集でキービジュアル設定をONにしているとOGPコードのog:image
やtwitter:image
などが含まれるようになります。
17行目にメタタグ<meta name="twitter:card" content="summary">
が出力されていますが、コンテンツステージングのためsummary_large_image
になっていません。
そこでHubLフィルターreplace
を使ってメタタグを置換します。
HubLフィルター replaceで置換
HubLフィルターreplaceは文字列を置換することができるので、<meta name="twitter:card" content="summary">
を<meta name="twitter:card" content="summary_large_image">
に置換して出力させるようにします。
変更箇所はstandard_header_includes
変数にreplace
フィルターを入れるだけですが、少し手を加えて以下のように変更します。
{%- set standard_header = standard_header_includes -%}
{% if content.featured_image -%}
{%- set standard_header = standard_header|replace('<meta name="twitter:card" content="summary">', '<meta name="twitter:card" content="summary_large_image">') -%}
{%- endif -%}
{{ standard_header }}
これでキービジュアルが設定されている場合のみ強制的に置換するようになりました。
プレビューやコンテンツステージングまで対応することはないと思いますが、このような対処法もあるということで何かのお役に立てればと思います。