X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сделать AMP (Accelerated Mobile Pages)
k0ttee
k0ttee
Topic Starter сообщение 13.1.2018, 5:27; Ответить: k0ttee
Сообщение #1


Насчет адресов - вынести можно как на поддомен amp.site.com/page так и в директорию site.com/amp/page, но не на отдельный домен (чтобы пользователь был на том же сайте).

Google подхватывает те страницы AMP, на которые ссылаются обычные. То есть - нужна перелинковка адресов (каноничный / АМПшный).
Делается это добавлением в блоке <head> линков типа этого:
<ink rel="canonical" href="https://site.com/page">
<ink rel="amphtml" href="https://site.com/amp/page">


Что обязательно должно быть в AMP странице

1.) Начинаться с типа документа <!doctype html>
2.) содержать тег <html> или <html amp>
3.) содержать теги <head> и <body>
4.) содержать внутри <head> тег <link rel="canonical" href="адрес">, указывающий на обычную версию страницы (или сам на себя, если обычной версии не существует)
5.) содержать внутри <head> тег <meta charset="utf-8"> (вписанный первым внутри <head>)
6.) содержать внутри <head> тег <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> (значение initial-scale=1 очень рекомендуется).
7.) содержать внутри <head> тег <script async src="https://cdn.ampproject.org/v0.js"></script>, который загружает библиотеку AMP JS (обязательно в самом конце <head>)
8.) содержать в теге <head> следующий код:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>


Какие ограничения есть для AMP страниц

1.) разрешены только асинхронные скрипты (то есть <script async src="file.js"></script> или <script defer src="file.js"></script>)
2.) запрещено вписывать стили по месту применения (то есть <div style="color:#060"></div> запрещается)
3.) все стили должны быть в HTML-файле, в единственном тэге <style amp-custom> (внутри <head> страницы)
4.) объем стилей ограничен размером в 50 килобайт (кто не уложился - у того не вёрстка, а груда говнокода)
5.) параметры «width» и «height» внешних ресурсов, таких как картинки, должны быть указаны внутри html
6.) нельзя вставить прямо в документ произвольный Javascript-код, можно использовать только поддерживаемую библиотеку AMP JS (подгружать можно)
7.) шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face
8.) запрещено использовать тег <img>, вместо него использовать <amp-img> (как-то вот так вот <amp-img src="файл" width="" height=""></amp-img>)
9.) стили css не должны использовать инструкции "!important" (говнокодеры сейчас вообще в шоке)

Очень настойчиво рекомендуется

Не используйте относительные URL при объявлении линка на AMP-страницу.
плохо: <link rel="amphtml" href="/amp/page">
хорошо: <link rel="amphtml" href="https://site/amp/page">

Компоненты AMP (шило на мыло)

Встроенные:
amp-ad - контейнер для отображения рекламы
amp-img - замена тега img
amp-video - замена HTML5-тегу video

Подключаемые отдельными библиотеками:
amp-anim - анимированное изображение (GIF)
amp-audio - замена HTML5-тегу audio
amp-carousel - карусель превью картинок по горизонтали
amp-fit-text - автоматическое уменьшение или увеличение размера шрифта, для впихивания в ограниченную область
amp-iframe - замена iframe
amp-image-lightbox - лайтбокс (полноразмерный просмотр большого изображения при клике на превью или ссылку)
amp-lightbox - еще один лайтбокс
amp-instagram - отображает пост в инстаграме
amp-twitter - отображает твит

Тестировать свое безобразие можно этим. Но имейте ввиду, что от частых проверок там придется гадать на капче. И не офигевайте от ошибок открыв консоль, большая их часть будет вызвана попыткой подгружать неразрешенное (так уж сделано средство тестирования).
https://search.google.com/test/amp


С какими еще проблемами можно столкнуться

Во-первых, разгадав капчу можно узнать что проверялка решила отдохнуть. :angry:
Прикрепленное изображение


Во-вторых, можно "активно огорчиться", узнав о запрете использования <noindex> в AMP-страницах. :laugh:


Прикрепленное изображение


Что хорошего в AMP

Наконец-то счетчики можно прикрутить асинхронно.
Яндекс-метрика добавляется в <head> (подгрузка с их CDN'ки)
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

А затем в то место, где её выводить собрались
<amp-analytics type="metrika">
            <script type="application/json">
                {
                    "vars": {
                        "counterId": "сюдаНомерСчетчикаВставить"
                        ...
                    }
                }
            </script>
</amp-analytics>


P.S:

Подключать рекламные блоки от гугла к AMP-страницам нужно особым образом.
https://support.google.com/adsense/answer/7183212?hl=ru


Если кому-то особо нефиг делать, можете переверстать страницу лейаутами специально под AMP.
https://www.ampproject.org/ru/docs/guides/responsive/control_layout


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
airman
airman
сообщение 15.1.2018, 12:01; Ответить: airman
Сообщение #2


Всем кто еще не позаботился сделать себе на сайте AMP страницы - не ленитесь, они помогу получить дополнительный мобильный трафик из Google


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
Topic Starter сообщение 18.1.2018, 22:37; Ответить: k0ttee
Сообщение #3


Не знаю как там с трафиком, но головной боли точно получите. :D

Докидываю ссылку на груду examples (поможет доразметить микроразметку).
https://jsonld-examples.com/schema.org/code/blog-markup.php


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
airman
airman
сообщение 21.1.2018, 23:28; Ответить: airman
Сообщение #4


k0ttee, уже получил, там снова какие-то ошибки :diablo: , завтра напишу тебе в скайп

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
5 чел. читают эту тему (гостей: 5, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1124 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2298 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3921 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3648 24.3.2024, 20:55
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1943 23.3.2024, 7:41
автор: Room


 



RSS Текстовая версия Сейчас: 29.3.2024, 14:44
Дизайн