diff options
| -rw-r--r-- | .zed/AGENTS.md | 15 | ||||
| -rw-r--r-- | src/pages/og/index.astro | 74 |
2 files changed, 88 insertions, 1 deletions
diff --git a/.zed/AGENTS.md b/.zed/AGENTS.md index dc601f0..6f44dc6 100644 --- a/.zed/AGENTS.md +++ b/.zed/AGENTS.md @@ -42,8 +42,21 @@ ## SEO - `@astrojs/sitemap` によるサイトマップ自動生成（`astro.config.mjs` に追加済み） - `public/robots.txt` に sitemap URL を記載 -- OGP 画像・JSON-LD 構造化データは `astro.config.mjs` の `head` で設定 +- OGP / JSON-LD 構造化データは `astro.config.mjs` の `head` で設定 - Google Search Console への登録・サイトマップ送信は手動で行う +- `twitter:card` = `summary_large_image` を設定済み + +### OGP 画像 +- 静的フォールバック: `src/pages/og/[slug].png.ts`（Satori + resvg-js で動的生成） +- フォント: `node_modules/.noto-sans-jp.otf`（Google Noto Sans JP） +- ビルド後インテグレーション: `src/plugins/og-image.ts` が全ページのHTMLにページ別 `og:image` を注入 +- 開発中の確認: `npm run dev` では表示されない → `npm run build && npm run preview` +- デザイン: faceicon + ページタイトル + 「小平市議 安竹洋平」 + +## ソーシャル共有 +- コンポーネント: `src/components/SocialShare.astro`（X / Facebook / URLコピー） +- Footer 上書き: `src/components/starlight/Footer.astro`（SocialShare をコンテンツ直後に表示） +- 見出しアンカー: クリックで見出しURLをクリップボードにコピー（custom.css + astro.config.mjs の head script） --- diff --git a/src/pages/og/index.astro b/src/pages/og/index.astro new file mode 100644 index 0000000..8416098 --- /dev/null +++ b/src/pages/og/index.astro @@ -0,0 +1,74 @@ +--- +const slugs = [ + "index", + "jisseki", + "policy", + "support", + "contact", + "whisper-to-ai-moji-okoshi", + "koubunsyo-kanri", + "ijime-judai-jitai", + "fukushi-shisetsu-gyakutai", + "aiki-kouen", + "joutyo-koteikyu", + "kajo-seigen-kanwa", + "saresio-kaihatu", + "vaccine-kyuusai-tekiseika", + "dislexia-taiou", + "ippan-situmon", +]; +--- + +<!DOCTYPE html> +<html lang="ja"> + <head> + <meta charset="UTF-8" /> + <title>OGP 画像一覧</title> + <style> + body { + font-family: sans-serif; + max-width: 800px; + margin: 2rem auto; + padding: 0 1rem; + background: #1e293b; + color: #e2e8f0; + } + h1 { font-size: 1.5rem; margin-bottom: 1.5rem; } + .grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1rem; + } + .card { + background: #334155; + border-radius: 8px; + padding: 0.75rem; + text-decoration: none; + color: #e2e8f0; + transition: background 0.2s; + } + .card:hover { background: #475569; } + .card img { + width: 100%; + border-radius: 4px; + margin-bottom: 0.5rem; + border: 1px solid #475569; + } + .card span { + font-size: 0.8rem; + word-break: break-all; + } + </style> + </head> + <body> + <h1>OGP 画像一覧（{slugs.length} 枚）</h1> + <div class="grid"> + {slugs.map((slug) => ( + <a href={`/og/${slug}.png`} class="card"> + <img src={`/og/${slug}.png`} alt={slug} loading="lazy" /> + <span>{slug}.png</span> + </a> + ))} + </div> + </body> +</html> |