feat: Add json-ld for set site_name in google search result and seo f…

…or blog page (#56)

improve url in metadata

.env

@@ -0,0 +1 @@
+SITE_NAME=RezaFikkri

app/about/page.jsx

@@ -1,20 +1,22 @@
 import Profile from "@/components/about/profile";
 import Summary from "@/components/about/summary";
 import Skill from "@/components/about/skill";
+import getBaseUrl from "@/lib/get-base-url";
 
 const title = "Tentang Saya";
 const description = "Seorang backend web developer, suka menulis dan juga membuat aplikasi open source.";
+const baseUrl = getBaseUrl();
 
 export const metadata = {
   title,
   description,
   openGraph: {
     title,
     description,
-    url: '/about',
+    url: `${baseUrl}/about`,
     images: [
       {
-        url: '/rezas.jpg',
+        url: `${baseUrl}/rezas.jpg`,
         width: 400,
         height: 400,
       }, 

app/blogs/[slug]/page.jsx

@@ -1,21 +1,24 @@
+import dayjs from "dayjs";
 import Pagination from "@/components/post/pagination";
 import PostContent from "@/components/post/post-content";
 import SmallTopics from "@/components/post/small-topics";
 import { getPost, getSlugs, getTopics } from "@/lib/posts.mjs";
 import FormatTime from "@/components/format-time";
+import getBaseUrl from "@/lib/get-base-url";
 
 export async function generateMetadata({ params }) {
   const slug = (await params).slug;
   const post = getPost(slug);
+  const baseUrl = getBaseUrl();
 
   return {
     title: post.title,
     description: post.excerpt,
     openGraph: {
       title: post.title,
       description: post.excerpt,
-      url: `/blogs/${post.slug}`,
-      images: [ post.ogImage ],
+      url: `${baseUrl}/blogs/${post.slug}`,
+      images: [ baseUrl + post.ogImage ],
       type: 'article',
     },
   };
@@ -29,9 +32,29 @@ export default async function Page({ params }) {
   const slug = (await params).slug;
   const post = getPost(slug);
   const topics = getTopics(post.topics);
+  const baseUrl = getBaseUrl();
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: post.title,
+    image: [ baseUrl + post.ogImage ],
+    dateModified: dayjs(post.lastmod).toISOString(),
+    author: [
+      {
+        '@type': 'Person',
+        name: 'Reza Sariful Fikri',
+        url: `${baseUrl}/about`,
+      }
+    ],
+  };
 
   return (
     <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <article className="mt-24">
         <FormatTime className="text-gray-600 inline-block" lastmod={post.lastmod} format={'DD MMMM YYYY'}/>
         <h1 className="text-5xl font-bold mt-2 text-gray-900">{post.title}</h1>

app/blogs/page.jsx

@@ -1,20 +1,23 @@
 import { getTopics, getPosts } from "@/lib/posts";
 import LargeTopics from "@/components/post/large-topics";
 import PostList from "@/components/post/post-list";
+import getBaseUrl from "@/lib/get-base-url";
 
 const title = "Blog";
 const description = "Kumpulan tulisan mengenai programming dan teknologi secara umum.";
 
+const baseUrl = getBaseUrl();
+
 export const metadata = {
   title,
   description,
   openGraph: {
     title,
     description,
-    url: '/blogs',
+    url: `${baseUrl}/blogs`,
     images: [
       {
-        url: '/Reza logo.svg',
+        url: `${baseUrl}/Reza logo.svg`,
         width: 744,
         height: 744,
       }, 

app/blogs/topic/[topic]/page.jsx

@@ -1,21 +1,23 @@
 import { getPosts, getTopicId, getTopics } from "@/lib/posts.mjs";
 import PostList from "@/components/post/post-list";
 import LargeTopics from "@/components/post/large-topics";
+import getBaseUrl from "@/lib/get-base-url";
 
 export async function generateMetadata({ params }) {
   const selectedTopic = (await params).topic;
   const description = `Kumpulan tulisan mengenai ${selectedTopic}.`;
+  const baseUrl = getBaseUrl();
 
   return {
     title: selectedTopic,
     description: description,
     openGraph: {
       title: selectedTopic,
       description: description,
-      url: `/blogs/topics/${selectedTopic}`,
+      url: `${baseUrl}/blogs/topics/${selectedTopic}`,
       images: [
         {
-          url: '/Reza logo.svg',
+          url: `${baseUrl}/Reza logo.svg`,
           width: 744,
           height: 744,
         },

app/layout.jsx

@@ -29,8 +29,8 @@ const baseUrl = getBaseUrl();
 export const metadata = {
   metadataBase: new URL(baseUrl),
   title: {
-    template: "%s - Reza Sariful Fikri",
-    default: "Reza Sariful Fikri"
+    template: `%s - ${process.env.SITE_NAME}`,
+    default: process.env.SITE_NAME,
   },
   verification: {
     google: 'fLcDg3KFF-m2xDnm4TGsRylXksSQTGGfLq6FqSe8cUs',

app/page.jsx

@@ -4,22 +4,23 @@ import LargeTopics from "@/components/post/large-topics";
 import HomeHeader from "@/components/home/home-header";
 import HomePostList from "@/components/home/home-post-list";
 import ProjectList from "@/components/project/project-list";
+import getBaseUrl from "@/lib/get-base-url";
 
-const title = "Reza Sariful Fikri - Backend Web Developer";
-const description = "Website yang membahas mengenai programming, khususnya di bidang pengembangan web dan hal-hal umum seputar teknologi.";
+const title = `Website Pribadi Reza Sariful Fikri - ${process.env.SITE_NAME}`;
+const description = 'Website yang membahas mengenai programming, khususnya di bidang pengembangan web dan hal-hal umum seputar teknologi.';
+const baseUrl = getBaseUrl();
 
 export const metadata = {
-  title: {
-    absolute: title 
-  },
+  title,
   description,
   openGraph: {
     title,
     description,
-    url: '/',
+    url: baseUrl,
+    siteName: process.env.SITE_NAME,
     images: [
       {
-        url: '/rezas.jpg',
+        url: `${baseUrl}/rezas.jpg`,
         width: 400,
         height: 400,
       }, 
@@ -32,8 +33,19 @@ export default function Page() {
   const topics = getTopics();
   const latestPosts = getLatestPosts();
 
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: process.env.SITE_NAME,
+    url: baseUrl,
+  };
+
   return (
     <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <HomeHeader />
       <HomePostList latestPosts={latestPosts} />
       <section className="text-gray-800 mt-20"> 

app/projects/page.jsx

@@ -1,18 +1,21 @@
 import ProjectList from "@/components/project/project-list";
+import getBaseUrl from "@/lib/get-base-url";
 
 const title = "Projek";
 const description = "Karya-karya open source.";
 
+const baseUrl = getBaseUrl();
+
 export const metadata = {
   title,
   description,
   openGraph: {
     title,
     description,
-    url: '/projects',
+    url: `${baseUrl}/projects`,
     images: [
       {
-        url: '/Reza logo.svg',
+        url: `${baseUrl}/Reza logo.svg`,
         width: 744,
         height: 744,
       }, 

components/home/home-header.jsx

@@ -4,7 +4,7 @@ import Contact from "../about/contact";
 export default function HomeHeader() {
   return (
     <header className="mt-24 text-gray-800"> 
-      <h1 className="text-5xl font-bold text-gray-900">Halo, Saya Reza!</h1>
+      <h1 className="text-5xl font-bold text-gray-900">Hai, Saya Reza</h1>
       <p className="mt-7 text-xl">Ini adalah website pribadi saya.</p>
       <p className="mt-7 text-xl mb-9">Dalam website ini saya <Link href="/blogs">menulis</Link> mengenai programming, khususnya di bidang pengembangan web, menggunakan bahasa PHP dan JavaScript dan hal-hal umum seputar teknologi. Selain itu saya juga suka membuat aplikasi <Link href="/projects">open-source</Link>.</p>
       <Contact />

next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export', // Outputs a Single-Page Application (SPA).
-}
+};
 
-export default nextConfig
+export default nextConfig;