From 2f97cc6c67bfdb10af0981c56c7ff5673aaa9a84 Mon Sep 17 00:00:00 2001
From: yoge <yogecoder@gmail.com>
Date: Wed, 25 Mar 2026 13:14:34 +0800
Subject: [PATCH] feat: add SEOHead component with react-helmet-async

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/seo/SEOHead.tsx | 48 ++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/seo/SEOHead.tsx

diff --git a/src/components/seo/SEOHead.tsx b/src/components/seo/SEOHead.tsx
new file mode 100644
index 0000000..c7d2391
--- /dev/null
+++ b/src/components/seo/SEOHead.tsx
@@ -0,0 +1,48 @@
+import { Helmet } from 'react-helmet-async';
+
+interface SEOHeadProps {
+  title: string;
+  description: string;
+  path: string;
+  type?: 'website' | 'article';
+  image?: string;
+  publishedTime?: string;
+  noindex?: boolean;
+}
+
+const BASE_URL = 'https://texpixel.com';
+
+export default function SEOHead({
+  title,
+  description,
+  path,
+  type = 'website',
+  image = 'https://cdn.texpixel.com/public/og-cover.png',
+  publishedTime,
+  noindex = false,
+}: SEOHeadProps) {
+  const url = `${BASE_URL}${path}`;
+  const fullTitle = path === '/' ? title : `${title} | TexPixel`;
+
+  return (
+    <Helmet>
+      <title>{fullTitle}</title>
+      <meta name="description" content={description} />
+      <link rel="canonical" href={url} />
+      {noindex && <meta name="robots" content="noindex, nofollow" />}
+
+      <meta property="og:title" content={fullTitle} />
+      <meta property="og:description" content={description} />
+      <meta property="og:url" content={url} />
+      <meta property="og:type" content={type} />
+      <meta property="og:image" content={image} />
+      <meta property="og:site_name" content="TexPixel" />
+      {publishedTime && <meta property="article:published_time" content={publishedTime} />}
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={fullTitle} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={image} />
+    </Helmet>
+  );
+}