NEXT JS 站点元标记未被抓取

Question

我已经建立了一个 NEXT JS 网站，我正在尝试插入元标签，这将使我的帖子例如LinkedIn 和 FB 看起来不错且定制。这是我使用并插入到我的 index.js 网站中的代码：

export default function Home() {
  return (
    <>
      <Layout>
        <Head>
          <meta property="og:type" content="website" />
          <meta property="og:title" content="Business- und Karrierecoaching" />
          <meta
            property="og:description"
            content="Beratung und Begleitung in jeder Phase Ihres Berufslebens!"
          />
          <meta
            property="og:image"
            content="https://anjavojta.com/wp-content/uploads/2023/10/title_photo_blue.png"
          />
          <meta property="og:url" content="https://marliestheresbrunner.at" />
        </Head>
        <Hero />
      </Layout>
    </>
  );
}

这是我的文件夹结构：

仍然，标签没有被刮掉，如果我使用https://www.linkedin.com/post-inspector/，它甚至告诉我“没有找到og：图像”。

显示的输出（例如在 LinkedIn 帖子上）始终是来自我的 Hero 组件的代码，这很奇怪。我的 Hero 组件中没有插入任何元标记。这是我的 Hero 组件的代码（位于“组件”文件夹内 - 请参阅上图中的文件夹结构）：

export default function Hero() {
  return (
    <>
      <Head>
        <title>Business- und Karrierecoaching</title>
      </Head>
      <div css={pageContainer}>
        <div css={heroContainer}>
          <div css={heroHeadingContainer}>
            Business- <br />
            und Karrierecoaching
          </div>
          <div css={heroSubheadingContainerItalic}>
            <i>Einstieg – Aufstieg – Orientierung – Veränderung – Neustart</i>
          </div>
          <div css={heroSubheadingContainer}>
            Beratung und Begleitung in jeder Phase <br />
            Ihres Berufslebens!
          </div>

          <Link href="/offer/" css={buttonStylesBlue}>
            Mein Angebot
          </Link>
          <Link href="/contact" css={buttonStylesLight}>
            Infogespräch
          </Link>

          <div css={signatureStyles}>
            <Image
              src={'/images/signature.png'}
              alt="Unterschrift von Marlies Theres Brunner"
              width={397}
              height={120}
            />
          </div>
        </div>
      </div>
    </>
  );
}

非常感谢您的帮助！

安雅

这是我到目前为止所尝试过的（也没有成功）：

将元标签放入我的 _app.js 和 Hero 组件 Head 中
更改了图片网址

Answer 1

问题：

标签没有被刮掉，如果我使用https://www.linkedin.com/post-inspector/它甚至告诉我“没有找到og：图像”。

可能的原因：

头部标签放置

显示的输出（例如在 LinkedIn 帖子上）始终是来自我的 Hero 组件的代码，这很奇怪。 Hero 组件具有标题，该标题将应用于导入它的页面（如果该页面没有标题）

解决方案：

将该 Head 标签放入 _app.js 中，这将使它们在主页以及没有任何 Head 标签的页面上可用。

您也可以将 Head 标签放在
_document.js
中，但不能在其中保留标题标签 （请阅读下面给出的第 1 链接）。此元数据在所有页面上都可用（附加到）。

如果您有通用的元数据，则将其放在
_document.js
中，并且更改的元数据（标题）将其保留在自己的页面/组件中。

这是我制作的一个小示例代码：（复制粘贴并在其中运行）

结果： （我进行了构建并测试了元数据的存在，它们存在）

它演示了 Head 标签的行为和位置以及它如何影响页面（标题和元数据）

说明：

下面的代码有一个
```
Hero component
```
和
```
Head
```
标签。
然后是一个页面
```
nomd
```
没有
```
Head
```
标签（或任何类型的元数据，只是内容）
然后是一个页面
```
md
```
，它有自己的
```
Head
```
标签
然后是一个导入
```
Hero component
```
的英雄页面，它从组件获取元数据
在 _app.js 中，我已经链接到上述页面。打开控制台，进入“元素”选项卡并查看元数据。

NextJS 版本：

