> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/Mich9025/vencol-front/llms.txt > Use this file to discover all available pages before exploring further. # SEO Component > Meta tags and SEO optimization using react-helmet-async The `SEO` component manages page metadata, including title, description, Open Graph tags, and Twitter cards using `react-helmet-async`. ## Features * Dynamic page title with template support * Meta description management * Open Graph tags for social sharing * Twitter card metadata * Favicon configuration * Language attribute setting * Image and URL metadata ## Installation The component requires `react-helmet-async`: ```bash theme={null} npm install react-helmet-async ``` ## Usage ### Basic Usage ```tsx theme={null} import { SEO } from '../components/SEO'; function HomePage() { return (
{/* Page content */}
); } ``` ### With All Props ```tsx theme={null} ``` ## Props The component accepts the following props: Page title. Falls back to `meta.defaultTitle` from siteContent Page description for meta tags. Falls back to `meta.defaultDescription` Social sharing image URL. Falls back to `meta.defaultImage` Canonical page URL. Falls back to `meta.siteUrl` Open Graph content type. Common values: `website`, `article`, `profile` ## TypeScript Interface ```typescript theme={null} interface SEOProps { title?: string; description?: string; image?: string; url?: string; type?: string; } ``` ## Meta Configuration The component reads default values from `siteContent.meta`: ```typescript theme={null} const siteContent = { meta: { defaultTitle: string; // Default page title titleTemplate: string; // Template for formatting titles (e.g., "%s | Site Name") defaultDescription: string; // Default meta description defaultImage: string; // Default OG image URL siteUrl: string; // Base site URL siteName: string; // Site name for OG tags favicon: string; // Favicon URL } }; ``` ## Generated Meta Tags The component generates the following meta tags: ### Basic Meta Tags ```html theme={null} ``` ### Open Graph Tags ```html theme={null} ``` ### Twitter Card Tags ```html theme={null} ``` ## Title Template The component uses `titleTemplate` for formatting: ```tsx theme={null} ``` If `titleTemplate` is `"%s | VENCOL"` and `title` is `"Blog"`, the final title will be `"Blog | VENCOL"`. ## Implementation Example Here's how it's used in the Home page: ```tsx theme={null} // pages/Home.tsx:44 export const Home: React.FC = () => { const { home, meta } = siteContent; return (
{/* Page content */}
); }; ``` ## SEO Object Structure Internally, the component builds a SEO object with fallbacks: ```typescript theme={null} const seo = { title: title || meta.defaultTitle, description: description || meta.defaultDescription, image: image || meta.defaultImage, url: url || meta.siteUrl, }; ``` ## Language Configuration The component sets the HTML lang attribute to Spanish: ```tsx theme={null} ``` To change the language, modify the `lang` attribute in the component. ## Twitter Card Type The component uses `summary_large_image` for Twitter cards, which displays a large image preview when shared on Twitter. ## Best Practices 1. **Always provide a title and description** for better SEO 2. **Use high-quality images** (minimum 1200x630px for OG images) 3. **Provide unique content** for each page 4. **Use absolute URLs** for images and canonical URLs 5. **Set appropriate Open Graph type** (`article` for blog posts, `website` for pages) ## Example Configuration ```typescript theme={null} const siteContent = { meta: { defaultTitle: 'VENCOL - Sustainable Solutions', titleTemplate: '%s | VENCOL', defaultDescription: 'Leading provider of sustainable environmental solutions', defaultImage: 'https://vencol.com/og-image.jpg', siteUrl: 'https://vencol.com', siteName: 'VENCOL', favicon: '/favicon.png' } }; ``` ## Component Location `components/SEO.tsx:13`