blocks|key|396961|text|是的，根据这篇search+engine+land博客文章，谷歌确实执行了javascript。此外，根据this+practical+experiment的说法，谷歌确实会呈现AJAX内容，但与服务器呈现的页面不同的是，它需要更长的时间来索引动态内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|396962|对于你的问题，如果你在每个页面上进行服务器端渲染，那么SEO会很好，但应用程序shell将不会被缓存。但是，如果您正在构建一个单页面应用程序，您可以在服务器端呈现您的第一个页面，并让Javascript在导航的其余部分完成工作。您可以将元数据动态添加到每个导航上的页面。看看walmart是如何处理它的。|396963|否则，您可以在每个页面中执行AJAX调用来加载元数据，但这将需要一些时间来为页面建立索引，或者您可能必须从Google网站管理员工具触发重新爬行，但这并不意味着您的内容不会被索引。|396964|entityMap|0|LINK|mutability|MUTABLE|url|http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157|1|https://www.stephanboyer.com/post/122/does-google-execute-javascript|2|https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8^0|7|I|0|1H|P|1|0|3T|7|2|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]|$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]]]

<p>Yup Google does execute javascript according to this <a href="http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157" rel="nofollow noreferrer">search engine land</a> blog post. Also according to <a href="https://www.stephanboyer.com/post/122/does-google-execute-javascript" rel="nofollow noreferrer">this practical experiment</a> Google does render AJAX content but unlike server rendered pages it takes a longer time to index dynamic content.</p>

<p>Coming to your question, If you do server side rendering on each and every page then SEO will be good but app shell will not be cached. But if you are building a Single Page Application, You can render your first page on Server Side and let Javascript do the work on rest of the navigation. You can add meta data dynamically to the pages on each navigation. Look how <a href="https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8" rel="nofollow noreferrer">walmart</a> deals with it.</p>

<p>Otherwise you can do an AJAX call in every page to load meta data but it will take some time for the page to get indexed or you might have to trigger a re-crawl from Google Webmaster tools but that doesn't mean your content is not going to be indexed.</p>


blocks|key|400134|text|请使用下面的meta标签为渐进式Web应用程序(PWA)，它是为我工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|400135|请将以下metas添加到您的索引文件中。|400136|<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">|code-block|syntax|javascript|400137|另外，请为Iphone添加应用程序图标：|400138|<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"+/>|400139|添加此metas后，请在safari中打开您的站点url并选择添加到主屏幕。|400140|它将显示您的网站在应用程序的标题和应用程序图标。|400141|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Please use below meta tag for Progressive Web App (PWA), it's working for me.</p>

<p>Please add below metas to your index file.</p>

<pre><code>&lt;meta name="full-screen" content="yes"&gt;
&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
&lt;meta name="mobile-web-app-capable" content="yes"&gt;
&lt;meta name="apple-mobile-web-app-title" content="Your App Name"&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"&gt;
</code></pre>

<p>Also please add app icon for Iphone:</p>

<pre><code>&lt;link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicon/57x57.png" /&gt;

&lt;link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicon/72x72.png" /&gt;

&lt;link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicon/114x114.png" /&gt;

&lt;link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicon/144x144.png" /&gt;

&lt;link rel="apple-touch-icon" href="assets/img/favicon/92x92.png" /&gt;
</code></pre>

<p>After adding this metas please open your site url in safari and select Add to home screen.</p>

<p>It will showing your website in to app with title and app icon.</p>


blocks|key|3440211|text|我认为你的回答涉及到社交媒体网站和搜索引擎蜘蛛如何消费你的内容。虽然谷歌可以解析许多SPA网站，但近几个月来，他们在某种程度上回到了这些指导方针上。你可以建立一个非常复杂的服务工作者来执行你的'spa‘活动，但如果你专注于在服务器上尽可能多地为SEO和社交媒体网站预先呈现你的内容，你会得到更好的服务。这样想吧，服务工作者缓存可以取代或本地化我们在过去7年左右使用SPA所做的大部分工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3440212|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I think your answer relates to how do social media sites and search engine spiders consume your content. While Google can parse many SPA sites, they have sort of back tracked on those guidelines in recent months.
You can build a very complex service worker to perform your 'spa' activities, but you are better served by focusing on having your content pre-rendered on the server as much as possible for the SEO and social media sites.
Think about it this way, service worker caching can replace or make native most of what we have been doing with SPAs the past 7 years or so.</p>


<p>I'm trying to get my head around handling metadata in the <code>head</code> section of my <code>html</code> when writing a Progressive Web App (PWA). By metadata, I mean:</p>

<ul>
<li><code>title</code> &amp; <code>description</code> meta tags</li>
<li>Atom feed <a href="https://stackoverflow.com/questions/440391/how-to-tell-web-browsers-about-atom-feeds">link URL</a> meta tag</li>
<li><a href="http://www.opensearch.org" rel="noreferrer">OpenSearch</a> meta tag</li>
<li><a href="https://developers.google.com/search/docs/guides/intro-structured-data" rel="noreferrer">Google Structured Data</a></li>
<li><a href="http://ogp.me/" rel="noreferrer">Facebook OpenGraph</a></li>
<li><a href="https://dev.twitter.com/cards/overview" rel="noreferrer">Twitter Cards</a></li>
</ul>

<h2>Single Page App Shell</h2>

<p>All of the metadata above is different for every page in the app. Using a single <code>html</code> app shell would lose all of the above. There may be some indication that I am wrong <a href="https://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications">here</a> and that search engines now execute JavaScript. If so, how does this work? Would I use AJAX to retrieve the HTML head upon every client side navigation? Would this work for all search engines? What are the disadvantages?</p>

<h2>Server Side Rendering</h2>

<p>With this option, every page is rendered on the server with it's own custom <code>head</code> metadata. You could use the 'Network First' or 'Fastest First' caching strategy. The downside with this approach is that you lose some performance because your app shell is not cached on the client side and does not load instantly, giving the user something to look at straight away.</p>

<h2>Question?</h2>

<p>Both options seem opposed to each other. You can either have performance or good metadata with boosts to your SEO and page sharing experiences. What is the happy middle ground? Is there a best of both worlds approach?</p>

<h2>Update</h2>

<p>I found <a href="https://github.com/GoogleChrome/lighthouse/issues/2091" rel="noreferrer">this</a> related GitHub issue from the Google lighthouse project.</p>


How do you handle HTML Metadata in Progressive Web Apps (PWA)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在编写渐进式Web应用程序(PWA)时，我正在尝试在html的head部分处理元数据。元数据，我的意思是：title & tag元标签原子提要元tag元标签单页应用程序外壳上面的所有元数据对于应用程序中的每个页面都是不同的。使用单一的html应用程序外壳将失去上述所有功能。可能有一些迹象表明我错了，搜索引擎现在正在执行...

问如何在渐进式Web应用程序(PWA)中处理HTML元数据
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在渐进式Web应用程序(PWA)中处理HTML元数据EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在渐进式Web应用程序(PWA)中处理HTML元数据
EN