简体繁体 English

在 Javascript 中设置元标记是否可以在没有服务器端渲染的情况下工作？

[英]Does setting meta tags in Javascript work without server side rendering?

原文 2020-10-04 16:46:07 3 1 javascript/ html/ single-page-application/ meta

I am developing a single page application and each page should have different open graph meta tags.我正在开发一个单页应用程序，每个页面都应该有不同的开放图形元标记。

It seems that tools like react-helmet just use Javascript functions like element.setAttribute to update the meta tags as you transition between pages.看起来像react-helmet这样的工具只是使用像element.setAttribute这样的 JavaScript 函数来在页面之间转换时更新元标记。

My question is: does this work without server side rendering?我的问题是：这在没有服务器端渲染的情况下可以工作吗？ Because in this case you would have a "default" set of meta tags and then when the page is loaded the client-side routing would determine what page you were actually on and then the Javascript would set the proper meta tags in the onPageLoad handler.因为在这种情况下，您将拥有一组“默认”元标记，然后在加载页面时，客户端路由将确定您实际在哪个页面上，然后 Javascript 将在onPageLoad处理程序中设置正确的元标记。

That is, if you inspect the source for the page, the meta tags would be just the default, but if some crawler instead waited for the page to load and then inspected the new meta tags, they would see the proper values.也就是说，如果您检查页面的来源，元标记将只是默认值，但如果某些爬虫等待页面加载然后检查新的元标记，它们会看到正确的值。

I don't use server side rendering.我不使用服务器端渲染。 Is it a waste of time to use something like react-helmet without server side rendering?在没有服务器端渲染的情况下使用 react-helmet 之类的东西是浪费时间吗？ If I link my page on Slack or Discord will it simply inspect the source to determine the meta tags or does it wait for the page to load and then grab the newer meta tags that were set via Javascript?如果我在 Slack 或 Discord 上链接我的页面，它会简单地检查源以确定元标记，还是等待页面加载然后获取通过 Javascript 设置的较新的元标记？

I figured I'd ask rather than test first because developing this functionality and pushing to production is a decent amount of work if this isn't even supported and someone already knows that.我想我会先问而不是先测试，因为如果甚至不支持此功能并且有人已经知道，那么开发此功能并将其投入生产是一项可观的工作。