如何在Progressive Web Apps(PWA)中处理HTML元数据

Question

在编写Progressive Web App(PWA)时,我正试图在我的head部分处理元数据html.通过元数据,我的意思是:

单页App Shell

上面的所有元数据对于应用中的每个页面都是不同的.使用单个html应用程序shell将丢失以上所有内容.可能有一些迹象表明我在这里错了,搜索引擎现在执行JavaScript.如果是这样,这是如何工作的？我会在每次客户端导航时使用AJAX检索HTML头吗？这适用于所有搜索引擎吗？有什么缺点？

使用此选项,每个页面都在服务器上呈现,并具有自己的自定义head元数据.您可以使用"网络优先"或"最快速率"缓存策略.这种方法的缺点是你会失去一些性能,因为你的app shell没有缓存在客户端,也没有立即加载,让用户可以立即查看.

两种选择似乎都相互对立.您可以拥有性能或良好的元数据,以提升您的SEO和页面共享体验.什么是快乐的中间地带？这两种世界的方法都是最好的吗？

我从谷歌灯塔项目中发现了这个相关的GitHub问题.

Answer 1

是的，根据这篇搜索引擎博客文章，谷歌确实执行了 javascript。另外，根据这个实际实验， Google 确实呈现 AJAX 内容，但与服务器呈现的页面不同，它需要更长的时间来索引动态内容。

回答你的问题，如果你在每个页面上进行服务器端渲染，那么 SEO 会很好，但应用程序外壳不会被缓存。但如果您正在构建单页应用程序，您可以在服务器端渲染您的第一个页面，并让 Javascript 完成其余的导航工作。您可以将元数据动态添加到每个导航的页面中。看看沃尔玛是怎么处理的。

否则，您可以在每个页面中执行 AJAX 调用来加载元数据，但这需要一些时间才能对页面建立索引，或者您可能必须触发 Google 网站站长工具的重新抓取，但这并不意味着您的内容不存在将被索引。