Twitterカードのラージサイズが出力されない場合にHubLで対応する方法

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:imagetwitter: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 }}

これでキービジュアルが設定されている場合のみ強制的に置換するようになりました。

プレビューやコンテンツステージングまで対応することはないと思いますが、このような対処法もあるということで何かのお役に立てればと思います。

 

この記事をシェアする

Facebook Twitter LinkedIn note はてなブログ
アクセサイト編集担当

アクセサイト編集担当

マーケティングDX・営業DXに関連するお役立ち情報を投稿しています。
以下の公式SNSでも情報を発信していますので、ぜひフォローをお願いします!

SHARE

Facebook Twitter LinkedIn note はてなブログ
前の記事へ ブログ一覧へ戻る 次の記事へ