Improve SEO for Context7 guide and add og:image to Metadata component

Author: ppekrol

guides/vibe-coding-with-ravendb-and-context7.mdx

@@ -1,8 +1,8 @@
 ---
 title: "Vibe Coding with RavenDB and Context7"
-tags: [getting-started, ai]
+tags: [getting-started, ai, integration]
 icon: "ai"
-description: "Learn how to set up Context7 MCP with OpenAI Codex in VS Code to give your AI assistant direct access to RavenDB documentation — faster, context-rich vibe coding with fewer interruptions."
+description: "Set up Context7 MCP with OpenAI Codex in VS Code to give your AI direct access to RavenDB docs — faster, context-rich vibe coding with fewer interruptions."
 keywords: [vibe coding, Context7, MCP, model context protocol, RavenDB, AI coding assistant, OpenAI Codex, VS Code, NoSQL prototype]
 publishedAt: 2026-03-09
 see_also:

src/theme/DocItem/Metadata/index.tsx

@@ -32,6 +32,7 @@ export default function MetadataWrapper(props: Props): ReactNode {
     const authorKey = frontMatter.author as string | undefined;
     const authorInfo = authorKey ? authorsData[authorKey as keyof typeof authorsData] : null;
     const publishedAt = frontMatter.publishedAt as string | undefined;
+    const keywords = frontMatter.keywords as string[] | undefined;
 
     const ogImageUrl = `${baseUrl}/img/social-card.jpg`;
 
@@ -52,6 +53,7 @@ export default function MetadataWrapper(props: Props): ReactNode {
                         ? { dateModified: publishedAt }
                         : {}),
                   inLanguage: "en",
+                  ...(keywords?.length ? { keywords } : {}),
                   ...(authorInfo
                       ? {
                             author: {
@@ -110,6 +112,7 @@ export default function MetadataWrapper(props: Props): ReactNode {
                 {title && <meta property="og:title" content={title} />}
                 <meta property="og:type" content="article" />
                 <meta property="og:url" content={canonicalUrl} />
+                <meta property="og:image" content={ogImageUrl} />
                 <meta name="twitter:card" content="summary_large_image" />
                 {title && <meta name="twitter:title" content={title} />}
                 {description && <meta name="twitter:description" content={description} />}