Add author and publication date to OpenGraph metadata

Refers to #158
vertx-web-site · Apr 14, 2024 · 84bfa7b · 84bfa7b
1 parent f4c2eb2
commit 84bfa7b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/components/Header.jsx b/components/Header.jsx
@@ -1,7 +1,8 @@
 import Head from "next/head"
 import NavBar from "./NavBar"
 
-const Header = ({ title, ogUrl, ogImage, ogDescription }) => {
+const Header = ({ title, ogType = "website", ogUrl, ogImage, ogDescription,
+    ogAuthor, ogDate }) => {
   let fullTitle = (title ? title + " | " : "") + "Eclipse Vert.x"
   return (
     <header>
@@ -17,11 +18,17 @@ const Header = ({ title, ogUrl, ogImage, ogDescription }) => {
         <link rel="alternate" type="application/rss+xml" href="/feed/rss.xml" />
         <link rel="alternate" type="application/atom+xml" href="/feed/atom.xml" />
         <link rel="alternate" type="application/json" href="/feed/feed.json" />
-        <meta property="og:type" content="website"/>
+        <meta property="og:type" content={ogType}/>
         <meta property="og:title" content={fullTitle}/>
         {ogDescription !== undefined ? (
           <meta property="og:description" content={ogDescription} />
-        ): undefined}
+        ) : undefined}
+        {ogAuthor !== undefined ? (
+          <meta property="article:author" content={ogAuthor} />
+        ) : undefined}
+        {ogDate !== undefined ? (
+          <meta property="article:published_time" content={ogDate} />
+        ) : undefined}
         {ogUrl !== undefined ? (
           <meta property="og:url" content={ogUrl} />
         ) : undefined}

diff --git a/components/layouts/BlogPost.jsx b/components/layouts/BlogPost.jsx
@@ -3,7 +3,7 @@ import BlogNavBar from "../blog/BlogNavBar"
 import styles from "./BlogPost.scss?type=global"
 
 const BlogPost = (props) => (
-  <Page hashSmoothScroll {...props}>
+  <Page hashSmoothScroll ogType="article" {...props}>
     <div className="blog-post">
       <BlogNavBar categories={props.categories} />
       {props.children}

diff --git a/components/layouts/Page.jsx b/components/layouts/Page.jsx
@@ -7,7 +7,8 @@ import Header from "../Header"
 import Footer from "../Footer"
 import styles from "./Page.scss"
 
-const Layout = ({ title, ogUrl, ogImage, ogDescription, narrow, hashSmoothScroll = false, children }) => {
+const Layout = ({ title, ogType, ogUrl, ogImage, ogDescription, ogAuthor, ogDate,
+    narrow, hashSmoothScroll = false, children }) => {
   const navBarState = useContext(NavBarContext.State)
   const containerRef = useRef()
 
@@ -64,7 +65,8 @@ const Layout = ({ title, ogUrl, ogImage, ogDescription, narrow, hashSmoothScroll
 
   return (
     <main className="page">
-      <Header title={title} ogUrl={ogUrl} ogImage={ogImage} ogDescription={ogDescription} />
+      <Header title={title} ogType={ogType} ogUrl={ogUrl} ogImage={ogImage}
+        ogDescription={ogDescription} ogAuthor={ogAuthor} ogDate={ogDate} />
       <div className="page-content">
         <div className={classNames("container", { "container-narrow": narrow })}
             ref={containerRef}>

diff --git a/pages/blog/[[...slug]].jsx b/pages/blog/[[...slug]].jsx
@@ -427,10 +427,12 @@ const BlogPage = ({ post, prevPost, nextPost, relatedPosts, category, categories
 
   let url = `${process.env.baseUrl}/blog/${post.slug}`
   let ogImage = `${process.env.baseUrl}/images/previews/${post.slug}.jpg`
+  let ogAuthor = post.meta.authors !== undefined ?
+    post.meta.authors.map(a => a.name).join(", ") : undefined
 
   return (
     <BlogPost title={`${post.meta.title} | Blog`} categories={categories} ogUrl={url}
-        ogImage={ogImage} ogDescription={post.meta.summary}>
+        ogImage={ogImage} ogDescription={post.meta.summary} ogAuthor={ogAuthor} ogDate={post.date}>
       <div className="blog-post-main">
         <div className="blog-post-content">
           <h1>{post.meta.title}</h1>