tastasworld
🤖 AIとつくる

下書きの画面に description と OGP カードを出した

約3,500字
記事ページの末尾に出るメタ情報プレビュー。上部に「下書きの画面に description と OGP カードを出した」の文字、下に検索結果を模したカードが並んでいる

このブログは、記事を書く仕組みそのものも自分たちで作っています。今回作ったのは2つです。記事ページの末尾に出るプレビューと、全記事を横断で見る一覧ページ。どちらも開発サーバーでのみ表示されます。

検索や SNS から来る読者が最初に見るのは、検索結果の文章 (description) と、シェアされたカードの画像です。ここは表示回数やクリック数につながるところです。これまで下書きの画面で見られたのは記事のページそのもので、入口の見え方は公開してから実物で確かめていました。公開後に直すこともできます。ただ、直すたびに反映の手順を踏むことになるので、公開前に見ておきたいと考えました。

以降は、設計と実装を担当した 🤖 Claude Code の執筆です (要件はブログ主が出し、内容も確認・修正しています)。

記事ページの末尾に出す「メタ情報プレビュー」

開発サーバーで記事のページを開いて最後までスクロールすると、本文の下にメタ情報プレビューが出るようにしました。下書きでも公開済みの記事でも同じように出ます。

記事のページ。参考リンクと「記事一覧へ」の下に、赤い破線で囲まれたメタ情報プレビューが続いている

出しているのは次の項目です。

  • 検索結果での見え方 (PC 幅とスマホ幅)
  • SNS カードでの見え方
  • description の全文
  • タイトルと description の文字数
  • 公開ステータス (下書き / 公開済み / 公開・未反映)
  • 公開日と更新日
  • 対応する issue 番号
  • OGP の元になる画像のサイズと、カードで切り取られる割合
  • slug と公開後の URL
  • カテゴリとタグ (カテゴリは4つから選んで指定)
  • アフィリエイトの設定
  • noindex の設定

では、順に見ていきます。

検索結果

検索結果風のプレビュー。PC 幅 600px とスマホ幅 400px のカードが縦に並び、タイトルと説明文が途中で省略記号に変わっている

PC 幅 600px とスマホ幅 400px の箱に文章を流し込み、はみ出したところを省略記号にしています。切れる位置は文字数ではなく幅で決まるので、この表示で切れ方を確認します。実際の検索結果に寄せた表示です。本番の説明文は、検索語に応じて Google が書き換えることもあります。

SNS カード

OGP カード風のプレビュー。記事の画像が左右を切り取られて表示され、その下にドメイン・タイトル・説明文が並んでいる

OGP の元になる画像は、主な SNS では 1.91:1 前後に切り取られます。本番で配信されるのと同じ画像を同じ比率で表示しているので、カードとして成立しているかを確認できます。カードの枠や文字の並びは、Slack や LINE の表示に寄せています。

description の全文と文字数

文字数の表と、タイトルおよび説明文の全文表示。目安の範囲に下線が引かれ、超過分は薄い文字になっている

プレビューのこの部分に出しているのは3つです。切れ方は上の2つで見て、書く分量はここの文字数で見ます。

  • 表 — タイトルと description の文字数、全角換算 (半角英数を0.5文字として数えたもの)、目安、判定
  • タイトルの内訳 — 先頭20字 (狙うキーワードを置く範囲) と、目安を超えた分の色分け、末尾に自動で付くサイト名
  • description の全文 — 目安にしている120〜160字の範囲に下線、超えた分は薄い色

公開ステータス

メタ情報プレビューのヘッダを3つ並べた比較。上から赤の「下書き」ラベル、緑の「公開済み」ラベル、橙の「公開・未反映」ラベルと反映コマンドの案内

記事の状態に応じて、次の3つのどれかが出ます。下書き (赤)、公開済み (緑)、公開・未反映 (橙)。公開・未反映は、一度公開した記事を直して本番にまだ反映していない状態で、「実際に公開した時点のソース」を記録した git ブランチとの差分で判別しています。

そのほかの項目

項目値の例見るところ
公開日2026/08/05 10:45ブログの記事一覧の並び順になる
更新日2026/08/20 18:06公開日と別の日のときだけ、記事に「更新」として出る
issue 番号#109対応する GitHub の課題。クリックで開く
heroImage1220×540 (2.26:1) 左右が約15%切れる切り取られても見せたいものが残るか
slugclaude-code-image-mosaic公開後の URL に入る。公開後は変えない
公開URLhttps://tastasworld.com/blog/claude-code-image-mosaic/canonical と og:url に入る
カテゴリ🤖 AIとつくる記事一覧の絞り込みに使う
タグAI・Claude Code・画像処理・自動化・個人開発内部の分類用 (以前はカテゴリの自動判別に使っていた)
アフィリエイト(なし)設定があると本文の冒頭に PR 表記が出る
noindexfalsetrue になっていると検索結果に出ない

全記事を横断で見る

今回追加したもう1つが、一覧ページです。メタ情報プレビューが1本の記事を実物の見た目で確認するのに対して、こちらは全記事を並べてブログ全体の統一感を見ます。

メタ情報一覧ページの全体。上に集計、その下に状態・公開日・更新日・OGP 画像・画像サイズ・記事タイトル・issue 番号の列が並ぶ表がある

上が本数の集計、下が記事ごとの行です。そこから OGP 画像・画像サイズ・タイトル・issue 番号の列を拡大するとこうなります。

一覧ページの表を拡大したもの。OGP 画像のサムネイル、画像のサイズ、記事タイトル、issue 番号の列が並んでいる

ほかにどんな方法があるか

同じことをする方法はほかにもあります。並べたのは次の9つです。

方法見え方の再現見られる範囲採否
記事レイアウトへのコンポーネント常設検索結果・カードとも再現全記事 (自動)採用
専用の一覧ページ数値と画像の一覧全記事 (自動)採用 (併用)
下書きのメモ欄への字数記入数値のみ書いた記事のみ見送り
記事一覧のカードで代用 (description は表示済み)description のみ全記事見送り
テンプレートへのコンポーネント記載検索結果・カードとも再現新しい記事のみ見送り
配信 HTML の検証スクリプトタグの値のみ全記事見送り
Playwright での画像合成実物に近い指定した記事見送り
ビルド時の文字数チェック数値のみ全記事見送り
外部のプレビューサービス各サービスに近い公開後の記事見送り

いまの記事数と書き方で考えて、今回は2つを採用しています。

開発サーバー限定にする仕組みと、その確認

メタ情報プレビューも一覧ページも、本番の成果物には出ません。確認は、本番と同じ手順でビルドしてから成果物を調べる形にしています。一覧ページのディレクトリが生成されていないことと、プレビュー用のスタイルが CSS に混ざっていないことを見ます。

ls -d dist/dev              # → No such file or directory
grep -rl "mp-serp" dist/_astro/   # → 何も出ない

まとめ

プレビューを作ったことで、公開前のチェックが効率よく行えるようになりました。レビューにかかる時間も減って、ブログの品質も上がったと思います。便利に使えています。

プレビューに出す項目は、いったん簡単に出せそうなものを出すようにしています。表示回数やクリック数を伸ばそうとするなら、ここにない項目も出して検討する必要が出てくるかもしれません。

入口の見え方は公開後でも直せます。ただ、下書きを読む流れの中に出しておけば、公開前に判断できます。

参考リンク

一次情報 (公式ドキュメント):

同じテーマの記事 (個人ブログ):

← 記事一覧へ