feat: SEO optimization, add sitemap link to footer and update robots.txt with meta dire… (#1369)

Co-authored-by: Dharamveer singh <[email protected]>
Co-authored-by: Idris Olubisi <[email protected]>

Author: 3 people

astro.config.mjs

@@ -21,7 +21,11 @@ export default defineConfig({
     }),
     react(),
     mdx(),
-    sitemap(),
+    sitemap({
+      priority: 0.9,
+      changefreq: "daily",
+      lastmod: new Date(),
+    }),
     tailwind(),
     partytown({
       config: {

public/robots.txt

@@ -1,3 +1,7 @@
 User-agent: *
 Allow: /
-Sitemap: https://docs.axelar.dev/sitemap-0.xml
+Sitemap: https://docs.axelar.dev/sitemap-0.xml
+
+
+# Meta directives
+INDEX, FOLLOW, MAX-IMAGE-PREVIEW:LARGE, MAX-SNIPPET:-1, MAX-VIDEO-PREVIEW:-1

src/components/footer/footer.astro

@@ -74,6 +74,10 @@ const links = [
         title: "Terms of Use",
         href: "/terms-of-use/",
       },
+      {
+        title: "Sitemap",
+        href: "/sitemap-0.xml",
+      },
     ],
   },
 ];

src/layouts/MainLayout.astro

@@ -12,6 +12,8 @@ type Props = {
   hidden?: boolean;
   notSidebar?: boolean;
   className?: string;
+  publishDate?: string;
+  modifiedDate?: string;
 };
 
 const {
@@ -21,11 +23,11 @@ const {
   hidden,
   notSidebar,
   className,
+  publishDate = new Date().toISOString(),
+  modifiedDate = new Date().toISOString(),
 } = Astro.props;
 
-const shownTitle = title
-  ? title + ` | Axelar Documentation`
-  : "Axelar Documentation";
+const shownTitle = title ? title : "Axelar Documentation";
 const shownDescription =
   description ||
   "The Axelar Documentation tells you how to get started and be successful using Axelar. Axelar allows developers to build interchain dApps that connect to any blockchain. ";
@@ -70,7 +72,58 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
     <meta content="website" property="og:type" />
     <meta content="summary_large_image" name="twitter:card" />
     <meta content="width=device-width, initial-scale=1" name="viewport" />
-    {hidden && <meta content="noindex" name="robots" />}
+    {
+      hidden ? (
+        <meta content="noindex" name="robots" />
+      ) : (
+        <meta
+          name="robots"
+          content="INDEX, FOLLOW, MAX-IMAGE-PREVIEW:LARGE, MAX-SNIPPET:-1, MAX-VIDEO-PREVIEW:-1"
+        />
+      )
+    }
+
+    {
+      publishDate && (
+        <meta property="article:published_time" content={publishDate} />
+      )
+    }
+    {
+      modifiedDate && (
+        <meta property="article:modified_time" content={modifiedDate} />
+      )
+    }
+
+    <script
+      type="application/ld+json"
+      set:html={JSON.stringify({
+        "@context": "https://schema.org",
+        "@type": "Article",
+        mainEntityOfPage: {
+          "@type": "WebPage",
+          "@id": canonicalURL.toString(),
+        },
+        headline: shownTitle,
+        description: shownDescription,
+        image: new URL(image, Astro.url).toString(),
+        author: {
+          "@type": "Organization",
+          name: "Axelar",
+          url: "https://docs.axelar.dev",
+        },
+        publisher: {
+          "@type": "Organization",
+          name: "Axelar",
+          logo: {
+            "@type": "ImageObject",
+            url: "https://docs.axelar.dev/images/Axelar%20Logo%20Full%[email protected]",
+          },
+        },
+        datePublished: publishDate,
+        dateModified: modifiedDate || publishDate,
+      })}
+    />
+
     <link
       rel="sitemap"
       type="application/xml"
@@ -163,7 +216,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
       localStorage.setItem("theme", isDark ? "dark" : "light");
       document.documentElement.setAttribute(
         "data-theme",
-        isDark ? "vitesse-dark" : "light-plus"
+        isDark ? "vitesse-dark" : "light-plus",
       );
     };
 

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

@@ -24,9 +24,49 @@ const { doc } = Astro.props;
 
 const pathname = Astro.url.pathname;
 const { Content, headings } = await doc.render();
+
+// Extract first image from content
+const extractFirstImage = (content: string) => {
+  const imageRegex = /!\[.*?\]\((.*?)\)/;
+  const match = content.match(imageRegex);
+  return match ? match[1] : undefined;
+};
+
+const firstImage = extractFirstImage(doc.body);
 ---
 
-<MainLayout title={headings.find((h) => h.depth === 1)?.text}>
+<MainLayout
+  image={firstImage}
+  title={headings.find((h) => h.depth === 1)?.text}
+  description={(() => {
+    // Get the first h2 heading
+    const h2Heading = headings.find((h) => h.depth === 2)?.text;
+    // Get the first paragraph from the raw content and clean it
+    const firstParagraph = doc.body
+      ?.split("\n\n")[0]
+      ?.replace(/^#.*\n/, "") // Remove title
+      ?.replace(/```[\s\S]*?```/g, "") // Remove code blocks
+      ?.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1") // Convert markdown links to plain text
+      ?.replace(/#/g, "") // Remove all # characters
+      ?.replace(/\*\*/g, "") // Remove bold
+      ?.replace(/\*/g, "") // Remove italic
+      ?.replace(/`/g, "") // Remove inline code
+      ?.replace(/\n/g, " ") // Replace newlines with spaces
+      ?.replace(/\s+/g, " ") // Replace multiple spaces with single space
+      ?.trim();
+
+    // Limit description length to 160 characters
+    const maxLength = 160;
+    const combined =
+      firstParagraph && h2Heading
+        ? `${firstParagraph} ${h2Heading}`
+        : h2Heading || firstParagraph || "";
+
+    return combined.length > maxLength
+      ? combined.substring(0, maxLength - 3) + "..."
+      : combined;
+  })()}
+>
   <div class="grid grid-cols-1 lg:grid-cols-12 bg-[#FFFFFF] dark:bg-background">
     <WorldMap className="lg:col-span-9 2xl:col-span-10 w-full flex-1 ">
       <div class="min-h-[90dvh] sub-container pb-20 py-20 flex flex-col gap-10">