Merge pull request #9 from paveg/seo

♻️ Update seo settings

.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

app/[...slug]/page.tsx

@@ -1,8 +1,10 @@
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
+import { ArticleJsonLd } from 'next-seo';
 import { allPages } from 'contentlayer/generated';
 
 import { Mdx } from '@/components/mdx-components';
+import { cfg } from '@/utils/constants';
 
 interface PageProps {
   params: {
@@ -43,14 +45,27 @@ export async function generateStaticParams(): Promise<PageProps['params'][]> {
 }
 
 export default async function PagePage({ params }: PageProps) {
+  const pagePublishedDate = '2024-03-17'
   const page = await getPageFromParams(params);
 
   if (!page) {
     notFound();
   }
 
+  const fullUrl = [cfg.siteURL, page.slugAsParams].join('/');
+
   return (
     <article className="prose py-6 dark:prose-invert">
+      <ArticleJsonLd
+        useAppDir={true}
+        url={fullUrl}
+        title={page.title}
+        images={[]}
+        datePublished={pagePublishedDate}
+        authorName={cfg.author}
+        description={page?.description ?? ''}
+      />
+
       <h1>{page.title}</h1>
       {page.description && <p className="text-xl">{page.description}</p>}
       <hr />

app/layout.tsx

@@ -14,8 +14,19 @@ const fontSans = FontSans({
 });
 
 export const metadata = {
+  metadataBase: new URL(cfg.siteURL),
+  url: cfg.siteURL,
   title: cfg.siteTitle,
   description: cfg.siteDescription,
+  openGraph: {
+    siteName: cfg.siteTitle,
+    title: cfg.siteTitle,
+    description: 'The logs of a software engineer whose name is Funai.',
+    locale: 'ja_JP',
+    type: 'website',
+    url: cfg.siteURL,
+    images: [],
+  },
 };
 
 interface RootLayoutProps {

app/posts/[...slug]/page.tsx

@@ -1,10 +1,11 @@
+import '@/styles/codes/prism-dracula.css';
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
+import { ArticleJsonLd } from 'next-seo';
 import { allPosts } from 'contentlayer/generated';
-
 import { Mdx } from '@/components/mdx-components';
 import { TableOfContents } from '@/components/table-of-contents';
-import '@/styles/codes/prism-dracula.css';
+import { cfg } from '@/utils/constants';
 
 interface PostProps {
   params: {
@@ -61,10 +62,23 @@ export default async function PostPage({ params }: PostProps) {
     notFound();
   }
 
+  const fullUrl = cfg.siteURL + post.slug;
+
   // TODO: Improve tailwindCSS
   // TODO: Add post date and the hero image
   return (
     <article className="prose py-6 transition-colors dark:prose-invert">
+      <ArticleJsonLd
+        useAppDir={true}
+        url={fullUrl}
+        title={post.title}
+        images={[]}
+        // TODO: update published and revised
+        datePublished={post.date}
+        dateModified={post.date}
+        authorName={cfg.author}
+        description={post?.description ?? ''}
+      />
       <h1 className="mb-4">{post.title}</h1>
       {post.date && (
         <p className="text-sm text-slate-700 dark:text-slate-200">

next-sitemap.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: 'https://www.funailog.com',
+  generateRobotsTxt: true,
+  sitemapSize: 5000,
+};

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "postbuild": "next-sitemap --config next-sitemap.config.js",
     "preview": "next build && next start",
     "start": "next start",
     "lint": "next lint --config .eslintrc.json",
@@ -30,6 +31,8 @@
     "github-slugger": "^2.0.0",
     "next": "14.0.4",
     "next-contentlayer": "^0.3.4",
+    "next-seo": "^6.5.0",
+    "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
     "postcss": "8.4.23",
     "react": "18.2.0",