import { NextSeo, ArticleJsonLd } from 'next-seo' import siteMetadata from '@/data/siteMetadata' export const SEO = { title: siteMetadata.title, description: siteMetadata.description, openGraph: { type: 'website', locale: siteMetadata.language, url: siteMetadata.siteUrl, title: siteMetadata.title, description: siteMetadata.description, images: [ { url: `${siteMetadata.siteUrl}${siteMetadata.socialBanner}`, alt: siteMetadata.title, width: 1200, height: 600, }, ], }, twitter: { handle: siteMetadata.twitter, site: siteMetadata.twitter, cardType: 'summary_large_image', }, additionalMetaTags: [ { name: 'author', content: siteMetadata.author, }, ], } export const PageSeo = ({ description, url, title = null }) => { return ( <NextSeo title={title ? `${title} | ${siteMetadata.title}` : siteMetadata.title} description={description} canonical={url} openGraph={{ url, title, description, }} /> ) } export const BlogSeo = ({ summary, date, lastmod, url, title, tags, images = [] }) => { const publishedAt = new Date(date).toISOString() const modifiedAt = new Date(lastmod || date).toISOString() let imagesArr = images.length === 0 ? [siteMetadata.socialBanner] : typeof images === 'string' ? [images] : images const featuredImages = imagesArr.map((img) => ({ url: `${siteMetadata.siteUrl}${img}`, alt: title ?? siteMetadata.title, })) return ( <> <NextSeo title={title ? `${title} | ${siteMetadata.title}` : siteMetadata.title} description={summary} canonical={url} openGraph={{ type: 'article', article: { publishedTime: publishedAt, modifiedTime: modifiedAt, authors: [`${siteMetadata.siteUrl}/about`], tags, }, url, title: title ?? siteMetadata.title, description: summary, images: featuredImages, }} additionalMetaTags={[ { name: 'twitter:image', content: featuredImages[0].url, }, ]} /> <ArticleJsonLd authorName={siteMetadata.author} dateModified={modifiedAt} datePublished={publishedAt} description={summary} images={featuredImages} publisherName={siteMetadata.author} title={title ?? siteMetadata.title} url={url} /> </> ) }