---
title: Twitterカードのラージサイズが出力されない場合にHubLで対応する方法
description: "HubSpotのページ編集でキービジュアルを設定すると自動的にFacebookとTwitterのOGPコードが出力されます。
何故か必ずsummaryになってしまうことがあったので、その条件を調べ上げてHTML+HubLテンプレートに少し手を加えて対処した方法を紹介します。"
---
[ブログ｜株式会社アクセサイト ](https://www.accesight.com/blog)
# [Twitterカードのラージサイズが出力されない場合にHubLで対応する方法](https://www.accesight.com/blog/how-to-support-large-size-twitter-cards-in-hubl)
作成者: [アクセサイト編集担当](https://www.accesight.com/blog/author/accesight_blog)｜2022.10.5
[HubSpot](https://www.accesight.com/blog/why-choose-hubspot)のページ編集でキービジュアルを設定すると自動的にFacebookとTwitterのOGPコードが出力されます。
Twitterはカードの種類が複数あるため、通常であればラージサイズが設定された以下のメタタグが出力されます。
```
```
ですが、何故か必ず`content="summary"`になってしまうことがあったので、その条件を調べ上げてHTML+HubLテンプレートに少し手を加えて対処した方法を紹介します。
## content="summary"で出力されてしまう条件
調査したところ2つの条件があるようで、1つはキービジュアルに設定する画像の大きさが関係していました。
横幅(width)299px以下、縦幅(height)156px以下だと`summary`になってしまいます。
[Twitterの画像に関わる仕様(Reference)](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image)を見ると`300x157`が最小値となっているので準拠しているようです。
もう1つの条件はプレビューです。
ページプレビューだけではなく、コンテンツステージングもプレビュー扱いとなるようです。コンテンツステージングで公開していても`summary`になるため注意が必要です。
今回はこのコンテンツステージングが問題になりました。
コンテンツステージングなのでOGPチェックは意味をなさないと思いますが、できれば`summary_large_image`で出力してほしいところです。
無理やりですが後述の方法を使用すれば対策はできるので、まずはOPGコード(メタタグ)がどのようにして出力されているか説明します。
## OGPコードはどのようにして出力されているか
HTML+HubLテンプレートを使用する場合に必ず記述する変数で `standard_header_includes` というものがあります。
[公式サイト](https://developers.hubspot.jp/docs/cms/hubl/variables)の説明[ページテンプレートの必須変数]では以下のように書かれています。
> [jQuery、layout.css](https://developers.hubspot.jp/docs/cms/building-blocks/templates#included-cms-files)、添付されるスタイルシート、meta viewportタグ、Google アナリティクスのトラッキングコード、その他のメタ情報、およびドメイン／テンプレート／ページレベルでheadタグに付加されるコードを追加します。この変数はHTMLテンプレートのに追加する必要があります。
1つの変数に色々なコードがまとめてあるという内容で、`standard_header_includes`変数を展開すると以下のように沢山のコードが含まれています。
このように`standard_header_includes`変数には様々なコードが含まれていて、ページ編集でキービジュアル設定をONにしているとOGPコードの`og:image`や`twitter:image`などが含まれるようになります。
17行目にメタタグ``が出力されていますが、コンテンツステージングのため`summary_large_image`になっていません。
そこでHubLフィルター`replace`を使ってメタタグを置換します。
## HubLフィルター replaceで置換
HubLフィルター[replace](https://developers.hubspot.jp/docs/cms/hubl/filters#replace)は文字列を置換することができるので、``を``に置換して出力させるようにします。
変更箇所は`standard_header_includes`変数に`replace`フィルターを入れるだけですが、少し手を加えて以下のように変更します。
これでキービジュアルが設定されている場合のみ強制的に置換するようになりました。
プレビューやコンテンツステージングまで対応することはないと思いますが、このような対処法もあるということで何かのお役に立てればと思います。
[完全な記事を表示](https://www.accesight.com/blog/how-to-support-large-size-twitter-cards-in-hubl)
```json
{
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "アクセサイト編集担当"
},
"dateModified" : "2025-10-03T08:59:16.218Z",
"datePublished" : "2022-10-05T06:34:45Z",
"headline" : "Twitterカードのラージサイズが出力されない場合にHubLで対応する方法",
"image" : {
"@type" : "ImageObject",
"height" : 675,
"url" : "https://www.accesight.com/hubfs/blog/2022/202210-ms/feat.png",
"width" : 1200
},
"mainEntityOfPage" : "https://www.accesight.com/blog/how-to-support-large-size-twitter-cards-in-hubl",
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"height" : 60.0,
"url" : "https://www.accesight.com/hubfs/accesight2021/assets/images/common/logo_black_png.png",
"width" : 188.85155
},
"name" : "ブログ"
}
}
```