通过组件渲染时，一些元标记未添加到头

发布于 2025-02-06 23:24:28 字数 2591 浏览 1 评论 0原文

我有一个具有以下结构的metatags.tsx组件；

const DEFAULT_IMAGE = {
  url: OgImage, //cloudinary url
  width: '1200',
  height: '630',
};

const MetaTags: FunctionComponent<Props> = (props) => {
  const url = props.url ? `${BASE_URL}${props.url}` : BASE_URL;
  const title = props.title || DEFAULT_TITLE;
  const description = props.description || DEFAULT_DESCRIPTION;
  const image = props.image || DEFAULT_IMAGE;
  const type = props.type || DEFAULT_TYPE;

  return (
    <>
      <meta name="description" content={description} />

      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:card" content="summary" />

      <meta property="og:title" content={title} />
      <meta property="og:url" content={url} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content={type} />
      <meta property="og:site_name" content="Example.com" />
      <meta property="og:locale" content="en_GB" />
      <meta property="og:image:type" content="image/jpeg" />
      <meta property="og:image:user_generated" content="false" />
      <meta property="og:image" content={image.url} />
      <meta property="og:image:width" content={image.width} />
      <meta property="og:image:height" content={image.height} />
    </>
  );
};

export default MetaTags;

然后，我将此metatags在页面组件上的组件类似，因此

import React, { FC } from 'react';
import Head from 'next/head';
import MetaTags from '../head/MetaTags';

const ExamplePage: FC = () => {
  return (
    <>
      <Head>
        <title>Example Page</title>
        <MetaTags
          title="Example Page"
          url="example-page"
          description="Example Page Description"
        />
      </Head>
    </>
  );
};

，以下meta标签不会添加到head> head tag

<meta property="og:image:user_generated" content="false" />
<meta property="og:image" content={image.url} />
<meta property="og:image:width" content={image.width} />
<meta property="og:image:height" content={image.height} />

如果我直接在head组件中的页面组件上添加元标记，而不是使用metatags组件返回元标记。

使用版本

非常感谢。

原文

I have a MetaTags.tsx component that has the following structure;

const DEFAULT_IMAGE = {
  url: OgImage, //cloudinary url
  width: '1200',
  height: '630',
};

const MetaTags: FunctionComponent<Props> = (props) => {
  const url = props.url ? `${BASE_URL}${props.url}` : BASE_URL;
  const title = props.title || DEFAULT_TITLE;
  const description = props.description || DEFAULT_DESCRIPTION;
  const image = props.image || DEFAULT_IMAGE;
  const type = props.type || DEFAULT_TYPE;

  return (
    <>
      <meta name="description" content={description} />

      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:card" content="summary" />

      <meta property="og:title" content={title} />
      <meta property="og:url" content={url} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content={type} />
      <meta property="og:site_name" content="Example.com" />
      <meta property="og:locale" content="en_GB" />
      <meta property="og:image:type" content="image/jpeg" />
      <meta property="og:image:user_generated" content="false" />
      <meta property="og:image" content={image.url} />
      <meta property="og:image:width" content={image.width} />
      <meta property="og:image:height" content={image.height} />
    </>
  );
};

export default MetaTags;

Then I import this MetaTags component on a page component like so

import React, { FC } from 'react';
import Head from 'next/head';
import MetaTags from '../head/MetaTags';

const ExamplePage: FC = () => {
  return (
    <>
      <Head>
        <title>Example Page</title>
        <MetaTags
          title="Example Page"
          url="example-page"
          description="Example Page Description"
        />
      </Head>
    </>
  );
};

However, the following meta tags do not get added to the head tag

<meta property="og:image:user_generated" content="false" />
<meta property="og:image" content={image.url} />
<meta property="og:image:width" content={image.width} />
<meta property="og:image:height" content={image.height} />

Same issue occurs if I add the meta tags directly on the page component inside the Head component, instead of using the MetaTags component to return the meta tags.

Using version [email protected]

Any help would be greatly appreciated.

分享到QQ

分享到微博