您如何处理渐进式 Web 应用程序 (PWA) 中的 HTML 元数据答案

【问题标题】：How do you handle HTML Metadata in Progressive Web Apps (PWA)您如何处理渐进式 Web 应用程序 (PWA) 中的 HTML 元数据
【发布时间】：2017-12-06 10:28:00
【问题描述】：

在编写渐进式 Web 应用程序 (PWA) 时，我试图在 html 的 head 部分处理元数据。我的意思是元数据：

title & description 元标签
Atom 提要link URL 元标记
OpenSearch元标记
Google Structured Data
Facebook OpenGraph
Twitter Cards

单页应用外壳

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

服务器端渲染

使用此选项，每个页面都使用自己的自定义head 元数据在服务器上呈现。您可以使用“网络优先”或“最快优先”缓存策略。这种方法的缺点是您会损失一些性能，因为您的应用程序外壳没有缓存在客户端并且不会立即加载，从而使用户可以立即查看。

问题？

这两个选项似乎相互对立。您可以通过提升您的 SEO 和页面共享体验来获得性能或良好的元数据。什么是快乐的中间地带？有没有两全其美的方法？

更新

我从 Google 灯塔项目中找到了 this 相关的 GitHub 问题。

【问题讨论】：

标签： html seo metadata single-page-application progressive-web-apps

【解决方案1】：

是的，Google 确实根据这篇 search engine land 博客文章执行了 javascript。同样根据this practical experimentGoogle 确实呈现 AJAX 内容，但与服务器呈现的页面不同，它需要更长的时间来索引动态内容。

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

否则，您可以在每个页面中执行 AJAX 调用以加载元数据，但页面被编入索引需要一些时间，或者您可能需要从 Google 网站管理员工具触发重新抓取，但这并不意味着您的内容不会被编入索引。

【讨论】：

其实SEL文章已经过时了。谷歌几年前弃用了 AJAX 政策。 love2dev.com/blog/…这几乎是 SPA 作为消费者选择的终结。

【解决方案2】：

请为 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 中打开您的网站网址并选择添加到主屏幕。

它会将您的网站显示在带有标题和应用图标的应用中。

【讨论】：

【解决方案3】：

我认为您的回答与社交媒体网站和搜索引擎蜘蛛如何使用您的内容有关。虽然谷歌可以解析许多 SPA 网站，但最近几个月他们对这些指导方针有所回溯。您可以构建一个非常复杂的服务人员来执行您的“水疗中心”活动，但通过专注于尽可能多地在服务器上为 SEO 和社交媒体网站预呈现您的内容，您会得到更好的服务。这样想，Service Worker 缓存可以取代或使我们在过去 7 年左右使用 SPA 所做的大部分工作成为原生。

【讨论】：