feature - added SEO

2024-03-27 10:02:47 +08:00 · 2024-03-27 10:02:47 +08:00 · 8d2e889770
parent 4b26a6caee
commit 8d2e889770
8 changed files with 207 additions and 19 deletions
--- a/Frontend/app/(public)/blogs/[slug]/page.tsx
+++ b/Frontend/app/(public)/blogs/[slug]/page.tsx
@ -1,13 +1,11 @@
 import BlogContent from "@/sections/BlogContent";
 import getPostMetadata from "@/utils/getPostMetaData";
-import { cookies, headers } from "next/headers";
+import { headers } from "next/headers";
 import React from "react";
 import Spacer from "@/components/Utilities/Spacer";
 import pb from "@/lib/pocketbase";
 import Footer from "@/components/Footer";
 import Background from "@/components/Utilities/Background";
-import { getUserFromCookie } from "@/lib/auth";
-import { User } from "@/types";

 export async function generateMetadata({
  params,
@ -24,10 +22,49 @@ export async function generateMetadata({
  pb.autoCancellation(true);

  return {
-    title: `${post.title}`,
-    description: `${post.subtitle}`,
+    title: `${post.title} | FastPocket`,
+    authors: [
+      {
+        name: post.author || "Samuel Wyndham",
+      },
+    ],
+    description: post.description,
+    keywords: post.keywords,
+    openGraph: {
+      title: `${post.title} | FastPocket`,
+      description: post.description,
+      type: "article",
+      url: `https://${siteURL}/blogs/${post.slug}`,
+      publishedTime: post.created,
+      modifiedTime: post.updated,
+      authors: [`https://${siteURL}/about`],
+      images: [
+        {
+          url: `${post.imageUrl}`,
+          width: 1024,
+          height: 576,
+          alt: post.title,
+          type: "image/png",
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      site: "@meinbiz",
+      creator: "@meinbiz",
+      title: `${post.title} | FastPocket`,
+      description: post.description,
+      images: [
+        {
+          url: `${post.imageUrl}`,
+          width: 1024,
+          height: 576,
+          alt: post.title,
+        },
+      ],
+    },
    alternates: {
-      canonical: `https://${siteURL}/blogs/${slug}`,
+      canonical: `https://${siteURL}/blogs/${post.slug}`,
    },
  };
 }
--- a/Frontend/app/layout.tsx
+++ b/Frontend/app/layout.tsx
@ -1,5 +1,5 @@
+/* eslint-disable @next/next/no-before-interactive-script-outside-document */
 import "./globals.css";
-import type { Metadata } from "next";
 import "../app/globals.css";
 import { Arimo, Indie_Flower } from "next/font/google";
 import { ToastContainer } from "react-toastify";
@ -8,8 +8,8 @@ import Header from "@/components/Header";
 import { cookies } from "next/headers";
 import { isAuthenticated } from "@/lib/auth";
 import { GTagProvider, PHProvider, ThemeProvider } from "./providers";
-import { title } from "@/constants";
 import Script from "next/script";
+import dynamic from "next/dynamic";

 const raleway = Arimo({
  variable: "--body-font",
@ -27,11 +27,6 @@ const indieFlower = Indie_Flower({
  subsets: ["latin"],
 });

-export const metadata: Metadata = {
-  title: title,
-  description: title,
-};
-
 export default async function RootLayout({
  children,
 }: {
@ -64,18 +59,20 @@ export default async function RootLayout({
              theme="colored"
            />
          </ThemeProvider>
+          <Script
+            id="promotekit-jq"
+            src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"
+            strategy="beforeInteractive"
+          />
          <Script
            id="promotekit-js"
            async
            src="https://cdn.promotekit.com/promotekit.js"
            data-promotekit="41c8e339-d2aa-414b-88b8-31b6d6346e2b"
          />
-          <Script
-            id="promotekit-jq"
-            src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"
-          />
          <Script
            id="promotekit"
+            async
            dangerouslySetInnerHTML={{
              __html: `
            $(document).ready(function(){
--- a/Frontend/app/page.tsx
+++ b/Frontend/app/page.tsx
@ -12,6 +12,56 @@ import CardsFeature from "@/sections/Features/CardsFeature";
 import FAQ from "@/sections/FAQ/RightAlignedBorderBottomFAQ";
 import VerticalTabsFeature from "@/sections/Features/VerticalTabsFeature";

+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Pocketbase, Stripe, Next.js, Boilerplate | FastPocket",
+  description:
+    "FastPocket - Is a boilerplate codebase for everyone to build a product quickly.",
+  keywords: [
+    "pocketbase",
+    "stripe",
+    "next.js",
+    "boilerplate",
+    "template",
+    "codebase",
+  ],
+  openGraph: {
+    url: "https://fastpocket.dev",
+    type: "website",
+    title: "Pocketbase, Stripe, Next.js, Boilerplate | FastPocket",
+    description:
+      "FastPocket - Is a boilerplate codebase for everyone to build a product quickly.",
+    images: [
+      {
+        url: "https://fastpocket.dev/images/home/thumbnail.png",
+        width: 1200,
+        height: 630,
+        alt: "fastpocket.degv",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Pocketbase, Stripe, Next.js, Boilerplate | FastPocket",
+    description:
+      "fastpocket.dev - Programming blog for everyone to learn Elastic Stack, Next.js, Python, JavaScript, React, Machine Learning, Data Science, and more.",
+    creator: "@meinbiz",
+    site: "@meinbiz",
+    images: [
+      {
+        url: "https://fastpocket.dev/images/home/thumbnail.png",
+        width: 1200,
+        height: 630,
+        alt: "fastpocket.degv",
+      },
+    ],
+  },
+  alternates: {
+    canonical: "https://fastpocket.dev",
+  },
+};
+
 export default function Home() {
  return (
    <>
--- a/Frontend/app/sitemap.ts
+++ b/Frontend/app/sitemap.ts
@ -0,0 +1,52 @@
+  import getPostMetadata from "@/utils/getPostMetaData";
+import { MetadataRoute } from "next";
+   
+  export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+    const defaultPages = [
+      {
+        url: "https://fastpocket.dev",
+        lastModified: new Date(),
+        changeFrequency: "daily",
+        priority: 1
+      },
+      {
+        url: "https://fastpocket.dev/about",
+        lastModified: new Date(),
+        changeFrequency: "monthly",
+        priority: 0.9
+      },
+      {
+        url: "https://fastpocket.dev/pricing",
+        lastModified: new Date(),
+        changeFrequency: "monthly",
+        priority: 0.9
+      },
+      {
+        url: "https://fastpocket.dev/blogs",
+        lastModified: new Date(),
+        changeFrequency: "monthly",
+        priority: 0.9
+      },
+      {
+        url: "https://fastpocket.dev/whatsnew",
+        lastModified: new Date(),
+        changeFrequency: "monthly",
+        priority: 0.9
+      }
+      // other pages
+    ];
+   
+    const postSlugs = await getPostMetadata();
+   
+    const sitemap = [
+      ...defaultPages,
+      ...postSlugs.map((e: any) => ({
+        url: `https://fastpocket.dev/blogs/${e.slug}`,
+        lastModified: e.modified,
+        changeFrequency: "daily",
+        priority: 0.8
+      } as any))
+    ];
+   
+    return sitemap;
+  }
--- a/Frontend/components/Header.tsx
+++ b/Frontend/components/Header.tsx
@ -5,7 +5,7 @@ import Navigation from "@/components/Navigation";
 import ModalSignUp from "@/components/Modals/ModalSignUp";
 import ModalSignIn from "@/components/Modals/ModalSignIn";
 import { getAuthCookie, getUser, logout } from "@/app/actions";
-import { SourceModal, User } from "@/types";
+import { User } from "@/types";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import pb from "@/lib/pocketbase";
 import { useTheme } from "next-themes";
@ -32,7 +32,7 @@ export default function Header({ isUserLoggedIn }: HeaderProps) {
  return (
    <header className="absolute w-full z-30">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 md:pt-6">
-        <div className="flex items-center justify-between h-20 items-center">
+        <div className="flex items-center justify-between h-20">
          <Navigation isUserLoggedIn={isUserLoggedIn} />

          {/* Desktop navigation */}
--- a/Frontend/next-sitemap.config.js
+++ b/Frontend/next-sitemap.config.js
@ -0,0 +1,6 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+    siteUrl: process.env.SITE_URL || 'https://fastpocket.dev',
+    generateRobotsTxt: true, // (optional)
+    generateRobotsTxt: true,
+  }
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@ -24,6 +24,7 @@
        "gray-matter": "^4.0.3",
        "next": "^14.1.0",
        "next-qrcode": "^2.5.1",
+        "next-sitemap": "^4.2.3",
        "next-themes": "^0.2.1",
        "node-fetch-commonjs": "^3.3.2",
        "pocketbase": "^0.18.0",
@ -81,6 +82,11 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@corex/deepmerge": {
+      "version": "4.0.43",
+      "resolved": "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.43.tgz",
+      "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ=="
+    },
    "node_modules/@emotion/hash": {
      "version": "0.9.1",
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
@ -3625,6 +3631,37 @@
        "react": ">=17.0.0"
      }
    },
+    "node_modules/next-sitemap": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/next-sitemap/-/next-sitemap-4.2.3.tgz",
+      "integrity": "sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==",
+      "funding": [
+        {
+          "url": "https://github.com/iamvishnusankar/next-sitemap.git"
+        }
+      ],
+      "dependencies": {
+        "@corex/deepmerge": "^4.0.43",
+        "@next/env": "^13.4.3",
+        "fast-glob": "^3.2.12",
+        "minimist": "^1.2.8"
+      },
+      "bin": {
+        "next-sitemap": "bin/next-sitemap.mjs",
+        "next-sitemap-cjs": "bin/next-sitemap.cjs"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "peerDependencies": {
+        "next": "*"
+      }
+    },
+    "node_modules/next-sitemap/node_modules/@next/env": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
+      "integrity": "sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw=="
+    },
    "node_modules/next-themes": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
--- a/Frontend/public/robots.txt
+++ b/Frontend/public/robots.txt
@ -0,0 +1,9 @@
+# *
+User-agent: *
+Allow: /
+
+# Host
+Host: https://fastpocket.dev
+
+# Sitemaps
+Sitemap: https://fastpocket.dev/sitemap.xml