add canonical link

pveyes · Oct 5, 2023 · dbb6fb1 · dbb6fb1 · vercel · Oct 5, 2023
1 parent b2a3855
commit dbb6fb1
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -18,6 +18,7 @@ interface Props {
   onShowHelp?: () => void;
   onShowSettings?: () => void;
   onSendEmoji?: (emoji: string) => void;
+  path?: string;
 }
 
 export default function Header(props: Props) {
@@ -52,6 +53,7 @@ export default function Header(props: Props) {
     isLiveMode,
     themeColor = "#15803D",
     showLiarOption,
+    path = "/",
   } = props;
 
   return (
@@ -66,6 +68,7 @@ export default function Header(props: Props) {
         <meta property="og:description" content={description} />
         <meta property="og:keywords" content={keywords.join(", ")} />
         <meta property="og:image" content={ogImage} />
+        <link rel="canonical" href={"https://katla.id" + path} />
 
         <meta name="twitter:card" content="summary_large_image" />
         <meta property="twitter:domain" content="katla.vercel.app" />

diff --git a/pages/arsip/[num].tsx b/pages/arsip/[num].tsx
@@ -50,6 +50,7 @@ export default function Arsip(props: Props) {
   const headerProps: ComponentProps<typeof Header> = {
     title: `Katla | Arsip #${props.num}`,
     customHeading: <HeadingWithNum num={props.num} />,
+    path: `/arsip/${props.num}`,
     ogImage: "https://katla.vercel.app/og-arsip.png",
     themeColor: game.state.enableHighContrast ? "#f5793a" : "#15803D",
     onShowHelp: () => setModalState("help"),

diff --git a/pages/arsip/index.tsx b/pages/arsip/index.tsx
@@ -30,6 +30,7 @@ export default function Arsip() {
   return (
     <Container>
       <Header
+        path="/arsip"
         title="Katla | Arsip"
         keywords={[
           "arsip",

diff --git a/pages/lawan.tsx b/pages/lawan.tsx
@@ -149,7 +149,9 @@ export default function Lawan({ words }: Props) {
 }
 
 export const getStaticProps: GetStaticProps<Props> = async () => {
-  const words = await fetcher("https://cdn.statically.io/gh/pveyes/makna/main/words.json");
+  const words = await fetcher(
+    "https://cdn.statically.io/gh/pveyes/makna/main/words.json"
+  );
   return {
     props: {
       words,
@@ -195,6 +197,7 @@ function Main({ words, config }: MainProps) {
   );
 
   const headerProps: ComponentProps<typeof Header> = {
+    path: "/lawan",
     onSendEmoji: others.count > 0 ? handleSendEmoji : undefined,
     customHeading: (
       <div className="dark:text-gray-300 text-gray-700 flex relative">