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>
+  );
+}