BrowseSEO 无法读取 Next.js React App 中的 META 标签 [英] META tags in Next.js React App are not readable by BrowseSEO
问题描述
我有一个使用 Next.js 框架构建的网站.为了优化 SEO，我在 组件中添加了 Unique 标签，从 Next/Head 开始每个页面(index.tsx，titles/[title].tsx).但是，在使用 BrowseSEO 等抓取网站进行测试时，每个页面上指定的 Meta 标签不可读.标题也显示错误.
I got a site that built with Next.js framework. As to optimise the SEO, I added Unique <Meta/> tags in <Head/> component from Next/Head on each pages (index.tsx, titles/[title].tsx). However, when testing with crawling site like BrowseSEO, the Meta tags specified on each pages was not readable. Title also been displayed wrong.
这是browseSEO中网站页面的链接:吃动物页面
Here is link to the site page in browseSEO: Eating Animal Page
这是来自 pages/titles/[title].tsx 文件的片段
Here is the snippet from pages/titles/[title].tsx file
const Title: NextPage<{ content: Content; }> = ({
content,
}) => {
const {title, titlePath, desc} = content
return (
<>
<Head>
<link rel="canonical" href={`https://www.iwonder.com${titlePath}`} />
<title>{`Watch ${title} Streaming Online | iwonder`}</title>
<meta key="description" name="description" content={desc} />
</Head>
...
</>
)
}
export const getServerSideProps = async ({ req }: GetServerSidePropsContext) => {
const { url = '' } = req
const thePath = uri.parse(url).pathname
const id = thePath.substring(thePath.lastIndexOf('/')
const { content } = await getSingleTitle(id) //fetch for content data
return { props: { content } }
}
export default Title
如果有人可以帮助突出问题所在，那就太好了.谢谢！
It would be if anyone could help to highlight what is wrong. Thanks!
推荐答案
这些元标记存在于 DevTools 中的页面上，但不存在于页面源中.所以这些特定的元标记是在客户端添加的.你在browseSEO中看不到它们，因为它在分析页面时似乎没有执行JS.
These meta tags are present on a page in DevTools but not present in the page source. So these particular meta tags are added on a client-side. You don't see them in browseSEO because it seems it's not executing JS when analyzing pages.
我假设 page 和 desc 变量取决于 Next.js 路由器解析的页面参数 [title].next/router 是一个客户端路由器，所以依赖它的代码只能在客户端执行.这就是在客户端添加这些元标记的原因.
I assume that page and desc variables depend on the page parameter [title] parsed by Next.js router. next/router is a client-side router, so the code dependent on it can be executed only on a client-side. That is why these meta tags are added on a client side.
如果您需要在第一次响应时在页面源中显示动态元标记，则必须预先呈现它.您可以使用 getStaticProps 在构建时渲染或getServerSideProps 在请求时进行渲染.
If you need dynamic meta tags to be present at page source at first response you'd have to pre-render it. You can use getStaticProps to render at build time or getServerSideProps to render at request time.
这篇关于BrowseSEO 无法读取 Next.js React App 中的 META 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
