如何处理渐进式Web应用（PWA）中的HTML元数据

在编写渐进式Web应用程序（PWA）时，我试图在我的

html

部分的

head

中处理元数据。所谓元数据，我的意思是：

• 标题

  和

  说明

  元标记
• 原子馈送元标签
• 元标记

单页应用程序外壳 以上所有元数据对于应用程序中的每个页面都是不同的。使用单个

html

appshell将丢失上述所有功能。可能有一些迹象表明我错了，搜索引擎现在执行JavaScript。如果是，这是如何工作的？我会在每次客户端导航时使用AJAX检索HTML头部吗？这是否适用于所有搜索引擎？缺点是什么

服务器端渲染 使用此选项，服务器上的每个页面都会呈现自己的自定义

head

元数据。您可以使用“网络优先”或“最快优先”缓存策略。这种方法的缺点是，你会失去一些性能，因为你的应用程序外壳没有缓存在客户端，也没有立即加载，这给了用户一些可以直接查看的东西

问题？ 这两种选择似乎相互对立。您可以拥有性能或良好的元数据，从而提升您的SEO和页面共享体验。什么是快乐的中间地带？有一种两全其美的方法吗

更新

---

我在谷歌灯塔项目中发现了相关的GitHub问题。

是的，根据这篇博文，谷歌确实执行javascript。同样根据谷歌的说法，它确实呈现AJAX内容，但与服务器呈现的页面不同，索引动态内容需要更长的时间

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

---

否则，您可以在每个页面中调用AJAX来加载元数据，但页面需要一些时间才能被索引，或者您可能需要从Google Webmaster工具触发重新爬网，但这并不意味着您的内容不会被索引。

请使用下面的meta tag for Progressive Web App（PWA），这对我有用

请将以下图元添加到索引文件中

<meta name="full-screen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Your App Name">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

另外，请为Iphone添加应用程序图标：

<link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicon/57x57.png" />

<link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicon/72x72.png" />

<link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicon/114x114.png" />

<link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicon/144x144.png" />

<link rel="apple-touch-icon" href="assets/img/favicon/92x92.png" />

添加此元后，请在safari中打开您的网站url，然后选择“添加到主屏幕”

---

它将在应用程序中显示您的网站，并带有标题和应用程序图标。

我认为您的答案与社交媒体网站和搜索引擎蜘蛛如何消费您的内容有关。虽然谷歌可以解析许多SPA网站，但近几个月来，他们已经在某种程度上回溯了这些指导原则。 你可以建立一个非常复杂的服务人员来执行你的“spa”活动，但是你最好专注于尽可能多地在服务器上为SEO和社交媒体网站预先呈现你的内容。

---

这样想，服务工作者缓存可以取代或使我们在过去7年左右对SPA所做的大部分工作成为本地的。

实际上，SEL文章已经过时了。谷歌几年前就不赞成AJAX策略。这几乎是水疗作为消费者选择的终结。