idea2app.github.io/components/PageHead.tsx at 9832b6ae224461c227f6e4f3a37b24453cb23c97 · idea2app/idea2app.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import Head from 'next/head';
import type { FC, PropsWithChildren } from 'react';

import { Name, SiteUrl, Summary } from '../models/configuration';

export type PageHeadProps = PropsWithChildren<
  Partial<Record<'title' | 'description' | 'ogImage' | 'type' | 'url', string>>
>;

export const PageHead: FC<PageHeadProps> = ({
  title,
  description = Summary,
  ogImage = 'https://github.com/idea2app.png',
  type = 'website',
  url = SiteUrl,
  children,
}) => {
  const fullTitle = (title ? `${title} - ` : '') + Name;
  const fullUrl = url.startsWith('/') ? `${SiteUrl}${url}` : url;

  return (
    <Head>
      {/* 基础 meta 标签 */}
      <title>{fullTitle}</title>
      <meta name="description" content={description} />

      {/* Open Graph */}
      <meta property="og:title" content={fullTitle} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content={type} />
      <meta property="og:image" content={ogImage} />
      <meta property="og:url" content={fullUrl} />
      <meta property="og:site_name" content={Name} />

      {/* Twitter */}
      <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={ogImage} />

      {/* 规范链接 */}
      <link rel="canonical" href={fullUrl} />

      {children}
    </Head>
  );
};