feat: enhance Open Graph and Twitter metadata for improved sharing and SEO

AR10Dev · web-flow · commit d4b71f421934 · 2026-04-08T07:05:48.000Z
diff --git a/astro.config.ts b/astro.config.ts
@@ -2,10 +2,10 @@ import mdx from "@astrojs/mdx";
 import partytown from "@astrojs/partytown";
 import sitemap from "@astrojs/sitemap";
 import solid from "@astrojs/solid-js";
+import rehypeD2 from "@beoe/rehype-d2";
 import tailwindcss from "@tailwindcss/vite";
 import AstroPWA from "@vite-pwa/astro";
 import { defineConfig } from "astro/config";
-import rehypeD2 from "@beoe/rehype-d2";
 import rehypeCopyCodeButton from "./src/lib/rehypeCopyCodeButton";
 
 // https://astro.build/config
diff --git a/src/components/HeadSEO.astro b/src/components/HeadSEO.astro
@@ -61,6 +61,7 @@ const {
 <meta property="og:image:alt" content={title} />
 <meta property="og:image:width" content="1200" />
 <meta property="og:image:height" content="630" />
+<meta property="og:image:type" content="image/png" />
 <meta property="og:site_name" content="Avaab Razzaq - AI Growth Engineer" />
 <meta property="og:locale" content="en_US" />
 
@@ -71,6 +72,10 @@ const {
 <meta name="twitter:description" content={description} />
 <meta name="twitter:image" content={ogImage} />
 <meta name="twitter:image:alt" content={title} />
+<meta name="twitter:label1" content="Built by" />
+<meta name="twitter:data1" content="Avaab Razzaq" />
+<meta name="twitter:label2" content="Based in" />
+<meta name="twitter:data2" content="Miami, FL" />
 
 <meta name="theme-color" content="#01696f" media="(prefers-color-scheme: light)" />
 <meta name="theme-color" content="#4f98a3" media="(prefers-color-scheme: dark)" />
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -66,6 +66,8 @@ const currentPath = Astro.url.pathname;
 <!doctype html>
 <html lang="en" class="scroll-smooth">
   <head>
+    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
+    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
     {shouldLoadAnalytics && (
       <>
         <!-- Google Analytics -->
@@ -85,6 +87,7 @@ const currentPath = Astro.url.pathname;
     />
 
     {publishedTime && <meta property="article:published_time" content={publishedTime} />}
+  {publishedTime && <meta property="article:author" content={author} />}
     {modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}
 
     <script is:inline set:html={themeInitScript}></script>
