如何在渐进式Web应用程序(PWA)中处理HTML元数据
在编写渐进式Web应用程序(PWA)时，我正在尝试在html的head部分处理元数据。元数据，我的意思是：
title& tag- OpenSearch元标签
- 原子提要link URL元tag
- OpenSearch元标签
单页应用程序外壳
上面的所有元数据对于应用程序中的每个页面都是不同的。使用单一的html应用程序外壳将失去上述所有功能。可能有一些迹象表明我错了here，搜索引擎现在正在执行JavaScript。如果是这样，这是如何工作的？我会使用AJAX来检索每个客户端导航的HTML head吗？这对所有的搜索引擎都有效吗？它的缺点是什么？
服务器端渲染
使用此选项，每个页面都将使用其自己的自定义head元数据呈现在服务器上。您可以使用“网络优先”或“最快优先”缓存策略。这种方法的缺点是您会损失一些性能，因为您的应用程序shell不会在客户端缓存，也不会立即加载，从而为用户提供了可以立即查看的内容。
有问题吗？
这两种选择似乎是对立的。您可以有性能或良好的元数据与提升您的SEO和页面共享体验。快乐的中间地带是什么？有没有两全其美的方法？
更新
我在谷歌灯塔项目中发现了与this相关的GitHub问题。
回答 3
Stack Overflow用户
发布于 2017-07-14 14:12:39
是的，根据这篇search engine land博客文章，谷歌确实执行了javascript。此外，根据this practical experiment的说法，谷歌确实会呈现AJAX内容，但与服务器呈现的页面不同的是，它需要更长的时间来索引动态内容。
对于你的问题，如果你在每个页面上进行服务器端渲染，那么SEO会很好，但应用程序shell将不会被缓存。但是，如果您正在构建一个单页面应用程序，您可以在服务器端呈现您的第一个页面，并让Javascript在导航的其余部分完成工作。您可以将元数据动态添加到每个导航上的页面。看看walmart是如何处理它的。
否则，您可以在每个页面中执行AJAX调用来加载元数据，但这将需要一些时间来为页面建立索引，或者您可能必须从Google网站管理员工具触发重新爬行，但这并不意味着您的内容不会被索引。
Stack Overflow用户
发布于 2017-07-20 22:49:48
我认为你的回答涉及到社交媒体网站和搜索引擎蜘蛛如何消费你的内容。虽然谷歌可以解析许多SPA网站，但近几个月来，他们在某种程度上回到了这些指导方针上。你可以建立一个非常复杂的服务工作者来执行你的'spa‘活动，但如果你专注于在服务器上尽可能多地为SEO和社交媒体网站预先呈现你的内容，你会得到更好的服务。这样想吧，服务工作者缓存可以取代或本地化我们在过去7年左右使用SPA所做的大部分工作。
Stack Overflow用户
发布于 2017-07-14 15:20:02
请使用下面的meta标签为渐进式Web应用程序(PWA)，它是为我工作。
请将以下metas添加到您的索引文件中。
<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" />添加此metas后，请在safari中打开您的站点url并选择添加到主屏幕。
它将显示您的网站在应用程序的标题和应用程序图标。
https://stackoverflow.com/questions/44880720
复制相似问题
腾讯云开发者
