NEXT JS站点元标记未被抓取

我已经建立了一个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>
    </>
  );
}

字符串
下面是我的文件夹结构：
Folder Structure
尽管如此，标签并没有被刮除，如果我使用https://www.linkedin.com/post-inspector/，它甚至告诉我，“没有og：图像被发现”。
显示的输出（例如在LinkedIn帖子上）总是来自我的Hero组件的代码，这很奇怪。我没有在我的Hero组件中插入任何元标记。下面是我的Hero组件的代码（在文件夹“components”中-请参阅上图中的文件夹结构）：

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>
    </>
  );
}

型
非常感谢你的帮助！
Anja
以下是我到目前为止尝试过的方法（也没有成功）：

将元标记放入my_app. js & Hero组件Head中
更改了图像URL

问题：

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

可能原因：

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

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

您也可以在_document.js中放置Head标签，但不能在其中保留title标签 （阅读下面给出的1 st链接）。此元数据在所有页面上都可用（附加）。
如果您有通用的元数据，那么将其放在_document.js中&更改的元数据（标题）将其保留在自己的页面/组件中。

这是我做的一个小的示例代码：（复制粘贴并在其中运行）
**结果：（我构建并测试了元数据的存在，它们存在）

它演示了Head标签的行为和位置以及它如何影响页面（标题和元数据）
说明：
下面的代码有一个带有Head标记的Hero component。
然后是一个没有Head标签的页面nomd（或者任何类型的元数据，只有内容）
然后是一个页面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.jsprojectName\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.jsprojectName\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

型

nomd pageprojectName\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打开，
从_app.js转到主页（http://localhost:3000/), Title = Homepage (title from _app.js）和Head标记中的元数据
在进入英雄页面（http://localhost:3000/hero）时，标题=英雄人物的标题和来自英雄人物的Head标签中的元数据
在进入MD页面（http://localhost:3000/md）时，标题= MD页面和来自其自身Head标记的元数据
转到nomd页面（http://localhost:3000/nomd）时，Title = Homepage（title from _app.js ) & metadata in Head` tag from _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站点元标记未被抓取

1条答案

相关问题

热门标签

最新问答