feat: improve SEO

Author: typeofweb

apps/app/package.json

@@ -28,6 +28,8 @@
 		"react-dom": "18.2.0",
 		"react-focus-lock": "2.9.2",
 		"rehype-prism-plus": "1.5.0",
+		"remark": "14.0.2",
+		"strip-markdown": "5.0.0",
 		"tailwind-merge": "1.8.1"
 	},
 	"devDependencies": {

apps/app/src/app/(main-layout)/questions/p/[questionId]/head.tsx

@@ -1,4 +1,5 @@
 import { HeadTags } from "../../../../../components/HeadTags";
+import { stripMarkdown } from "../../../../../lib/markdown";
 import { getQuestionById } from "../../../../../services/questions.service";
 import { Params } from "../../../../../types";
 
@@ -15,5 +16,8 @@ export default async function Head({ params }: { params: Params<"questionId"> })
 		id: questionId,
 	});
 
-	return <HeadTags title={data.question} />;
+	const textForTitle = await stripMarkdown(data.question, { stripCode: true });
+	const textForDescription = await stripMarkdown(data.question, { stripCode: false });
+
+	return <HeadTags title={textForTitle} description={textForDescription} />;
 }

apps/app/src/components/HeadTags.tsx

@@ -1,17 +1,27 @@
+import { hellip } from "../utils/utils";
+
 type HeadTagsProps = Readonly<{
 	title?: string;
 	description?: string;
 }>;
 
+const titleSuffix = ` • DevFAQ.pl`;
+const maxTitleLength = 60 - titleSuffix.length;
+const maxDescriptionLength = 160;
+
 export const HeadTags = ({
 	title = "",
 	description = "DevFAQ.pl — największa baza pytań z programowania tworzona przez społeczność. DevFAQ.pl jest serwisem internetowym służącym do udostępniania i wymiany pytań rekrutacyjnych na stanowiska developerów.",
 }: HeadTagsProps) => {
-	const formattedTitle = title.trim() ? `${title} • DevFAQ.pl` : `DevFAQ.pl`;
+	const shortTitle = hellip(title, maxTitleLength);
+	const shortDescription = hellip(description, maxDescriptionLength);
+
+	const formattedShortTitle = shortTitle.trim() ? `${shortTitle}${titleSuffix}` : `DevFAQ.pl`;
+
 	return (
 		<>
-			<title>{formattedTitle}</title>
-			<meta name="description" content={description} />
+			<title>{formattedShortTitle}</title>
+			<meta name="description" itemProp="description" content={description} />
 			<meta name="viewport" content="width=device-width, initial-scale=1" />
 			<meta property="og:type" content="website" />
 			<meta
@@ -35,8 +45,8 @@ export const HeadTags = ({
 			<meta name="format-detection" content="telephone=no" />
 			<meta name="apple-mobile-web-app-title" content="DevFAQ.pl" />
 
-			<meta property="og:title" itemProp="title name" content={formattedTitle} />
-			<meta property="og:description" itemProp="description" content={description} />
+			<meta property="og:title" itemProp="title name" content={formattedShortTitle} />
+			<meta property="og:description" content={shortDescription} />
 		</>
 	);
 };

apps/app/src/lib/markdown.ts

@@ -1,10 +1,32 @@
 import rehypePrism from "rehype-prism-plus";
+import strip from "strip-markdown";
+
 import { serialize } from "next-mdx-remote/serialize";
+import { remark } from "remark";
 
 export const serializeSource = (source: string) =>
 	serialize(source, {
 		mdxOptions: {
 			rehypePlugins: [rehypePrism],
+			jsx: false,
 			format: "md",
 		},
 	});
+
+export const stripMarkdown = async (source: string, { stripCode }: { stripCode: boolean }) => {
+	const codeRegex = /(?:\n|^)```\w*\n(.*?)\n```(?:\n|$)/gs;
+
+	try {
+		const vfile = await remark()
+			.use(strip, { keep: ["code"] })
+			.process(source);
+		return String(vfile)
+			.replaceAll(codeRegex, stripCode ? "\n" : "\n$1\n")
+			.replaceAll(/\s+/g, " ")
+			.replaceAll(/\\/g, "")
+			.trim();
+	} catch (err) {
+		console.error(err);
+		return "";
+	}
+};

apps/app/src/utils/utils.ts

@@ -1,2 +1,26 @@
 export const range = (start: number, end: number) =>
 	Array.from({ length: end - start }, (_, idx) => idx + start);
+
+export const hellip = (text: string, maxLength: number) => {
+	text = text.trim();
+
+	if (text.length <= maxLength) {
+		return text;
+	}
+	const partText = text.split(" ").reduce(
+		(acc, word) => {
+			if (acc.done) {
+				return acc;
+			}
+
+			const newResult = acc.result + " " + word;
+			if (newResult.length >= maxLength) {
+				return { done: true, result: acc.result };
+			}
+			return { done: false, result: newResult };
+		},
+		{ done: false, result: "" },
+	);
+
+	return partText.result.trim() + "…";
+};