Files
miracles_in_motion/src/components/SEO/SEOHead.tsx
T

105 lines
4.1 KiB
TypeScript

import { Helmet } from 'react-helmet-async'
interface SEOHeadProps {
title?: string
description?: string
image?: string
url?: string
type?: 'website' | 'article'
article?: {
author?: string
publishedTime?: string
modifiedTime?: string
tags?: string[]
}
}
export function SEOHead({
title = 'Miracles in Motion - Empowering Students with Essential Support',
description = 'A 501(c)(3) nonprofit providing students with school supplies, clothing, and emergency support to help them succeed in school and life.',
image = '/og-image.jpg',
url = 'https://miraclesinmotion.org',
type = 'website',
article
}: SEOHeadProps) {
const fullTitle = title.includes('Miracles in Motion') ? title : `${title} | Miracles in Motion`
const fullUrl = url.startsWith('http') ? url : `https://miraclesinmotion.org${url}`
const fullImage = image.startsWith('http') ? image : `https://miraclesinmotion.org${image}`
return (
<Helmet>
{/* Basic Meta Tags */}
<title>{fullTitle}</title>
<meta name="description" content={description} />
<meta name="keywords" content="nonprofit, education, student support, school supplies, clothing assistance, emergency aid, 501c3, charity, community" />
<link rel="canonical" href={fullUrl} />
{/* Open Graph Meta Tags */}
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description} />
<meta property="og:image" content={fullImage} />
<meta property="og:url" content={fullUrl} />
<meta property="og:type" content={type} />
<meta property="og:site_name" content="Miracles in Motion" />
<meta property="og:locale" content="en_US" />
{/* Twitter Card Meta Tags */}
<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={fullImage} />
<meta name="twitter:site" content="@MiraclesInMotion" />
<meta name="twitter:creator" content="@MiraclesInMotion" />
{/* Article-specific meta tags */}
{type === 'article' && article && (
<>
{article.author && <meta property="article:author" content={article.author} />}
{article.publishedTime && <meta property="article:published_time" content={article.publishedTime} />}
{article.modifiedTime && <meta property="article:modified_time" content={article.modifiedTime} />}
{article.tags && article.tags.map((tag, index) => (
<meta key={index} property="article:tag" content={tag} />
))}
</>
)}
{/* Additional SEO Meta Tags */}
<meta name="robots" content="index, follow" />
<meta name="author" content="Miracles in Motion" />
<meta name="revisit-after" content="7 days" />
<meta name="rating" content="General" />
{/* Structured Data */}
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "Organization",
"name": "Miracles in Motion",
"url": "https://miraclesinmotion.org",
"logo": "https://miraclesinmotion.org/logo.png",
"description": description,
"foundingDate": "2020",
"areaServed": "United States",
"sameAs": [
"https://facebook.com/miraclesinmotion",
"https://twitter.com/miraclesinmotion",
"https://instagram.com/miraclesinmotion"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-818-491-6884",
"contactType": "customer service",
"email": "[email protected]"
},
"address": {
"@type": "PostalAddress",
"addressCountry": "US"
},
"nonprofitStatus": "501(c)(3)"
})}
</script>
</Helmet>
)
}
export default SEOHead