Skip to content

Commit e03ff61

Browse files
author
wutali
committed
Define json ld meta
1 parent 25528ab commit e03ff61

File tree

4 files changed

+93
-35
lines changed

4 files changed

+93
-35
lines changed

‎next.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ module.exports = withMdxEnhanced({
66
defaultLayout: true,
77
rehypePlugins: [rehypePrism],
88
})({
9-
trailingSlash: true,
109
pageExtensions: ["mdx", "tsx"],
1110
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
1211
config.module.rules.push(

‎src/components/Date.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { parseISO, format } from "date-fns";
1+
import { parseISO, formatISO, format } from "date-fns";
22

33
export default function Date({ dateString }: { dateString: string }) {
44
const date = parseISO(dateString);
55
return (
6-
<time dateTime={dateString}>
6+
<time dateTime={formatISO(date)}>
77
<span>{format(date, "LLLL d, yyyy")}</span>
88
<style jsx>
99
{`

‎src/components/meta/JsonLdMeta.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { BlogPosting } from "schema-dts";
2+
import { jsonLdScriptProps } from "react-schemaorg";
3+
import config from "../../lib/config";
4+
import { parseISO, formatISO } from "date-fns";
5+
6+
type Props = {
7+
url: string;
8+
title: string;
9+
keywords?: string[];
10+
dateString: string;
11+
author?: string;
12+
image?: string;
13+
description?: string;
14+
};
15+
export default function JsonLdMeta({
16+
url,
17+
title,
18+
keywords,
19+
dateString,
20+
author,
21+
image,
22+
description,
23+
}: Props) {
24+
const date = parseISO(dateString);
25+
return (
26+
<script
27+
{...jsonLdScriptProps<BlogPosting>({
28+
"@context": "https://schema.org",
29+
"@type": "BlogPosting",
30+
mainEntityOfPage: config.base_url + url,
31+
headline: title,
32+
keywords: keywords ? undefined : keywords.join(","),
33+
datePublished: formatISO(date),
34+
author: author,
35+
image: image,
36+
description: description,
37+
})}
38+
/>
39+
);
40+
}

‎src/layouts/index.tsx

+51-32
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,64 @@
1+
import Head from "next/head";
12
import React from "react";
23
import styles from "../../public/styles/content.module.css";
4+
import Author from "../components/Author";
5+
import Copyright from "../components/Copyright";
36
import Date from "../components/Date";
47
import Layout from "../components/Layout";
5-
import TagButton from "../components/TagButton";
6-
import { getTag } from "../lib/tags";
8+
import BasicMeta from "../components/meta/BasicMeta";
9+
import JsonLdMeta from "../components/meta/JsonLdMeta";
10+
import OpenGraphMeta from "../components/meta/OpenGraphMeta";
11+
import TwitterCardMeta from "../components/meta/TwitterCardMeta";
712
import { SocialList } from "../components/SocialList";
8-
import Copyright from "../components/Copyright";
9-
import Author from "../components/Author";
13+
import TagButton from "../components/TagButton";
1014
import { getAuthor } from "../lib/authors";
11-
import { BlogPosting } from "schema-dts";
12-
import { jsonLdScriptProps } from "react-schemaorg";
13-
import BasicMeta from "../components/meta/BasicMeta";
14-
import Head from "next/head";
15+
import { getTag } from "../lib/tags";
1516

1617
type Props = {
1718
title: string;
1819
date: string;
1920
slug: string;
20-
tags?: string[];
21-
author?: string;
21+
description: string;
22+
tags: string[];
23+
author: string;
2224
};
23-
export default function Index({ title, date, slug, author, tags }: Props) {
25+
export default function Index({
26+
title,
27+
date,
28+
slug,
29+
author,
30+
tags,
31+
description,
32+
}: Props) {
33+
const keywords = tags.map((it) => getTag(it).name);
34+
const authorName = getAuthor(author).name;
2435
return ({ children: content }) => {
2536
return (
2637
<Layout>
2738
<Head>
28-
<BasicMeta url={`/posts/${slug}`} />
29-
<script
30-
{...jsonLdScriptProps<BlogPosting>({
31-
"@context": "https://schema.org",
32-
"@type": "BlogPosting",
33-
mainEntityOfPage: "",
34-
headline: "",
35-
keywords: "",
36-
datePublished: "",
37-
dateModified: "",
38-
author: "",
39-
image: "",
40-
description: "",
41-
})}
39+
<BasicMeta
40+
url={`/posts/${slug}`}
41+
title={title}
42+
keywords={keywords}
43+
description={description}
44+
/>
45+
<TwitterCardMeta
46+
url={`/posts/${slug}`}
47+
title={title}
48+
description={description}
49+
/>
50+
<OpenGraphMeta
51+
url={`/posts/${slug}`}
52+
title={title}
53+
description={description}
54+
/>
55+
<JsonLdMeta
56+
url={`/posts/${slug}`}
57+
title={title}
58+
keywords={keywords}
59+
dateString={date}
60+
author={authorName}
61+
description={description}
4262
/>
4363
</Head>
4464
<div className={"container"}>
@@ -50,18 +70,17 @@ export default function Index({ title, date, slug, author, tags }: Props) {
5070
<Date dateString={date} />
5171
</div>
5272
<div>
53-
{author ? <Author author={getAuthor(author)} /> : null}
73+
<Author author={getAuthor(author)} />
5474
</div>
5575
</div>
5676
</header>
5777
<div className={styles.content}>{content}</div>
5878
<ul className={"tag-list"}>
59-
{tags &&
60-
tags.map((it, i) => (
61-
<li key={i}>
62-
<TagButton tag={getTag(it)} />
63-
</li>
64-
))}
79+
{tags.map((it, i) => (
80+
<li key={i}>
81+
<TagButton tag={getTag(it)} />
82+
</li>
83+
))}
6584
</ul>
6685
</article>
6786
<footer>

0 commit comments

Comments
 (0)