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