Neue services

components/SEO.tsx

@@ -7,14 +7,16 @@ interface SEOProps {
     keywords?: string[];
     canonicalUrl?: string;
     schema?: object; // JSON-LD schema
+    ogImage?: string;
+    ogType?: string;
 }
 
-const SEO: React.FC<SEOProps> = ({ title, description, keywords, canonicalUrl, schema }) => {
+const SEO: React.FC<SEOProps> = ({ title, description, keywords, canonicalUrl, schema, ogImage, ogType }) => {
     useEffect(() => {
         // Update Title
         document.title = title;
 
-        // Helper to set meta tag
+        // Helper to set meta tag (name attribute)
         const setMetaTag = (name: string, content: string) => {
             let element = document.querySelector(`meta[name="${name}"]`);
             if (!element) {
@@ -25,6 +27,17 @@ const SEO: React.FC<SEOProps> = ({ title, description, keywords, canonicalUrl, s
             element.setAttribute('content', content);
         };
 
+        // Helper to set OG tag (property attribute)
+        const setOgTag = (property: string, content: string) => {
+            let element = document.querySelector(`meta[property="${property}"]`);
+            if (!element) {
+                element = document.createElement('meta');
+                element.setAttribute('property', property);
+                document.head.appendChild(element);
+            }
+            element.setAttribute('content', content);
+        };
+
         // Update Meta Description
         setMetaTag('description', description);
 
@@ -44,6 +57,19 @@ const SEO: React.FC<SEOProps> = ({ title, description, keywords, canonicalUrl, s
             link.setAttribute('href', canonicalUrl);
         }
 
+        // Open Graph Tags
+        setOgTag('og:title', title);
+        setOgTag('og:description', description);
+        setOgTag('og:type', ogType || 'website');
+        setOgTag('og:site_name', 'Bay Area IT');
+        if (canonicalUrl) setOgTag('og:url', canonicalUrl);
+        if (ogImage) setOgTag('og:image', ogImage);
+
+        // Twitter Card Tags
+        setMetaTag('twitter:card', 'summary');
+        setMetaTag('twitter:title', title);
+        setMetaTag('twitter:description', description);
+
         // Inject Schema
         if (schema) {
             const scriptId = 'seo-schema-script';
@@ -57,10 +83,7 @@ const SEO: React.FC<SEOProps> = ({ title, description, keywords, canonicalUrl, s
             script.textContent = JSON.stringify(schema);
         }
 
-        // Cleanup function not strictly necessary for single page app navigation 
-        // unless we want to remove specific tags on unmount, but usually we just overwrite them.
-
-    }, [title, description, keywords, canonicalUrl, schema]);
+    }, [title, description, keywords, canonicalUrl, schema, ogImage, ogType]);
 
     return null;
 };