ネット on Keyuki Blog

Xのリンクカードに画像が出ない原因を調べたら、featured_imageだけでは足りなかった

Wed, 06 May 2026 19:00:00 +0900

こんなブログでも流入数を多少は増やしていきたいなという、気持ちで、試しに記事をXに投稿したとき、リンクカードに画像が出ませんでした。

リンクカードというのは、XにURLを貼ったときに自動で表示される、タイトルと画像がセットになったあのプレビューのことです。ちゃんと出ると見栄えがいいし、クリックされやすくなる気がして、できれば表示させたいやつです。

記事ページ自体を開くとアイキャッチ画像はちゃんと表示されていました。なのにXのカードには画像がない。「またX側の気まぐれか？」とも思ったのですが、せっかくなので原因をちゃんと調べることにしました。

まずHTMLのソースを確認しました

Webページの裏側にはHTMLというファイルがあって、その中に「この記事のSNSカード用画像はこれです」という情報を埋め込む仕組みがあります。og:image や twitter:image といった「メタタグ」と呼ばれる記述がそれにあたります。

まずそのメタタグが正しく出力されているかを確認しました。Hugo（このブログで使っている静的サイトジェネレーター）でサイトを一時的にビルドして、出力されたHTMLを調べました。

hugo --destination /private/tmp/keyuki-og-check --environment production
rg -n "og:image|twitter:image|twitter:card" /private/tmp/keyuki-og-check/posts

結果を見て、最初は「あ、タグ自体は出てる」と思いました。必要なメタタグは全部ありました。

ところがよく見ると、どの記事もまったく同じURLを指していました。

<meta property="og:image" content="https://blog.keyuki.net/images/default-og.jpg" />
<meta name="twitter:image" content="https://blog.keyuki.net/images/default-og.jpg" />

記事ごとの画像ではなく、全記事共通の default-og.jpg という1枚の画像を指していました。

「メタタグがない」のではなく、「メタタグはあるけど、指している画像が全部同じ共通画像だった」という状態でした。

原因は `featured_image` と `images` の役割の違い

このブログはHugo + Anankeというテーマで動いています。記事を書くとき、ファイルの先頭に設定を書く欄（「フロントマター」と呼びます）があって、そこにアイキャッチ画像のURLを指定していました。

featured_image: https://images.keyuki.net/uploads/2026/05/example-eyecatch.png

これで記事ページにはちゃんと画像が表示されます。ところがXのリンクカードはここを見ていませんでした。

Hugoには featured_image とは別に、SNSカード用のメタタグを生成するための images という設定項目があります。HugoのOGP（Open Graph Protocolの略で、SNSにURLを貼ったときの見え方を制御する仕組みです）は、featured_image ではなく images を参照して動きます。

featured_image → 記事ページ上のアイキャッチ表示に使われる（Anankeテーマ固有の機能）
images → SNSカード用メタタグの生成に使われる（Hugo本体の機能）

images を設定していなければ、Hugoはサイト全体のデフォルト画像（default-og.jpg）で埋めます。今回まさにその状態でした。

画像サイズにも落とし穴がありました

共通の default-og.jpg を確認してみたら、解像度が 7200x4800、ファイルサイズが約7.6MBもありました。

Xのリンクカードには画像のサイズ制限があります。大きすぎる画像はカードに表示されません。共通画像はその条件を超えていたため、仮にフォールバックとして読み込まれていたとしても表示されなかった可能性が高いです。

SNSカード用の画像は 1200x630（横1200px × 縦630px）のJPEGで、ファイルサイズは数百KB以内に抑えるのが安全とされています。

修正した内容

各記事のフロントマターに `images` を追加しました

公開済みの記事のフロントマター（ファイル先頭の設定欄）に images を追加しました。SNSカード用の画像はアイキャッチとは別に、1200x630で作り直したものを使っています。

個人ブログに Google Analytics と Microsoft Clarity を入れた理由

Wed, 06 May 2026 10:00:00 +0900

ブログを整え直している流れで、アクセス解析まわりも見直しました。

もともと Cloudflare Web Analytics は使っていましたが、今回は Google Analytics 4 と Microsoft Clarity も追加しました。アクセス数を細かく追いかけたいというより、どの記事が読まれているのか、どこから来ているのか、読者がページ内でどう動いているのかを見られるようにしたかったからです。まあ、そもそも誰も見にきてないんですけどね。やってみたいだけですね。

