Как обрабатывать метаданные HTML в Progressive Web Apps (PWA)

Я пытаюсь обработать метаданные в разделе head моего html при написании Progressive Web App (PWA). По метаданным я имею в виду:

Одиночная оболочка приложения

Все метаданные, указанные выше, различны для каждой страницы приложения. Использование единственной оболочки приложения html потеряет все вышеперечисленное. Может показаться, что я ошибаюсь здесь и что поисковые системы теперь выполняют JavaScript. Если да, то как это работает? Я бы использовал AJAX для извлечения заголовка HTML при каждой навигации на стороне клиента? Будет ли это работать для всех поисковых систем? Каковы недостатки?

Отображение на стороне сервера

С помощью этой опции каждая страница отображается на сервере с ее собственными метаданными head. Вы можете использовать стратегию кэширования "Первая сеть" или "Самый быстрый первый". Недостатком такого подхода является то, что вы теряете некоторую производительность, потому что ваша оболочка приложения не кэшируется на стороне клиента и не загружается мгновенно, что дает пользователю возможность сразу посмотреть.

Вопрос?

Оба варианта кажутся противоположными друг другу. У вас может быть производительность или хорошие метаданные с повышением эффективности вашего SEO и обмена опытом. Какая счастливая промежуточная площадка? Есть ли лучший подход обоих миров?

Update

Я нашел эту связанную с GitHub проблему из проекта маяка Google.

ОТВЕТЫ

Ответ 1

Yup Google выполняет javascript в соответствии с этим почтой поисковой системы в блоге. Также в соответствии с этот практический эксперимент Google делает контент AJAX, но в отличие от страниц, обработанных сервером, требуется более длительное время для индексации динамического содержимого.

Приступая к вашему вопросу, если вы делаете рендеринг на стороне сервера на каждой странице, тогда SEO будет хорошим, но оболочка приложения не будет кэшироваться. Но если вы создаете одностраничное приложение, вы можете отобразить первую страницу на стороне сервера и позволить Javascript выполнять работу по остальной части навигации. Динамические изменения метаданных можно добавлять к страницам в каждой навигации. Посмотрите, как это работает walmart.

В противном случае вы можете выполнить вызов AJAX на каждой странице для загрузки метаданных, но потребуется некоторое время, чтобы страница была проиндексирована, или вам может потребоваться повторный обход инструментов Google Webmaster, но это не значит, что вы контент не будет проиндексирован.

Ответ 2

Я думаю, что ваш ответ касается того, как сайты социальных сетей и пауки поисковых систем потребляют ваш контент. Хотя Google может анализировать многие сайты SPA, в последние месяцы они отслеживают эти рекомендации. Вы можете создать очень сложного сервисного работника для выполнения ваших "спа", но вам лучше всего уделять внимание тому, чтобы ваш контент предварительно отображался на сервере как можно больше для сайтов SEO и социальных сетей. Подумайте об этом таким образом, кэширование сервисного персонала может заменить или сделать большую часть того, что мы делали с SPA, за последние 7 лет или около того.

Ответ 3

Пожалуйста, используйте ниже метатег для 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" />

После добавления метаданных, откройте URL-адрес своего сайта в сафари и выберите Добавить на главный экран.

Он покажет ваш сайт в приложении с названием и значком приложения.