diff --git a/website/components/Seo.tsx b/website/components/Seo.tsx
index d9123e1a..08c17a04 100644
--- a/website/components/Seo.tsx
+++ b/website/components/Seo.tsx
@@ -40,6 +40,21 @@ export interface Props {
*/
noIndexing?: boolean;
+ /** @title Open Graph Config */
+ openGraphConfig?: {
+ title?: string;
+ description?: string;
+ image?: ImageWidget;
+ url?: string;
+ };
+
+ /** @title Twitter Config */
+ twitterConfig?: {
+ title?: string;
+ description?: string;
+ image?: ImageWidget;
+ };
+
jsonLDs?: unknown[];
}
@@ -54,11 +69,30 @@ function Component({
themeColor,
canonical,
noIndexing,
+ openGraphConfig,
+ twitterConfig,
jsonLDs = [],
}: Props) {
const twitterCard = type === "website" ? "summary" : "summary_large_image";
- const description = stripHTML(desc || "");
+
const title = stripHTML(t);
+ const description = stripHTML(desc || "");
+
+ const twitterImage = twitterConfig?.image ?? image;
+ const twitterTitle = twitterConfig?.title
+ ? stripHTML(twitterConfig.title)
+ : title;
+ const twitterDescription = twitterConfig?.description
+ ? stripHTML(twitterConfig.description)
+ : description;
+
+ const openGraphImage = openGraphConfig?.image ?? image;
+ const openGraphTitle = openGraphConfig?.title
+ ? stripHTML(openGraphConfig.title)
+ : title;
+ const openGraphDescription = openGraphConfig?.description
+ ? stripHTML(openGraphConfig.description)
+ : description;
return (
@@ -71,17 +105,25 @@ function Component({
{/* Twitter tags */}
-
-
-
+
+
+
{/* OpenGraph tags */}
-
-
+
+
-
- {canonical && }
+
+ {Boolean(openGraphConfig?.url || canonical) && (
+
+ )}
{/* Link tags */}
{canonical && }