seo.tsx 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import Head from 'next/head'
  2. import { useTranslations } from 'next-intl'
  3. interface SEOProps {
  4. title?: string
  5. description?: string
  6. keywords?: string
  7. image?: string
  8. url?: string
  9. type?: 'website' | 'article' | 'product'
  10. locale?: string
  11. }
  12. export default function SEO({
  13. title: customTitle,
  14. description: customDescription,
  15. keywords: customKeywords,
  16. image = '/images/og-image.png',
  17. url = 'https://aiartools.com',
  18. type = 'website',
  19. locale = 'en'
  20. }: SEOProps) {
  21. const t = useTranslations('seo')
  22. const title = customTitle || t('title')
  23. const description = customDescription || t('description')
  24. const keywords = customKeywords || t('keywords')
  25. return (
  26. <Head>
  27. {/* 基础 meta 标签 */}
  28. <title>{title}</title>
  29. <meta name="description" content={description} />
  30. <meta name="keywords" content={keywords} />
  31. <meta name="author" content="Aiartools Team" />
  32. <meta name="robots" content="index, follow" />
  33. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  34. {/* Open Graph meta 标签 */}
  35. <meta property="og:type" content={type} />
  36. <meta property="og:title" content={title} />
  37. <meta property="og:description" content={description} />
  38. <meta property="og:image" content={image} />
  39. <meta property="og:url" content={url} />
  40. <meta property="og:site_name" content="Aiartools" />
  41. <meta property="og:locale" content={locale} />
  42. {/* Twitter Card meta 标签 */}
  43. <meta name="twitter:card" content="summary_large_image" />
  44. <meta name="twitter:title" content={title} />
  45. <meta name="twitter:description" content={description} />
  46. <meta name="twitter:image" content={image} />
  47. <meta name="twitter:creator" content="@aiartools" />
  48. <meta name="twitter:site" content="@aiartools" />
  49. {/* 语言相关 */}
  50. <meta httpEquiv="content-language" content={locale} />
  51. <link rel="alternate" hrefLang="en" href="https://aiartools.com" />
  52. <link rel="alternate" hrefLang="zh" href="https://aiartools.com/zh" />
  53. <link rel="alternate" hrefLang="x-default" href="https://aiartools.com" />
  54. {/* 额外的 meta 标签 */}
  55. <meta name="theme-color" content="#6366f1" />
  56. <meta name="msapplication-TileColor" content="#6366f1" />
  57. <link rel="canonical" href={url} />
  58. </Head>
  59. )
  60. }