Merge pull request #226 from nekochans/feature/issue225/add-canonical

canonicalタグの追加
nekochans · Nov 10, 2022 · 0f589d9 · 0f589d9 · vercel · Nov 10, 2022
2 parents d941e8d + c128827
commit 0f589d9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/layouts/DefaultLayout/DefaultLayout.tsx b/src/layouts/DefaultLayout/DefaultLayout.tsx
@@ -6,6 +6,7 @@ import type { Language, MetaTag, Url } from '../../features';
 type Props = {
   metaTag: MetaTag;
   children: ReactNode;
+  canonicalLink?: Url;
   alternateUrls?: Array<{
     hreflang: Language;
     link?: Url;
@@ -16,6 +17,7 @@ type Props = {
 export const DefaultLayout: FC<Props> = ({
   metaTag,
   children,
+  canonicalLink,
   alternateUrls,
 }) => (
   <>
@@ -55,6 +57,11 @@ export const DefaultLayout: FC<Props> = ({
       <meta name="msapplication-TileColor" content="#da532c" />
       <meta name="msapplication-config" content="/favicons/browserconfig.xml" />
       <meta name="theme-color" content="#ffffff" />
+      {canonicalLink != null ? (
+        <link rel="canonical" href={canonicalLink} />
+      ) : (
+        ''
+      )}
       {alternateUrls?.map((alternateUrl, index) => (
         <link
           rel="alternate"

diff --git a/src/templates/TopTemplate/TopTemplate.tsx b/src/templates/TopTemplate/TopTemplate.tsx
@@ -27,10 +27,8 @@ const fetchNewArrivalCatImagesCallback = sendClickTopFetchNewArrivalCatButton;
 
 const catRandomCopyCallback = sendCopyMarkdownFromRandomButton;
 
-const canonicalLink = i18nUrlList.top?.ja;
-
 const alternateUrls = languages.map((hreflang) => {
-  const link = hreflang === 'ja' ? canonicalLink : i18nUrlList.top?.en;
+  const link = hreflang === 'ja' ? i18nUrlList.top?.ja : i18nUrlList.top?.en;
 
   return { link, hreflang };
 });
@@ -43,11 +41,18 @@ type Props = {
 export const TopTemplate: FC<Props> = ({ language, lgtmImages }) => {
   const metaTag = metaTagList(language).top;
 
+  const canonicalLink =
+    language === 'en' ? i18nUrlList.top?.en : i18nUrlList.top?.ja;
+
   const { randomCatImagesFetcher, newArrivalCatImagesFetcher } =
     useCatImagesFetcher();
 
   return (
-    <DefaultLayout metaTag={metaTag} alternateUrls={alternateUrls}>
+    <DefaultLayout
+      metaTag={metaTag}
+      canonicalLink={canonicalLink}
+      alternateUrls={alternateUrls}
+    >
       <OrgTopTemplate
         language={language}
         lgtmImages={lgtmImages}