feat: add reading time and article section metadata for improved SEO

Author: AR10Dev

src/components/HeadSEO.astro

@@ -9,6 +9,7 @@ type Props = {
   robots?: string;
   keywords?: string;
   twitterHandle?: string;
+  readingTime?: string;
   structuredData?: Record<string, unknown>;
 };
 
@@ -21,6 +22,7 @@ const {
   author = "Avaab Razzaq",
   robots = "index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1",
   keywords,
+  readingTime,
   structuredData,
 } = Astro.props as Props;
 ---
@@ -73,8 +75,17 @@ const {
 <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" />
+{readingTime ? (
+  <>
+    <meta name="twitter:label2" content="Reading time" />
+    <meta name="twitter:data2" content={`${readingTime} min read`} />
+  </>
+) : (
+  <>
+    <meta name="twitter:label2" content="Based in" />
+    <meta name="twitter:data2" content="Miami, FL" />
+  </>
+)}
 
 <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
 <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />

src/layouts/BaseLayout.astro

@@ -16,6 +16,7 @@ type Props = {
   canonicalUrl?: string;
   ogImage?: string;
   ogType?: "website" | "article" | "profile";
+  articleSection?: string;
   structuredData?: Record<string, unknown>;
   noIndex?: boolean;
   keywords?: string;
@@ -34,11 +35,13 @@ const {
   canonicalUrl: canonicalUrlProp,
   ogImage = new URL("/og-ai-growth-engineer.png", siteUrl).toString(),
   ogType = "website",
+  articleSection,
   structuredData,
   noIndex = false,
   keywords,
   publishedTime,
   modifiedTime,
+  readingTime,
   author = "Avaab Razzaq",
   robots,
 } = Astro.props as Props;
@@ -83,6 +86,7 @@ const currentPath = Astro.url.pathname;
       author={author}
       robots={resolvedRobots}
       keywords={finalKeywords}
+      readingTime={readingTime}
       structuredData={structuredData}
     />
 
@@ -91,6 +95,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} />}
+    {articleSection && <meta property="article:section" content={articleSection} />}
 
     <script is:inline set:html={themeInitScript}></script>
   </head>

src/pages/about/index.astro

@@ -96,6 +96,7 @@ const structuredData = {
         "https://github.com/AR10Dev",
         "https://linkedin.com/in/avaab-razzaq-937b89366",
         "https://twitter.com/itsmeAvaab",
+        "https://x.com/itsmeAvaab",
       ],
       address: {
         "@type": "PostalAddress",
@@ -116,6 +117,32 @@ const structuredData = {
       hasOccupation: {
         "@type": "Occupation",
         name: "AI Growth Engineer",
+        description:
+          "Builds AI automation systems, full-stack web applications, and implements technical SEO strategies that drive organic growth for businesses.",
+        occupationalCategory: "15-1299.09",
+        occupationLocation: {
+          "@type": "City",
+          name: "Miami",
+          containedInPlace: {
+            "@type": "State",
+            name: "Florida",
+            containedInPlace: {
+              "@type": "Country",
+              name: "United States",
+            },
+          },
+        },
+        estimatedSalary: {
+          "@type": "MonetaryAmountDistribution",
+          name: "base",
+          currency: "USD",
+          duration: "P1H",
+          percentile10: 150,
+          percentile25: 175,
+          median: 200,
+          percentile75: 250,
+          percentile90: 300,
+        },
       },
       hasCredential: credentials.map((cred) => ({
         "@type": "EducationalOccupationalCredential",

src/pages/blog/[...slug].astro

@@ -146,11 +146,10 @@ function formatDate(date: Date): string {
 // Calculate reading time if not in frontmatter
 const wordCount = (post.body ?? "").split(/\s+/).filter(Boolean).length;
 const readingTimeMinutes = post.data.readingTime || Math.ceil(wordCount / 200);
-const readingTimeString = `${readingTimeMinutes} ${readingTimeMinutes === 1 ? "minute" : "minutes"}`;
 
 const publishedTimeISO = post.data.publishDate
   ? new Date(post.data.publishDate).toISOString()
-  : null;
+  : undefined;
 
 const modifiedTimeISO = post.data.updatedDate
   ? new Date(post.data.updatedDate).toISOString()
@@ -294,14 +293,13 @@ const structuredData = {
   canonicalUrl={canonicalUrl} 
   ogImage={ogImage} 
   ogType="article"
-  publishedTime={publishedTimeISO ?? undefined}
-  modifiedTime={modifiedTimeISO ?? undefined}
+  publishedTime={publishedTimeISO}
+  modifiedTime={modifiedTimeISO}
+  articleSection={articleSection}
   author={articleAuthorUrl}
-  readingTime={readingTimeString}
+  readingTime={post.data.readingTime ? String(post.data.readingTime) : undefined}
   structuredData={structuredData}
 >
-  <meta slot="head" property="article:section" content={articleSection} />
-
   <article class="min-h-screen py-12">
     <div class={CONTAINER_CLASSES.section}>
       <div class="mx-auto max-w-3xl">