[{"data":1,"prerenderedAt":624},["ShallowReactive",2],{"content-/ogp-image-generation-plan":3,"all-pages-for-dir":602,"related-/ogp-image-generation-plan":603,"og-image-/ogp-image-generation-plan":623},{"id":4,"title":5,"body":6,"category":588,"concepts":588,"description":589,"extension":590,"meta":591,"navigation":113,"ogImage":588,"path":592,"project_name":588,"published":593,"publishedAt":594,"seo":595,"source":588,"stem":596,"tags":597,"todo":588,"unpublished":593,"updatedAt":594,"__hash__":601},"pages/2025-12/2025-12-23/ogp-image-generation-plan.md","OGP画像自動生成 実装ガイド",{"type":7,"value":8,"toc":572},"minimark",[9,13,17,21,24,47,50,55,310,314,319,333,347,350,405,411,415,423,426,429,444,447,453,461,464,482,485,507,510,568],[10,11,5],"h1",{"id":12},"ogp画像自動生成-実装ガイド",[14,15,16],"h2",{"id":16},"概要",[18,19,20],"p",{},"SNSでシェア時にタイトル+アイコンを含む画像を自動生成する機能。ZennやNoteのようにシェアプレビューで記事タイトルが画像に表示される。",[14,22,23],{"id":23},"使用技術",[25,26,27,35,41],"ul",{},[28,29,30,34],"li",{},[31,32,33],"strong",{},"nuxt-og-image v5",": Nuxt公式のOG画像生成モジュール",[28,36,37,40],{},[31,38,39],{},"Satori",": VueコンポーネントをSVGに変換",[28,42,43,46],{},[31,44,45],{},"Google Fonts",": Noto Sans JP（自動ダウンロード）",[14,48,49],{"id":49},"実装内容",[51,52,54],"h3",{"id":53},"nuxtconfigts","nuxt.config.ts",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"language-typescript shiki shiki-themes vitesse-light vitesse-light","modules: [\n  // ... 他のモジュール\n  \"nuxt-og-image\"\n],\n\nogImage: {\n  defaults: {\n    width: 1200,\n    height: 630,\n    renderer: 'satori'\n  },\n  fonts: [\n    'Noto+Sans+JP:400',\n    'Noto+Sans+JP:700'\n  ],\n  runtimeBrowser: false,\n  compatibility: {\n    prerender: {\n      satori: 'node',\n      resvg: 'node'\n    }\n  }\n}\n","typescript","",[63,64,65,81,88,102,108,115,126,136,151,164,181,187,197,211,221,227,241,251,261,278,292,298,304],"code",{"__ignoreMap":61},[66,67,70,74,78],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"senZ8","modules",[66,75,77],{"class":76},"shFtX",":",[66,79,80],{"class":76}," [\n",[66,82,84],{"class":68,"line":83},2,[66,85,87],{"class":86},"sxvE3","  // ... 他のモジュール\n",[66,89,91,95,99],{"class":68,"line":90},3,[66,92,94],{"class":93},"sMJiu","  \"",[66,96,98],{"class":97},"sdGka","nuxt-og-image",[66,100,101],{"class":93},"\"\n",[66,103,105],{"class":68,"line":104},4,[66,106,107],{"class":76},"],\n",[66,109,111],{"class":68,"line":110},5,[66,112,114],{"emptyLinePlaceholder":113},true,"\n",[66,116,118,121,123],{"class":68,"line":117},6,[66,119,120],{"class":72},"ogImage",[66,122,77],{"class":76},[66,124,125],{"class":76}," {\n",[66,127,129,132,134],{"class":68,"line":128},7,[66,130,131],{"class":72},"  defaults",[66,133,77],{"class":76},[66,135,125],{"class":76},[66,137,139,142,144,148],{"class":68,"line":138},8,[66,140,141],{"class":72},"    width",[66,143,77],{"class":76},[66,145,147],{"class":146},"sM54T"," 1200",[66,149,150],{"class":76},",\n",[66,152,154,157,159,162],{"class":68,"line":153},9,[66,155,156],{"class":72},"    height",[66,158,77],{"class":76},[66,160,161],{"class":146}," 630",[66,163,150],{"class":76},[66,165,167,170,172,175,178],{"class":68,"line":166},10,[66,168,169],{"class":72},"    renderer",[66,171,77],{"class":76},[66,173,174],{"class":93}," '",[66,176,177],{"class":97},"satori",[66,179,180],{"class":93},"'\n",[66,182,184],{"class":68,"line":183},11,[66,185,186],{"class":76},"  },\n",[66,188,190,193,195],{"class":68,"line":189},12,[66,191,192],{"class":72},"  fonts",[66,194,77],{"class":76},[66,196,80],{"class":76},[66,198,200,203,206,209],{"class":68,"line":199},13,[66,201,202],{"class":93},"    '",[66,204,205],{"class":97},"Noto+Sans+JP:400",[66,207,208],{"class":93},"'",[66,210,150],{"class":76},[66,212,214,216,219],{"class":68,"line":213},14,[66,215,202],{"class":93},[66,217,218],{"class":97},"Noto+Sans+JP:700",[66,220,180],{"class":93},[66,222,224],{"class":68,"line":223},15,[66,225,226],{"class":76},"  ],\n",[66,228,230,233,235,239],{"class":68,"line":229},16,[66,231,232],{"class":72},"  runtimeBrowser",[66,234,77],{"class":76},[66,236,238],{"class":237},"sHkkW"," false",[66,240,150],{"class":76},[66,242,244,247,249],{"class":68,"line":243},17,[66,245,246],{"class":72},"  compatibility",[66,248,77],{"class":76},[66,250,125],{"class":76},[66,252,254,257,259],{"class":68,"line":253},18,[66,255,256],{"class":72},"    prerender",[66,258,77],{"class":76},[66,260,125],{"class":76},[66,262,264,267,269,271,274,276],{"class":68,"line":263},19,[66,265,266],{"class":72},"      satori",[66,268,77],{"class":76},[66,270,174],{"class":93},[66,272,273],{"class":97},"node",[66,275,208],{"class":93},[66,277,150],{"class":76},[66,279,281,284,286,288,290],{"class":68,"line":280},20,[66,282,283],{"class":72},"      resvg",[66,285,77],{"class":76},[66,287,174],{"class":93},[66,289,273],{"class":97},[66,291,180],{"class":93},[66,293,295],{"class":68,"line":294},21,[66,296,297],{"class":76},"    }\n",[66,299,301],{"class":68,"line":300},22,[66,302,303],{"class":76},"  }\n",[66,305,307],{"class":68,"line":306},23,[66,308,309],{"class":76},"}\n",[51,311,313],{"id":312},"og画像テンプレート","OG画像テンプレート",[18,315,316],{},[63,317,318],{},"apps/web/app/components/OgImage/OgImageTemplate.vue",[25,320,321,324,327,330],{},[28,322,323],{},"紫グラデーション背景",[28,325,326],{},"ターミナルアイコン（SVG、text要素は使用不可）",[28,328,329],{},"記事タイトル（中央配置）",[28,331,332],{},"サイト名（右下）",[18,334,335,338,339,342,343,346],{},[31,336,337],{},"注意",": SatoriはSVGの",[63,340,341],{},"\u003Ctext>","要素をサポートしていない。",[63,344,345],{},"\u003Cpath>","に変換するか、テキストはVueテンプレートで表示する。",[51,348,349],{"id":349},"ページでの使用",[56,351,353],{"className":58,"code":352,"language":60,"meta":61,"style":61},"// defineOgImage（v5のAPI）を使用\ndefineOgImage({\n  component: 'OgImageTemplate',\n  title: '記事タイトル'\n});\n",[63,354,355,360,368,386,400],{"__ignoreMap":61},[66,356,357],{"class":68,"line":69},[66,358,359],{"class":86},"// defineOgImage（v5のAPI）を使用\n",[66,361,362,365],{"class":68,"line":83},[66,363,364],{"class":72},"defineOgImage",[66,366,367],{"class":76},"({\n",[66,369,370,374,377,379,382,384],{"class":68,"line":90},[66,371,373],{"class":372},"sz8Xr","  component",[66,375,376],{"class":76},": ",[66,378,208],{"class":93},[66,380,381],{"class":97},"OgImageTemplate",[66,383,208],{"class":93},[66,385,150],{"class":76},[66,387,388,391,393,395,398],{"class":68,"line":104},[66,389,390],{"class":372},"  title",[66,392,376],{"class":76},[66,394,208],{"class":93},[66,396,397],{"class":97},"記事タイトル",[66,399,180],{"class":93},[66,401,402],{"class":68,"line":110},[66,403,404],{"class":76},"});\n",[18,406,407,410],{},[63,408,409],{},"useSeoMeta","でogImage/twitterImageは設定不要。nuxt-og-imageが自動で設定する。",[14,412,414],{"id":413},"og画像デザイン","OG画像デザイン",[56,416,421],{"className":417,"code":419,"language":420},[418],"language-text","┌──────────────────────────────────────────────────────┐\n│  ████████████████████ (グラデーション背景)          │\n│                                                      │\n│                   [ターミナルアイコン]              │\n│                                                      │\n│              記事タイトル                            │\n│         (大きく白文字で中央配置)                    │\n│                                                      │\n│                              log.eurekapu.com        │\n└──────────────────────────────────────────────────────┘\nサイズ: 1200 x 630px\n","text",[63,422,419],{"__ignoreMap":61},[14,424,425],{"id":425},"確認方法",[51,427,428],{"id":428},"ローカル確認",[56,430,434],{"className":431,"code":432,"language":433,"meta":61,"style":61},"language-bash shiki shiki-themes vitesse-light vitesse-light","pnpm dev\n","bash",[63,435,436],{"__ignoreMap":61},[66,437,438,441],{"class":68,"line":69},[66,439,440],{"class":72},"pnpm",[66,442,443],{"class":97}," dev\n",[18,445,446],{},"個別ページのOG画像URL:",[56,448,451],{"className":449,"code":450,"language":420},[418],"# トップページ\nhttp://localhost:3000/__og-image__/image/og.png\n\n# 記事ページ\nhttp://localhost:3000/__og-image__/image/2025-12-23/記事スラッグ/og.png\n",[63,452,450],{"__ignoreMap":61},[18,454,455,376,457,460],{},[31,456,337],{},[63,458,459],{},"/__og-image__/","（一覧ページ）は開発モードでは動作しない。Nuxt DevToolsまたは個別URLで確認する。",[51,462,463],{"id":463},"デプロイ後確認",[25,465,466,475],{},[28,467,468],{},[469,470,474],"a",{"href":471,"rel":472},"https://rakko.tools/tools/9/",[473],"nofollow","OGP確認ツール",[28,476,477],{},[469,478,481],{"href":479,"rel":480},"https://cards-dev.twitter.com/validator",[473],"Twitter Card Validator",[14,483,484],{"id":484},"生成フロー",[486,487,488,494,497,504],"ol",{},[28,489,490,493],{},[63,491,492],{},"pnpm generate","を実行",[28,495,496],{},"nuxt-og-imageが全ページを巡回",[28,498,499,500,503],{},"各ページのOG画像を",[63,501,502],{},"dist/__og-image__/","に生成",[28,505,506],{},"静的ファイルとしてCloudflare Pagesにデプロイ",[14,508,509],{"id":509},"変更ファイル一覧",[511,512,513,526],"table",{},[514,515,516],"thead",{},[517,518,519,523],"tr",{},[520,521,522],"th",{},"ファイル",[520,524,525],{},"変更内容",[527,528,529,539,549,558],"tbody",{},[517,530,531,536],{},[532,533,534],"td",{},[63,535,54],{},[532,537,538],{},"nuxt-og-imageモジュール追加・設定",[517,540,541,546],{},[532,542,543],{},[63,544,545],{},"app/pages/[...slug].vue",[532,547,548],{},"defineOgImage追加",[517,550,551,556],{},[532,552,553],{},[63,554,555],{},"app/pages/index.vue",[532,557,548],{},[517,559,560,565],{},[532,561,562],{},[63,563,564],{},"app/components/OgImage/OgImageTemplate.vue",[532,566,567],{},"新規作成",[569,570,571],"style",{},"html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}",{"title":61,"searchDepth":83,"depth":83,"links":573},[574,575,576,581,582,586,587],{"id":16,"depth":83,"text":16},{"id":23,"depth":83,"text":23},{"id":49,"depth":83,"text":49,"children":577},[578,579,580],{"id":53,"depth":90,"text":54},{"id":312,"depth":90,"text":313},{"id":349,"depth":90,"text":349},{"id":413,"depth":83,"text":414},{"id":425,"depth":83,"text":425,"children":583},[584,585],{"id":428,"depth":90,"text":428},{"id":463,"depth":90,"text":463},{"id":484,"depth":83,"text":484},{"id":509,"depth":83,"text":509},null,"SNSでシェア時にタイトル+アイコンを含む画像を自動生成する機能の実装ガイド","md",{},"/ogp-image-generation-plan",false,"2025-12-23T00:00:00.000Z",{"title":5,"description":589},"2025-12/2025-12-23/ogp-image-generation-plan",[598,599,600,98],"OGP","Nuxt","SEO","OTOJcotp-hxvzFUnUMcpeznJZGRhP-z0BD7HS_s1gWM",[],[604,608,611,615,619],{"title":605,"path":606,"publishedAt":607},"Cloudflare Workers Routes でOGPシェアURLのSEO問題を解決","/cloudflare-workers-routes-ogp-solution","2025-12-25T00:00:00.000Z",{"title":609,"path":610,"publishedAt":607},"OGPシェアURL改善計画 - SEO効果を最大化する設計","/ogp-share-url-seo-improvement",{"title":612,"path":613,"publishedAt":614},"移行サイトのSEO・AI-SEO改善を1日で回した — 画像altを480件、記事の要点を203本、OG画像を署名付きに","/wordpress-nuxt-ai-seo-phase-c","2026-07-27T00:00:00.000Z",{"title":616,"path":617,"publishedAt":618},"Google Search Console分析から内部リンク実装へ — Nuxtブログに関連記事セクションとタグページ553枚を一日で載せた","/gsc-internal-linking-implementation","2026-07-19T00:00:00.000Z",{"title":620,"path":621,"publishedAt":622},"Google Search Console 分析で見つけた機会キーワードに即日対応した記録 ― 解説記事の量産と SEO 修正を1日で消化する","/gsc-opportunity-keywords-execution","2026-06-09T00:00:00.000Z","https://log.eurekapu.com/og/blog/ogp-image-generation-plan.png?v=2025-12-23T00%3A00%3A00.000Z&title=OGP%E7%94%BB%E5%83%8F%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%20%E5%AE%9F%E8%A3%85%E3%82%AC%E3%82%A4%E3%83%89&author=Kei%20Komatsu&sig=49f0bf849f0473ee",1785654688979]