Source: SEO/index.tsx

  1. import { useRouter } from 'next/router';
  2. import React from 'react';
  3. import { author as auth } from '@/constants/site';
  4. import { getLang, cleanTrailingSlash } from '@/helpers';
  5. import Head from 'next/head';
  7. type Props = {
  8.     isBlog?: boolean;
  9.     noimage?: boolean;
  10.     meta?: {
  11.         noindex?: boolean;
  12.         title: string;
  13.         author?: string;
  14.         description?: string;
  15.         image?: string;
  16.         category?: string;
  17.         alternate?: Array<{ lang: string; url: string }>;
  18.         slug?: string;
  19.         url?: string;
  20.     };
  21. };
  23. /**
  24.  * @example
  25.  *     <SEO meta={meta} isBlog={true} />;
  26.  *
  27.  * @param {object} meta - The object containing the meta data for SEO
  28.  * @param {boolean} isBlog - Whether the page is a blog post the SEO changes
  29.  * @param {boolean} noimage - Whether to show the image in the SEO
  30.  * @returns {JSX.Element}
  31.  */
  32. const SEO = ({ meta, isBlog, noimage = true }: Props) => {
  33.     const { locale: l, pathname: path } = useRouter();
  34.     const category = meta?.category?.toLowerCase();
  35.     const url = isBlog
  36.         ? `${process.env.NEXT_PUBLIC_DOMAIN}${getLang(l)}/blog/${category}/${meta?.slug}`
  37.         : `${process.env.NEXT_PUBLIC_DOMAIN}${getLang(l)}${cleanTrailingSlash(path)}`;
  38.     const title = meta?.title;
  39.     const author = meta?.author || auth;
  40.     const description = meta?.description;
  41.     const image = meta?.image ?? '/profile.png';
  43.     return (
  44.         <>
  45.             <Head>
  46.                 {isBlog ? (
  47.                     <script
  48.                         data-testid="json-ld"
  49.                         type="application/ld+json"
  50.                         key="item-jsonld"
  51.                         dangerouslySetInnerHTML={{
  52.                             __html: JSON.stringify({
  53.                                 '@context': 'https://schema.org',
  54.                                 '@type': 'Article',
  55.                                 headline: title,
  56.                                 description: description,
  57.                                 url: url,
  58.                                 ...(image && { image: [`${process.env.NEXT_PUBLIC_DOMAIN}/${image}`] }),
  59.                                 datePublished: new Date().toISOString(),
  60.                                 dateModified: new Date().toISOString(),
  61.                                 author: [
  62.                                     {
  63.                                         '@type': 'Person',
  64.                                         name: author,
  65.                                         url: process.env.NEXT_PUBLIC_DOMAIN,
  66.                                     },
  67.                                 ],
  68.                             }),
  69.                         }}
  70.                     />
  71.                 ) : (
  72.                     <>
  73.                         <link
  74.                             hrefLang="es"
  75.                             rel="alternate"
  76.                             href={`${process.env.NEXT_PUBLIC_DOMAIN}/es${cleanTrailingSlash(path)}`}
  77.                         />
  78.                         <link
  79.                             hrefLang="gl"
  80.                             rel="alternate"
  81.                             href={`${process.env.NEXT_PUBLIC_DOMAIN}/gl${cleanTrailingSlash(path)}`}
  82.                         />
  83.                     </>
  84.                 )}
  86.                 <title>{title}</title>
  87.                 {meta?.noindex ? (
  88.                     <>
  89.                         <meta name="robots" content="noindex" />
  90.                         <meta name="googlebot" content="noindex" />
  91.                     </>
  92.                 ) : (
  93.                     <>
  94.                         <meta name="robots" content="index,follow" />
  95.                         <meta name="googlebot" content="index,follow" />
  96.                     </>
  97.                 )}
  98.                 <meta name="author" content={author} />
  99.                 <meta name="description" content={description} />
  100.                 <meta property="og:description" content={description} />
  101.                 <meta name="twitter:description" content={description} />
  102.                 <meta property="og:title" content={title} />
  103.                 <meta name="twitter:title" content={title} />
  104.                 {noimage && (
  105.                     <>
  106.                         <meta name="image" content={image} />
  107.                         <meta property="og:image" content={`${process.env.NEXT_PUBLIC_DOMAIN}${image}`} />
  108.                     </>
  109.                 )}
  110.                 <meta property="og:url" content={url} />
  111.                 <link rel="canonical" href={url} title="Canonical url" />
  112.                 {meta?.alternate?.map(({ lang, url }, index) => (
  113.                     <link
  114.                         data-testid="blog-alternate"
  115.                         key={index}
  116.                         rel="alternate"
  117.                         href={`${process.env.NEXT_PUBLIC_DOMAIN}${getLang(lang)}/blog/${category}/${url}`}
  118.                         hrefLang={lang}
  119.                         title={`Alternate url for langueage ${lang}`}
  120.                     />
  121.                 ))}
  122.             </Head>
  123.         </>
  124.     );
  125. };
  127. export default SEO;