99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Head from 'next/head';
|
||
|
|
import { useSEO, type Locale } from '../lib/useSEO';
|
||
|
|
|
||
|
|
interface SEOHeadProps {
|
||
|
|
page: string;
|
||
|
|
locale: Locale;
|
||
|
|
canonicalUrl?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function SEOHead({ page, locale, canonicalUrl }: SEOHeadProps) {
|
||
|
|
const { seoData, loading } = useSEO(page, locale);
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const baseUrl = 'https://cloudtech.com';
|
||
|
|
const fullCanonicalUrl = canonicalUrl ? `${baseUrl}${canonicalUrl}` : baseUrl;
|
||
|
|
|
||
|
|
// Language mapping for HTML lang attribute
|
||
|
|
const langMap: Record<Locale, string> = {
|
||
|
|
'zh-CN': 'zh-CN',
|
||
|
|
'zh-TW': 'zh-TW',
|
||
|
|
en: 'en',
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Head data-oid="rbbs46g">
|
||
|
|
<title data-oid="we7hfsg">{seoData.title}</title>
|
||
|
|
<meta name="description" content={seoData.description} data-oid="1_p23x5" />
|
||
|
|
<meta name="keywords" content={seoData.keywords} data-oid="q_ualci" />
|
||
|
|
|
||
|
|
{/* Open Graph / Facebook */}
|
||
|
|
<meta property="og:type" content="website" data-oid="n_07g8_" />
|
||
|
|
<meta property="og:url" content={fullCanonicalUrl} data-oid="mgsq8_s" />
|
||
|
|
<meta property="og:title" content={seoData.title} data-oid="2k160a9" />
|
||
|
|
<meta property="og:description" content={seoData.description} data-oid="q82_tg-" />
|
||
|
|
<meta property="og:image" content={`${baseUrl}/og-image.jpg`} data-oid="tfhobsl" />
|
||
|
|
<meta property="og:locale" content={langMap[locale]} data-oid="tu9muam" />
|
||
|
|
|
||
|
|
{/* Twitter */}
|
||
|
|
<meta property="twitter:card" content="summary_large_image" data-oid="cvktrxd" />
|
||
|
|
<meta property="twitter:url" content={fullCanonicalUrl} data-oid="5rlpuu-" />
|
||
|
|
<meta property="twitter:title" content={seoData.title} data-oid="5_tazk6" />
|
||
|
|
<meta property="twitter:description" content={seoData.description} data-oid="slw34vl" />
|
||
|
|
<meta
|
||
|
|
property="twitter:image"
|
||
|
|
content={`${baseUrl}/twitter-image.jpg`}
|
||
|
|
data-oid="_lgczsv"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Canonical URL */}
|
||
|
|
<link rel="canonical" href={fullCanonicalUrl} data-oid="w-_5z9w" />
|
||
|
|
|
||
|
|
{/* Language alternates */}
|
||
|
|
<link
|
||
|
|
rel="alternate"
|
||
|
|
hrefLang="zh-CN"
|
||
|
|
href={`${baseUrl}/zh-CN${canonicalUrl || ''}`}
|
||
|
|
data-oid="xtbqrkk"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<link
|
||
|
|
rel="alternate"
|
||
|
|
hrefLang="zh-TW"
|
||
|
|
href={`${baseUrl}/zh-TW${canonicalUrl || ''}`}
|
||
|
|
data-oid="jgqo8r3"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<link
|
||
|
|
rel="alternate"
|
||
|
|
hrefLang="en"
|
||
|
|
href={`${baseUrl}/en${canonicalUrl || ''}`}
|
||
|
|
data-oid="z3l.a2h"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<link
|
||
|
|
rel="alternate"
|
||
|
|
hrefLang="x-default"
|
||
|
|
href={`${baseUrl}${canonicalUrl || ''}`}
|
||
|
|
data-oid=":gi8ol2"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Additional meta tags */}
|
||
|
|
<meta name="robots" content="index, follow" data-oid="2-x5ojw" />
|
||
|
|
<meta name="author" content="CloudTech" data-oid="m5ao.k4" />
|
||
|
|
<meta
|
||
|
|
name="viewport"
|
||
|
|
content="width=device-width, initial-scale=1"
|
||
|
|
data-oid="0be1gvo"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<meta httpEquiv="Content-Language" content={langMap[locale]} data-oid="za4fr5v" />
|
||
|
|
</Head>
|
||
|
|
);
|
||
|
|
}
|