もともと使っていた Cloudflare Web Analytics

Cloudflare Web Analytics は、個人ブログにはかなり相性がいいと思っています。軽くて、Cookie に依存せず、プライバシー寄りの設計です。まず全体のページビューや訪問傾向をざっくり見るだけなら、これで十分な場面も多いです。

公式の説明によると、JavaScript の beacon と Performance API を使ってデータを収集しており、訪問者の個人データは収集・使用しない設計になっています。Core Web Vitals などのパフォーマンス指標の傾向も確認できます。

「何人くらい来ているのか」「どのページが見られているのか」を日々ざっくり把握するには、これで十分です。

それでも GA4 を追加した理由

GA4 は正直、個人ブログには機能が多すぎる面もあります。ただ、流入元やページごとの傾向を後から掘れるのは便利です。SNS に投稿した直後の反応、検索から読まれた記事、内部リンクで回遊された記事などを見たいとき、Cloudflare より細かい分析ができます。

GA4 の主な強みを整理すると:

リアルタイムレポート: 直近 5分 / 30分のアクティブユーザー、閲覧ページ、イベントをざっくり確認できる。正確な流入元の内訳は、通常のトラフィック取得レポートで後から確認する用途に向く
トラフィック・ユーザー分析: どこから来ているか（検索、SNS、直接など）の内訳を見る
探索（Explorations）: 標準レポートより深く、フィルタやセグメントを組み合わせて分析できる

個人ブログでは全部使う必要はないです。「SNS に投稿したあと、どこから何人来たか」「検索から読まれている記事はどれか」といった目的を決めて、必要なところだけ見る使い方で十分だと思っています。まだ書いたブログをSNSに投稿してないですね、やらないといけないですね。

将来的に Search Console と接続してオーガニック検索の傾向を見たり、イベント設計をして内部リンクのクリックを追ったりもできるみたいですね。将来の選択肢は多い方がいいですからね。

Microsoft Clarity を追加した理由

Clarity は、数字というより読者の動きを見るために入れました。他の人のブログで見て、なんだろうこれと思ってとりあえず、調べて、入れてみた感じです。どこでスクロールが止まるのか、どのリンクが押されるのか、スマホで読みづらそうな箇所がないか。こういうことは、ページビューだけを見ていてもわかりません。

モバイル版を整えたら、PC版の記事タイトルが大きすぎることに気づいた

Tue, 05 May 2026 14:00:00 +0900

先に、スマホ版の記事タイトルサイズについても調べています。

スマホ版の記事タイトルサイズを調べて、自分のブログを調整した話

モバイル版の記事タイトルサイズを調整して、スマホでの見え方はだいぶ落ち着きました。その後、PCで自分のブログを開き直してみると——今度はPC版のタイトルがずいぶん大きく感じました。

本文も少し大きめ。画面いっぱいに文字が主張しているというか、記事を読む画面としては少しゆったりすぎる印象です。

今回は、PC版の記事タイトルと本文サイズをどう調整したかを記録します。まずは「大きい気がする」という違和感を、実際のpx値に置き換えて見直してみました。

現状：Anankeテーマの初期値

自分のブログはHugo + Anankeテーマを使っています。AnankeはTachyonsというCSSユーティリティフレームワークを読み込んでいて、記事ページでは次のようなクラスが当たっています。

記事タイトル（h1）: f1 → 3rem = 48px
本文コンテナ: f4 → 1.25rem = 20px

48pxのタイトルと20pxの本文。倍率にすると約2.4倍です。

PCの大画面で見ると、タイトル48pxはかなり主張が強いです。英語の短いタイトルなら映えそうですが、日本語の長いタイトルだと2〜3行に折り返して、画面の上部がタイトルで埋まってしまいます。これが嫌でした。

本文20pxも、PCでじっくり読むにはやや大きめに感じます。文字は大きいほうが読みやすい場面もありますが、大きすぎると読みやすさとは別の圧迫感が出ます。本文が大きすぎると、1行の文字数が減って、目の移動が増え、かえって疲れることもあります。

比較：PC版のブログ・メディアはどうしているか

いくつかのPC向け記事ページのタイポグラフィ傾向を調べてみました。主に既存のタイポグラフィ調査記事やデザインガイドを参考にしています。

国内メディアのPC版タイトル

国内のメディア記事ページでは、PCの記事タイトルは20〜30px程度の例が多く、本文は15〜16pxに収まる例があります。情報量を優先し、タイトルを目立たせるよりスクロールを抑える方向です（LIG）。

