プログレッシブウェブアプリ（PWA）でHTMLメタデータをどのように処理しますか
プログレッシブウェブアプリ（PWA）を作成するときに、headのhtmlセクションでメタデータを処理することに頭を悩ませようとしています。メタデータとは、次のことを意味します。
title＆descriptionメタタグ- Atomフィード リンクURL メタタグ
- OpenSearch メタタグ
- Google構造化データ
- Facebook OpenGraph
- Twitterカード
シングルページアプリシェル
上記のメタデータはすべて、アプリのページごとに異なります。単一のhtmlアプリシェルを使用すると、上記のすべてが失われます。私が間違っているという兆候があるかもしれません ここ そして検索エンジンがJavaScriptを実行するようになりました。もしそうなら、これはどのように機能しますか？ AJAXを使用して、すべてのクライアント側ナビゲーションでHTMLヘッドを取得しますか？これはすべての検索エンジンで機能しますか？欠点は何ですか？
サーバー側のレンダリング
このオプションを使用すると、すべてのページが独自のカスタムheadメタデータを使用してサーバー上にレンダリングされます。 「ネットワークファースト」または「最速ファースト」のキャッシュ戦略を使用できます。このアプローチの欠点は、アプリのシェルがクライアント側でキャッシュされず、すぐに読み込まれないため、パフォーマンスが低下し、ユーザーがすぐに確認できるようになることです。
質問？
両方のオプションは互いに反対のようです。 SEOとページ共有のエクスペリエンスを向上させることで、パフォーマンスまたは優れたメタデータを得ることができます。幸せな中間点は何ですか？両方の長所のアプローチはありますか？
更新
Google灯台プロジェクトから this 関連するGitHubの問題が見つかりました。
うんグーグルはこれに従ってjavascriptを実行します 検索エンジンの土地 ブログ投稿。また、 この実際の実験 GoogleはコンテンツをレンダリングしますAJAXコンテンツですが、サーバーでレンダリングされたページとは異なり、動的コンテンツのインデックス作成に時間がかかります。
あなたの質問に来ると、すべてのページでサーバー側のレンダリングを行う場合、SEOは良好ですが、アプリシェルはキャッシュされません。ただし、シングルページアプリケーションを構築している場合は、サーバー側で最初のページをレンダリングし、残りのナビゲーションでJavascriptに作業を任せることができます。各ナビゲーションのページにメタデータを動的に追加できます。 walmart がどのように対処するかを見てください。
それ以外の場合は、すべてのページでAJAX呼び出しを行ってメタデータを読み込むことができますが、ページがインデックスに登録されるまでに時間がかかるか、Googleウェブマスターツールから再クロールをトリガーする必要がありますがこれは、コンテンツがインデックスに登録されないという意味ではありません。
あなたの答えは、ソーシャルメディアサイトと検索エンジンスパイダーがあなたのコンテンツをどのように消費するかに関係していると思います。グーグルは多くのSPAサイトを解析することができますが、それらはここ数ヶ月でそれらのガイドラインに戻って追跡されています。非常に複雑なサービスワーカーを構築して「スパ」アクティビティを実行することもできますが、SEOおよびソーシャルメディアサイト用に可能な限りサーバー上でコンテンツを事前にレンダリングすることに重点を置くことで、より良いサービスを提供できます。このように考えると、Service Workerキャッシングは、過去7年ほどのSPAで行ってきたことのほとんどをネイティブに置き換えるかネイティブにすることができます。