diff --git a/website/index.html b/website/index.html index 1a54892..5cc250d 100644 --- a/website/index.html +++ b/website/index.html @@ -6,13 +6,17 @@
{description} diff --git a/website/src/components/SEO.tsx b/website/src/components/SEO.tsx new file mode 100644 index 0000000..def2249 --- /dev/null +++ b/website/src/components/SEO.tsx @@ -0,0 +1,67 @@ +import React, { useEffect } from 'react'; + +interface SEOProps { + title: string; + description: string; + path: string; +} + +export function SEO({ title, description, path }: SEOProps) { + useEffect(() => { + // 1. Update title + const fullTitle = title === 'Agentic WebView SDK' ? title : `${title} | Agentic WebView SDK`; + document.title = fullTitle; + + // Helper to set/update meta tag + const updateMetaTag = (attributeName: string, attributeValue: string, content: string) => { + let element = document.querySelector(`meta[${attributeName}="${attributeValue}"]`); + if (element) { + element.setAttribute('content', content); + } else { + element = document.createElement('meta'); + element.setAttribute(attributeName, attributeValue); + element.setAttribute('content', content); + document.head.appendChild(element); + } + }; + + // Helper to set/update link tag + const updateLinkTag = (rel: string, href: string) => { + let element = document.querySelector(`link[rel="${rel}"]`); + if (element) { + element.setAttribute('href', href); + } else { + element = document.createElement('link'); + element.setAttribute('rel', rel); + element.setAttribute('href', href); + document.head.appendChild(element); + } + }; + + // Normalize path to ensure leading slash + const normalizedPath = path.startsWith('/') ? path : `/${path}`; + const fullUrl = `https://awv.shantoislam.dev${normalizedPath}`; + + // 2. Update description meta tag + updateMetaTag('name', 'description', description); + + // 3. Update canonical link + updateLinkTag('canonical', fullUrl); + + // 4. Update Open Graph tags + updateMetaTag('property', 'og:title', fullTitle); + updateMetaTag('property', 'og:description', description); + updateMetaTag('property', 'og:url', fullUrl); + updateMetaTag('property', 'og:type', 'website'); + updateMetaTag('property', 'og:image', 'https://awv.shantoislam.dev/og-image.png'); + + // 5. Update Twitter Card tags + updateMetaTag('name', 'twitter:title', fullTitle); + updateMetaTag('name', 'twitter:description', description); + updateMetaTag('name', 'twitter:card', 'summary_large_image'); + updateMetaTag('name', 'twitter:image', 'https://awv.shantoislam.dev/og-image.png'); + + }, [title, description, path]); + + return null; // This component does not render visual UI +} diff --git a/website/src/pages/Home.tsx b/website/src/pages/Home.tsx index 748ef00..9520a79 100644 --- a/website/src/pages/Home.tsx +++ b/website/src/pages/Home.tsx @@ -8,6 +8,7 @@ import { InlineCode } from '../components/InlineCode'; import { Footer } from '../components/Footer'; import { ArrowRight, ArrowUpRight } from 'lucide-react'; import { useLatestRelease } from '../hooks/useLatestRelease'; +import { SEO } from '../components/SEO'; const integrationCode = `// initialize the controller val controller = remember { AgenticWebController() } @@ -52,6 +53,11 @@ export default function Home() { return (