"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", h3: "h3", hr: "hr", p: "p", pre: "pre", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["今日は、自作ブログにおける", _jsx(_components.strong, { children: "構造化データの対応と SEO 強化" }), "をテーマに、Next.js + MDX を使った実装作業を行いました。この記事ではその内容をまとめておきます。"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "1. はじめに：なぜ構造化データ対応をしたのか？" }), "\n", _jsxs(_components.p, { children: ["最近の Google 検索では、", _jsx(_components.strong, { children: "リッチリザルト" }), "（画像付き、パンくず付きなど）が非常に目立ちます。検索結果で目立たせるには、構造化データの埋め込みが不可欠です。"] }), "\n", _jsxs(_components.p, { children: ["特にブログ記事の場合は ", _jsx(_components.code, { children: "BlogPosting" }), " や ", _jsx(_components.code, { children: "BreadcrumbList" }), " を正しく設定することで、検索結果での表示が改善され、アクセス増加が期待できます。"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "2. 使用技術スタック" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "技術" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "バージョン / 詳細" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "用途" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Next.js" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "15.2.3（App Router）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "フレームワーク本体・SSG/ISR" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "TypeScript" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "strict モード" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "型安全な開発" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "MDX" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "next-mdx-remote" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "記事コンテンツ管理" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Tailwind CSS" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "v4" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "スタイリング" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "構造化データ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "JSON-LD（Schema.org）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "SEO・リッチリザルト対応" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ホスティング" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Vercel" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "デプロイ・Edge Functions" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "3. 実装した主な内容" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "実装内容" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "詳細" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "frontmatter の統一" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "title / description / ogImage / author / date / updated を全記事で統一" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "OGP・Twitter カード対応" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "generateMetadata()" }), " で Open Graph / Twitter Card を動的生成"] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "BlogPosting 構造化データ" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["JSON-LD を ", _jsx("code", { children: "Script" }), " タグで記事ページに動的埋め込み"] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "BreadcrumbList 構造化データ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "パンくずの UI 表示と構造化データを同時に実装" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "author / publisher の明示" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Google Discover 対策として Person / Organization を定義" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "メタ情報の共通化" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "lib/meta.ts" }), " に ", _jsx("code", { children: "baseUrl" }), " / ", _jsx("code", { children: "ogImage" }), " 生成ロジックを集約"] })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["4. ", _jsx(_components.code, { children: "generateMetadata()" }), " による OGP 設定"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// app/blog/[slug]/page.tsx\nimport type { Metadata } from 'next'\nimport { getPostBySlug } from '@/lib/posts'\nimport { getBaseUrl, getOgImage } from '@/lib/meta'\n\nexport async function generateMetadata({ params }: Props): Promise {\n const post = await getPostBySlug(params.slug)\n const baseUrl = getBaseUrl()\n const ogImage = getOgImage(post.frontMatter.ogImage)\n\n return {\n title: `${post.frontMatter.title} | MyBlog`,\n description: post.frontMatter.description,\n openGraph: {\n title: post.frontMatter.title,\n description: post.frontMatter.description,\n url: `${baseUrl}/blog/${params.slug}`,\n images: [{ url: ogImage, width: 1200, height: 630 }],\n type: 'article',\n publishedTime: post.frontMatter.date,\n modifiedTime: post.frontMatter.updated ?? post.frontMatter.date,\n },\n twitter: {\n card: 'summary_large_image',\n title: post.frontMatter.title,\n description: post.frontMatter.description,\n images: [ogImage],\n },\n }\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "5. BlogPosting の構造化データ（JSON-LD）" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "dangerouslySetInnerHTML" }), " を使って JSON-LD 形式のスクリプトを動的に埋め込みます。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/JsonLd.tsx\nimport Script from 'next/script'\nimport { getBaseUrl, getOgImage } from '@/lib/meta'\n\ntype Props = {\n post: Post\n slug: string\n}\n\nexport function BlogPostingJsonLd({ post, slug }: Props) {\n const baseUrl = getBaseUrl()\n const ogImage = getOgImage(post.frontMatter.ogImage)\n\n const jsonLd = {\n '@context': 'https://schema.org',\n '@type': 'BlogPosting',\n headline: post.frontMatter.title,\n description: post.frontMatter.description,\n author: {\n '@type': 'Person',\n name: post.frontMatter.author ?? 'Yasuo Kumagai',\n },\n publisher: {\n '@type': 'Organization',\n name: 'kumagai.app',\n logo: {\n '@type': 'ImageObject',\n url: `${baseUrl}/logo.png`,\n },\n },\n datePublished: post.frontMatter.date,\n dateModified: post.frontMatter.updated ?? post.frontMatter.date,\n image: ogImage,\n mainEntityOfPage: {\n '@type': 'WebPage',\n '@id': `${baseUrl}/blog/${slug}`,\n },\n }\n\n return (\n \n )\n}\n" }) }), "\n", _jsx(_components.h3, { children: "BlogPosting の主要フィールド" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "フィールド" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "型" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "headline" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "string" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "記事タイトル（110文字以内推奨）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "description" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "string" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "記事の概要" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "author" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Person" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "著者情報（Google Discover 対策に重要）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "publisher" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Organization" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "サイト運営者情報・ロゴ URL を含める" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "datePublished" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ISO 8601" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "公開日（例: \"2025-03-28\"）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "dateModified" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ISO 8601" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "最終更新日。未指定の場合は datePublished を使用" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "image" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "URL" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "OGP 画像の URL（リッチリザルトに表示）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "mainEntityOfPage" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "WebPage" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "記事の正規 URL を指定" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "6. パンくずリスト（UI + 構造化データ）" }), "\n", _jsxs(_components.p, { children: ["UI とSEOの両立が目標です。", _jsx(_components.code, { children: "nav" }), " 要素で視覚的なパンくずを実装しつつ、JSON-LD で構造化データも同時に提供します。"] }), "\n", _jsx(_components.h3, { children: "UI コンポーネント" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/Breadcrumb.tsx\nimport Link from 'next/link'\n\ntype BreadcrumbItem = {\n name: string\n href?: string\n}\n\nexport function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {\n return (\n \n )\n}\n" }) }), "\n", _jsx(_components.h3, { children: "使用例" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n" }) }), "\n", _jsx(_components.h3, { children: "BreadcrumbList の構造化データ" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/JsonLd.tsx（追記）\nexport function BreadcrumbJsonLd({ slug, title }: { slug: string; title: string }) {\n const baseUrl = getBaseUrl()\n\n const jsonLd = {\n '@context': 'https://schema.org',\n '@type': 'BreadcrumbList',\n itemListElement: [\n {\n '@type': 'ListItem',\n position: 1,\n name: 'ホーム',\n item: `${baseUrl}/`,\n },\n {\n '@type': 'ListItem',\n position: 2,\n name: 'ブログ',\n item: `${baseUrl}/blog`,\n },\n {\n '@type': 'ListItem',\n position: 3,\n name: title,\n item: `${baseUrl}/blog/${slug}`,\n },\n ],\n }\n\n return (\n \n )\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["7. メタ情報の共通化（", _jsx(_components.code, { children: "lib/meta.ts" }), "）"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "generateMetadata()" }), " と ", _jsx(_components.code, { children: "page.tsx" }), " の両方で ", _jsx(_components.code, { children: "ogImage" }), " や ", _jsx(_components.code, { children: "baseUrl" }), " が必要になるため、共通の ", _jsx(_components.code, { children: "lib/meta.ts" }), " に切り出しました。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// lib/meta.ts\n\nexport function getBaseUrl(): string {\n return process.env.NEXT_PUBLIC_SITE_URL ?? 'https://your-site.com'\n}\n\nexport function getOgImage(ogImage?: string): string {\n const baseUrl = getBaseUrl()\n return ogImage ? `${baseUrl}${ogImage}` : `${baseUrl}/og-image.png`\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "8. 実装中の工夫と学び" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "ポイント" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "内容" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "frontmatter の設計" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "最初にフィールドを統一しておくと、メタタグ・JSON-LD 両方に使い回しやすい" })] }), _jsxs("tr", { children: [_jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "lib/meta.ts" }), " への集約"] }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "baseUrl" }), " / ", _jsx("code", { children: "ogImage" }), " を複数ファイルで使うため共通化。環境変数の一元管理にも効果的"] })] }), _jsxs("tr", { children: [_jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "dangerouslySetInnerHTML" }), " の使用"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "構造化データ（JSON-LD）用途に限れば安全。外部入力をそのまま埋め込むのは NG" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Script コンポーネントへの id 付与" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["複数の JSON-LD を同一ページで使う場合、", _jsx("code", { children: "id" }), " を分けないと重複警告が出る"] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "author / publisher の明示" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Google Discover はコンテンツ制作者の信頼性を重視するため、Person / Organization を必ず設定" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "パンくずの UI と構造化データの一致" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "UI と JSON-LD のパスが異なると Google Search Console で警告が出るため、同じデータを使い回す" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "9. まとめと今後の予定" }), "\n", _jsx(_components.p, { children: "今回の実装で、SEO に強く管理もしやすい Next.js ブログ基盤が完成しました。" }), "\n", _jsx(_components.h3, { children: "今後のロードマップ" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "タスク" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "概要" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "優先度" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "sitemap.xml の自動生成" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "next-sitemap" }), " を導入してすべての記事 URL を自動収録"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "カテゴリ・タグページの構造化データ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "CollectionPage / ItemList スキーマを追加" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "中" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "アーカイブページの構造化データ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "年月別ページにも BreadcrumbList を設定" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "中" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "検索機能の追加" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Client Component 対応の全文検索（Fuse.js など）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "低" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "Google Search Console での確認" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "リッチリザルトテストで JSON-LD が正しく認識されているか確認" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "今後もこのブログ基盤を育てながら、SEO や UI/UX の改善を積み重ねていきます。" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Next.js + MDX ブログ構築記録：構造化データとSEO強化