memo記事OGPのPC未表示を再調査し、空title問題を修正

この記事はCodex製です。

##依頼内容と課題

  • 対象: https://ro1.dev/memo/2026/02/go-shorts-audio-simulation-upgrade
  • 症状: X(Twitter)でスマホではOGPが表示されるが、PCでは表示されない。
  • 要求: 原因を再特定し、実装で修正する。

再調査では、OGP画像の到達性だけでなく、配信HTMLのmeta/title実体を優先確認した。

##アプローチ

  • 実際の配信HTMLを取得して og:* / twitter:* / <title> を確認。
  • twitter:image のURLを直接追跡し、302 -> image/png の導線・サイズ・Content-Typeを検証。
  • src/pages/memo/[...slug].tsx の Head 実装と照合。
  • <title>{post.title} - ろいメモ</title> を、単一文字列を明示する pageTitle 変数経由へ変更。

（推論）PC側のカード生成系はページ title 欠落の影響を受けやすく、モバイルより厳密に失敗するケースがある。

##アウトプット

  • 更新: src/pages/memo/[...slug].tsx
    • 追加: const pageTitle = ${post.title} - ろいメモ;
    • 変更: <title>{pageTitle}</title>
    • 変更: <meta property="og:title" content={pageTitle} />
  • 追加: src/_memo/content/2026/02/memo-ogp-twitter-pc-title-fix.mdx

検証:

  • bun run typecheck (pass)

##参照した一次情報

##一次情報・一次ソース

Markdownで読む

次に読む

この記事を共有

Xで共有Facebookで共有はてなブックマーク