Как сделать amp-страницу для сайта?

Question

[Chernichko]

Надо сделать эти самые amp страницы.

Но что то не понятно: как их сделать то?
Это набор новых файлов html? Или для мобильной версии своя верстка?
Хотя тут написано, что желательно адаптивная верстка...

Или как?

У яндекса турбо страницы понятны - rss и вот тебе турбо страница.

Answer 1

[Владимир]

https://www.smashingmagazine.com/2016/09/the-build...
PWA это набор технологий, которіе позволяют использовать вашу страницу как нейтивное мобильное приложение.
Это не только адаптивная верстка, это и метаданные, которые позволяют добавить значек вашей страницы на домашний экран и возможность работы офлайн, и высокая скорость загрузки, и плавный интерфейс ну и конечно адаптивная верстка.
Вот тут можно проверить что реализовано у вас на странице, а что нет.
https://developers.google.com/web/tools/lighthouse...

А тут чеклист, что делает страницу PWA
https://developers.google.com/web/progressive-web-...

Для быстрого старта есть такая статья, там есть ссылки, на инструменты которые позволят сгенерить базовые функции, но она на Украинском, если найдете аналог на Английском, я заменю https://codeguida.com/post/966

Comments

[Владимир]

Ошибся в понятиях,
https://instapage.com/blog/pwa-vs-amp
https://codeburst.io/pwa-vs-amp-choosing-the-best-...

Answer 2

[Евгений Вольф]

У яндекса турбо страницы понятны - rss и вот тебе турбо страница.

Ага, и возможности такие же как у RSS, даже поддержки таблиц нет (по крайней мере не было, когда я смотрел).

Хотя, да, мы не об этом... AMP - это отдельная страница, доступная по отдельному адресу (URL'у). Особенностью этой страницы является:
1. Строгие лимиты на количество CSS'ов
2. Допустимо использование заранее подготовленных для Вас библиотек/компонентов

К адаптиву эти страницы имеют довольно косвенное отношение. Адаптив - сам по себе (по желанию), AMP страницы - сами по себе (так же по желанию). Ссылка на AMP-версию страницы соотв. размещается на той же странице, на AMP-версию которой Вы хотите попасть.

Это набор новых файлов html?

Условно говоря - да. Если сайт состоит из "HTML-страниц", то AMP-страницы - будут новым набором этих самых страниц, точнее говоря, отдельными версиями уже существующих страниц.

Comments

[Владимир]

Зачем вы вводите в заблуждение, где написано о том, что AMP должно біть отдельной страницей ?

[Евгений Вольф]

Владимир, а где написано обратное?

[Евгений Вольф]

Владимир, вообще, возвращаясь к вашему вопросу, "где написано?", написано, довольно много где, например тут:

Чтобы поисковик понял, что есть AMP-версия страницы, она должна содержать ссылку:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

А на AMP-странице — присутствовать обратная ссылка:

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Из контекста данной цитаты не сложно догадаться, что ссылка едва ли должна быть на туже самую страницу, на которой мы уже находимся... Более того, если внимательно посмотреть на этот пример - не сложно увидеть, что ссылка на AMP-страницу и на "не AMP" страницу - отличаются, то есть они разные... или, говоря иначе, это ссылки на разные/отдельные страницы.

[Владимир]

Евгений Вольф,
https://www.ampproject.org/docs/guides/discovery

In some cases, you might want to have both a non-AMP and an AMP version of the same page, for example, a news article. Consider this: If Google Search finds the non-AMP version of that page, how does it know there’s an AMP version of it?

What if I only have one page?

If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:

[Евгений Вольф]

If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself

Ага, ок, давайте попробуем как-нибудь перевести это на русский... У меня получился примерно такой перевод:

Если у вас есть только одна страница и эта страница является AMP-страницей, вы должны добавить каноническую, которая будет указывать на саму себя

Что в свою очередь, если немного подумать, ещё раз говорит о том, что AMP-страницы - это отдельные страницы, и ничего общего с не-AMP страницами они не имеют. Иначе говоря, нигде не сказано, что AMP-страница не является отдельной. Там сказано, что сайт может иметь только AMP-страницы и (что вытекает из контекста) - не иметь не-AMP страниц, но ни слова о том, что "обычная" и "AMP" страница - размещается в одном и том же файле или может быть доступна по одной и той же ссылке...

[Chernichko]

Ну , это все замечательно... а делать то чего?

У меня сайт на Yii2.
Вот вьшки. Вот шаблон. Вот всякие стили-скрипты.

Менять теги на amp-теги у текущего кода - явно не вариант.
Делать мобильный шаблон, для которого использовать amp?
Но вроде как не стоит делать мобильную и десктопную версии - адаптивность наше все.

Да еще и мета ссылки на версии делать.

Это такой темный лес сейчас.
С чего начать действовать?
(Читать док-цию не предлагайте - уже)
Гугл не нагуглил, ясности не внес.

Мне нужен первый шаг.

[Евгений Вольф]

Ну , это все замечательно... а делать то чего?

С чего начать действовать?

Не могу на 100% поручиться за Yii, т.к. очень давно его удачно забыл. Но, я любом другом фреймворке, из тех что я могу вспомнить, ситуация выглядит примерно так:
0. У Вас есть какие-то макеты (шаблоны) страниц, Вам нужно создать их AMP-версии. Например так: /views/page1.template - обычная страница; /views/page1.template.amp - AMP-версия этой же страницы
1. Добавить параметр ко всем URL'ам, самый простой вариант, например так: /page/home - простая страница, /page/home?amp или /page/home?amp=1 или /page/home/amp -- AMP-версия этой же страницы, которая соотв. загружает AMP-вьюшку (шаблон/макет).
2. Модифицировать уже имеющиеся VIEW'шки таким образом, что бы в них появилась версия на AMP-страницу (вьюшку [шаблон/макет])

Трогать "обычные страницы" или заменять обычный адаптив на его AMP-версию - я бы настоятельно не рекомендовал, т.к. AMP-страницы выглядят довольно убого и нужны для двух вещей:
1. Для показа вашего сайта в специальной линейке гугл-выдачи
2. Для пользователей, у которых тормозные телефоны и/или очень плохой коннект к сети
(это основное, разумеется есть и другие причины)

При этом, адаптив и "нормальная" версия сайта - так и остаются на своих местах.

[Владимир]

Chernichko, Евгений Вольф, Еще раз, если тебе на обічной странице мешает AMP функциональность, хотя я не могу взять в голову как она может мешать, делай отдельную, если нет - делай AMP страницу сразу.

[Евгений Вольф]

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

Довольно простой пример, резко отличающий AMP-страницы от "обычных" - на AMP странице не может быть больше 50Кб CSS-кода, при этом на обычной странице, можно хоть 50Мб CSS"ов иметь...

[Евгений Вольф]

Владимир, зачем "отдельную лепить?" - это риторический вопрос. Зависит от качества и бюджета конечного проекта... Однозначного ответа на этот вопрос, к сожалению, я не могу дать, так же как и на вопрос, например, "зачем делать поддержку IE-10 в вёрстке?". Лично я обычно не делаю...