ブログタイポグラフィの一般傾向

英語圏のブログタイポグラフィガイドでは、PCの本文は 16〜18px が読みやすい範囲として扱われることが多いです（Lystingz）。

H1については、UI/UXの一般的な目安で 32〜36px 前後がよく使われます。ブログの記事タイトルとしては、このあたりから少し下げて 28〜36px 程度が推奨レンジとして扱われることもあります（Rteetech、Design Bootcamp）。

日本語タイトルの事情

英語圏の目安は、英語の短いタイトルを前提にしている面があります。日本語のタイトルは文字数が多くなりやすく、PCでも2行に折り返すことが珍しくありません。

48pxで2〜3行折り返すと、タイトルだけで画面上部のかなりの面積を占めてしまいます。英語圏の目安より一段小さくしても、日本語としては自然に見えるはずです。

判断：35〜38pxのH1、17〜18pxの本文に

今回は、PC版のH1を 35〜38px、本文を 17〜18px 程度に調整することにしました。

タイトルの存在感は残しつつ、本文を読む画面として少し落ち着かせる狙いです。倍率でいうと約2.0〜2.1倍。48px時代の2.4倍より、記事ページとしては自然なバランスに近づきます。

実装：CSSで上書き

HTMLテンプレートは変更せず、custom.css にPC向けのメディアクエリを追加しました。モバイル版の調整と同じアプローチです。

@media (min-width: 769px) {
  .single .post-content {
    font-size: clamp(1.0625rem, 0.98rem + 0.25vw, 1.125rem);
    line-height: 1.75;
  }

  .single .post-content > header h1 {
    font-size: clamp(2.125rem, 1.85rem + 0.75vw, 2.375rem);
    line-height: 1.28;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
}

ポイントを整理します。

日本語サイトのモバイル見出しサイズを調べた — 自分のブログを最適化するために

Tue, 05 May 2026 08:25:00 +0900

自分のブログ（Hugo + Anankeテーマ）をスマホで見たとき、記事タイトルがなんだか大きすぎる気がしました。そこで、日本語の主要サイトがモバイルでどんな見出しサイズを使っているのか調べてみました。

日本語ニュースサイトのモバイルh1

2026年5月時点の筆者調べです。Chrome DevToolsで375px幅に設定し、各サイトの記事タイトル要素のcomputed font-sizeを確認しました。

サイト	モバイルh1	傾向
NHK	16px	本文と同じサイズ
読売新聞	16px	本文と同じサイズ
日経	16px	本文と同じサイズ
毎日新聞	16px	本文と同じサイズ
産経新聞	16px	本文と同じサイズ
Yahoo!ニュース	17px	比較的小さめ
朝日新聞	18px	ニュース系では大きめ
ITmedia	~13.5px	小さめ

今回筆者が確認したニュース系サイトでは、モバイルの記事タイトルが 16〜18px 程度に収まる例が多く見られました。情報密度を優先し、タイトルを大きく見せるよりもスクロール量を抑える設計に見えます。一方で、過去の国内メディア調査ではスマホh1は 18〜28px、特に24pxが最多 という結果もあり、サイトや記事テンプレートによって差があります（アソボウブログ）。

ブログ・技術プラットフォームのモバイルh1

記事をじっくり読んでもらうタイプのサイトは、もう少し大きめのタイトルを使います。

サイト	モバイルh1	傾向
Zenn	~23px	開発者ブログ寄り
Note	28px	記事特化型
Qiita	~28px	技術コミュニティ
はてなブログ	~19px	控えめ

ブログ系は、おおむね 19–28px の範囲でした。記事タイトルを目立たせて、読者の注意を引く設計です。

デザインガイドラインの推奨値

Material Design 3（Android）

トークン	サイズ	用途
Headline Large	32sp	大きめのページ見出し
Headline Medium	28sp	ページ見出し・主要セクション
Headline Small	24sp	小さめのページ見出し・セクション見出し

iOS Human Interface Guidelines

スタイル	サイズ	用途
Large Title	34pt	ナビゲーションタイトル（※今回のブログ記事タイトル用途では大きめ）
Title 1	28pt	ページタイトル
Title 2	22pt	セクション見出し

なお、Material Designの sp とiOSの pt はCSSの px と直接は換算できません（画面密度やDynamic Typeの文脈があります）。ここではおおよその目安として参照しています。