14.0.1

文件夹结构：

projectName
├── .gitignore
├── components
│   └── Hero.js
├── jsconfig.json
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── api
│   ├── hero
│   │   └── index.js
│   ├── index.js
│   ├── md
│   │   └── index.js
│   ├── nomd
│   │   └── index.js
│   ├── _app.js
│   └── _document.js
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
├── README.md
├── styles
│   └── globals.css
└── tailwind.config.js

_document.js：

projectName\pages\_document.js

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head >
        <meta name="keywords" content="MY, WEBSITE, KEYWORDS" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

_app.js

projectName\pages\_app.js

：

import Head from 'next/head'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>Homepage (title from _app.js)</title>
        <meta
                property="og:description"
                content="ADD YOUR METADATA TAGS, BELOW !!"
            />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

index.js

projectName\pages\index.js

（我添加了链接，可以轻松地在页面之间导航以查看标题和元数据更改）：

import { Inter } from 'next/font/google'
import Link from 'next/link'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <main
      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
    >
      <h1>This the Homepage !</h1>

      <Link href='/hero'>Page with Hero Component</Link>

      <br />

      <Link href='/md'>Page with Head tag in it.</Link>
      <br />


      <Link href='/nomd'>Page with no Head tag at all, nor in component.</Link>
    </main>
  )
}

index.js（英雄页面）

projectName\pages\hero\index.js

：

import Hero from '@/components/Hero'
import React from 'react'

const index = () => {
    return (
        <div>
            <h1> HERO PAGE </h1>
            <h3>This page has no head tag, Hero component imported which has head tag.</h3>

            <Hero />
        </div>
    )
}

export default index

英雄组件

projectName\components\Hero.js

：

import Head from 'next/head'
import React from 'react'

const Hero = () => {
    return (
        <>
            <Head>
                <title>Title by Hero Component</title>
            </Head>

            <h3>Hero Component !</h3>
        </>
    )
}

export default Hero

md页面

projectName\pages\md\index.js

：

import Head from "next/head"
    const MDPage = () => {
        return (
            <div>
                <Head>
                     <title>MD PAGE</title>
    
                    <meta
                        property="og:description"
                        content="ADD YOUR METADATA TAGS, BELOW !!"
                    />
                    
                </Head>
    
                <h1>Metadata Page</h1>
                <h3>This page has head tag, which contains meta-data.</h3>
    
            </div>
        )
    }
    
    export default MDPage

指定页面

projectName\pages\nomd\index.js

:

import React from 'react'

const NoMDPage = () => {
    return (
        <div>
            <h1>NoMDPage</h1>
            <h3>This page has no Head Tags.</h3>

            <p>This page will get Title & Head from _app.js </p>
        </div>
    )
}

export default NoMDPage

输出：

保持开发工具的
```
Elements Tab
```
打开，

进入主页 (

http://localhost:3000/), Title = Homepage (title from _app.js

) 以及来自 _app.js 的

Head

标签中的元数据

进入英雄页面 (
```
http://localhost:3000/hero
```
)，标题 = 英雄组件的标题 & 来自英雄组件的
```
Head
```
标签中的元数据
进入 MD 页面 (
```
http://localhost:3000/md
```
)，标题 = MD 页面和来自其自己的
```
Head
```
标签的元数据
进入指定页面（
```
http://localhost:3000/nomd
```
），Title = Homepage（标题来自 _app.js
```
) & metadata in 
```
Head` 标签来自 _app.js

<meta name="keywords" content="MY, WEBSITE, KEYWORDS">

出现在所有页面上，我将其放置在

_document.js

中

请阅读：

```
<title>
```
不应在 _document.js 中使用
```
<Head>
```
https://nextjs.org/docs/messages/no-document-title
元数据：https://nextjs.org/docs/pages/building-your-application/optimizing#metadata
头：https://nextjs.org/docs/pages/api-reference/components/head

如果还有疑问，请留言（我会更新答案）

NEXT JS 站点元标记未被抓取

问题描述投票：0回答：1

1个回答

最新问题

NEXT JS 站点元标记未被抓取

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1