import { Head } from '@inertiajs/react';
interface SEOHeadProps {
title?: string;
description?: string;
keywords?: string[];
image?: string;
type?: 'website' | 'article' | 'profile';
author?: string;
publishedTime?: string;
modifiedTime?: string;
section?: string;
tags?: string[];
jsonLd?: object;
}
/**
* SEOHead Component
*
* Componente reutilizable para gestionar meta tags SEO dinámicos en cada página.
* Incluye soporte para Open Graph, Twitter Cards y datos estructurados JSON-LD.
*
* @example
*
*/
export default function SEOHead({
title,
description,
keywords = [],
image,
type = 'website',
author,
publishedTime,
modifiedTime,
section,
tags = [],
jsonLd,
}: SEOHeadProps) {
const appName = 'MIRATE';
const baseUrl = window.location.origin;
const currentUrl = window.location.href;
const defaultDescription = 'MIRATE - Mapa Interactivo de Innovación Educativa. Plataforma digital que visibiliza proyectos de investigación con innovación pedagógica, didáctica y curricular en Colombia y Latinoamérica.';
const defaultKeywords = [
'innovación educativa',
'investigación pedagógica',
'proyectos educativos',
'mapa interactivo',
'educación Colombia',
'Universidad de Córdoba',
'MIRATE',
];
const defaultImage = `${baseUrl}/assets/img/logo_mirate.png`;
const finalTitle = title ? `${title} | ${appName}` : appName;
const finalDescription = description || defaultDescription;
const finalKeywords = [...new Set([...keywords, ...defaultKeywords])].join(', ');
const finalImage = image || defaultImage;
return (
{/* Basic Meta Tags */}
{finalTitle}
{author && }
{/* Open Graph / Facebook */}
{/* Article specific OG tags */}
{type === 'article' && (
<>
{publishedTime && }
{modifiedTime && }
{author && }
{section && }
{tags.map((tag, index) => (
))}
)}
{/* Twitter Card */}
{/* Canonical URL */}
{/* JSON-LD Structured Data */}
{jsonLd && (
)}
);
}