From 40bb81301d21ef44eb82eb1b797a10f7ecee3f4a Mon Sep 17 00:00:00 2001 From: Eduardo Brito Date: Thu, 31 Aug 2023 20:21:54 -0300 Subject: [PATCH] only render tags when content is available --- components/seo/Metatags.tsx | 58 +++++++++++++++++++++++++------------ components/seo/types.ts | 4 +++ 2 files changed, 44 insertions(+), 18 deletions(-) diff --git a/components/seo/Metatags.tsx b/components/seo/Metatags.tsx index ba42db5e..5190e432 100644 --- a/components/seo/Metatags.tsx +++ b/components/seo/Metatags.tsx @@ -9,8 +9,14 @@ import Preview from "./components/Preview.tsx"; import type { Props } from "./types.ts"; function Metatags(props: Props) { - const { titleTemplate = "", context, type, themeColor, favicon } = props; - const twitterCard = type === "website" ? "summary" : "summary_large_image"; + const { + titleTemplate = "", + context, + type, + themeColor, + favicon, + twitterCard, + } = props; const tags = context?.["@type"] === "ProductDetailsPage" ? tagsFromProduct(context, titleTemplate) @@ -23,24 +29,40 @@ function Metatags(props: Props) { return ( <> - {title} - - - + {title && ( + <> + {title} + + + )} + + {description && ( + <> + + + + )} + + {image && ( + <> + + + )} - {/* Twitter tags */} - - - - - {/* OpenGraph tags */} - - - - + {themeColor && } - {/* Link tags */} - {canonical && } + {favicon && } + + {twitterCard && } + + {type && } + + {canonical && ( + <> + + + + )} {/* No index, no follow */} {props?.noIndexNoFollow && ( diff --git a/components/seo/types.ts b/components/seo/types.ts index 8a655903..62e05f49 100644 --- a/components/seo/types.ts +++ b/components/seo/types.ts @@ -12,6 +12,8 @@ export interface Dimensions { height: number; } +type TwitterCard = "summary" | "summary_large_image"; + export interface Props { title?: string; /** @@ -31,6 +33,8 @@ export interface Props { themeColor?: string; /** @title Canonical URL */ canonical?: string; + /** @title Twitter Card */ + twitterCard?: TwitterCard; /** * @title Disable indexing * @description In testing, you can use this to prevent search engines from indexing your site