87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
|
|
interface HeadProps {
|
|
title: string;
|
|
description: string;
|
|
keywords: string;
|
|
currentLang: string;
|
|
}
|
|
|
|
export function Head({ title, description, keywords, currentLang }: HeadProps) {
|
|
useEffect(() => {
|
|
// Update document title
|
|
document.title = title;
|
|
|
|
// Update meta description
|
|
const metaDescription = document.querySelector('meta[name="description"]');
|
|
if (metaDescription) {
|
|
metaDescription.setAttribute('content', description);
|
|
} else {
|
|
const meta = document.createElement('meta');
|
|
meta.name = 'description';
|
|
meta.content = description;
|
|
document.head.appendChild(meta);
|
|
}
|
|
|
|
// Update meta keywords
|
|
const metaKeywords = document.querySelector('meta[name="keywords"]');
|
|
if (metaKeywords) {
|
|
metaKeywords.setAttribute('content', keywords);
|
|
} else {
|
|
const meta = document.createElement('meta');
|
|
meta.name = 'keywords';
|
|
meta.content = keywords;
|
|
document.head.appendChild(meta);
|
|
}
|
|
|
|
// Update language attribute
|
|
document.documentElement.lang = currentLang;
|
|
|
|
// Update Open Graph tags
|
|
const ogTitle = document.querySelector('meta[property="og:title"]');
|
|
if (ogTitle) {
|
|
ogTitle.setAttribute('content', title);
|
|
} else {
|
|
const meta = document.createElement('meta');
|
|
meta.setAttribute('property', 'og:title');
|
|
meta.content = title;
|
|
document.head.appendChild(meta);
|
|
}
|
|
|
|
const ogDescription = document.querySelector('meta[property="og:description"]');
|
|
if (ogDescription) {
|
|
ogDescription.setAttribute('content', description);
|
|
} else {
|
|
const meta = document.createElement('meta');
|
|
meta.setAttribute('property', 'og:description');
|
|
meta.content = description;
|
|
document.head.appendChild(meta);
|
|
}
|
|
|
|
// Update Twitter Card tags
|
|
const twitterTitle = document.querySelector('meta[name="twitter:title"]');
|
|
if (twitterTitle) {
|
|
twitterTitle.setAttribute('content', title);
|
|
} else {
|
|
const meta = document.createElement('meta');
|
|
meta.name = 'twitter:title';
|
|
meta.content = title;
|
|
document.head.appendChild(meta);
|
|
}
|
|
|
|
const twitterDescription = document.querySelector('meta[name="twitter:description"]');
|
|
if (twitterDescription) {
|
|
twitterDescription.setAttribute('content', description);
|
|
} else {
|
|
const meta = document.createElement('meta');
|
|
meta.name = 'twitter:description';
|
|
meta.content = description;
|
|
document.head.appendChild(meta);
|
|
}
|
|
}, [title, description, keywords, currentLang]);
|
|
|
|
return null;
|
|
}
|