Подводные грабли Google-AMP и Яндекс-Турбо

Подводные грабли Google-AMP и Яндекс-Турбо

Сообщение k0ttee »

Вот немного о том, какие проблемы возникали с Google-AMP и Яндекс-Турбо (на самописном сайте без движков).

Что не так с AMP-страницами реализованными плагином Wordpress:
- ссылки ведут на обычные страницы
- навигационного меню нет даже кастрированного
- в подвале предательская dufollow-ссылка на вордпресс.ком

Что не так с Турбо-страницами? Да тоже все плохо.

Наверно не нужно объяснять, что отсутствие навигации на страницах - верный путь потерять посетителя.

Вот несколько поблем, которые могут возникнуть в ходе рукопашной реализации или допиливания плагинов.

Кот перерабатывал старый сайт, адреса которого в классическом стиле /страница.html. А раз так - значит и AMP будет краше сделать в классическом виде адресов, то есть не /страница.html/amp а будто бы на сервере есть каталог /amp/страница.html. Разместить можно хоть на поддомен.

Проблема с путями к картинкам

Относительные пути вида <img src="картинки/картинка.png"> на AMP-адресах ссылаются на сайт.ру/amp/картинки/картинка.png
Можно поколдовать через .htaccess а можно просто подставлять в началах относительных путей слэш.
Код: Выделить всё
#добавить слеш в начало относительных путей картинок (вместо img.png будет /img.png)
$article=preg_replace('/<img([^>]*)src=["\']([^"\'\\/][^"\']*)["\']/', '<img\1src="/\2"', $article);

Регулярное выражение выглядит страшновато, зато сработает и с тэгами картинок у которых навалено атрибутов вида <img альт тайтл класс айди src="картинка">

Проблема с зоопарком ссылок

Часто ссылки в контенте сделаны то задницей, то передницей. Никогда не знаешь, попадется тебе относительная или абсолютная ссылка с протоколом или без.
Я все привел к минимализму и стандартизации - отнисительные начинающиеся с /amp/

Код: Выделить всё
#все внутренние ссылки будут относительными (с добавлением /amp/ в начале)
$article=str_replace('https://'.$_SERVER["HTTP_HOST"].'/','/',$article); #абсолютные внутренние ссылки сделать относительными (вместо site.ru/page.html будет /page.html)
$article=str_replace('http://'.$_SERVER["HTTP_HOST"].'/','/',$article); #абсолютные внутренние ссылки сделать относительными (вместо site.ru/page.html будет /page.html)
$article=str_replace('//'.$_SERVER["HTTP_HOST"].'/','/',$article); #абсолютные внутренние ссылки сделать относительными (вместо site.ru/page.html будет /page.html)

$article=preg_replace('/((?:href) *= *[\'"](?!(\/\/)))/i', "$1/amp", $article); #дописать /amp к относительным ссылкам (вместо /page.html будет /amp/page.html)


Проблема с меню

На модных нынче страницах запрещен свой Javascript, поэтому неплохое меню сделанное JS-спойлерами нельзя использовать.
Придется переписать его с JS на CSS.

Вот легкий пример спойлера, чтобы скрывать группы навигационных кнопок-ссылок. Пример будет работать во всех браузерах, умеющих псевдокласс :checked (будет работать и в старой Opera 12, и даже в Interner Explorer 9).

Код: Выделить всё
.spoiler >  input + .box {
   display: none;
}
.spoiler >  input:checked + .box {
   display: block;
}

Код: Выделить всё
<div class="spoiler">
     <input type="checkbox" >
     <div class="box">
           Содержимое спойлера
     </div>
</div>


За это сообщение автора k0ttee поблагодарил:
birds
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 10322
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 5.80
Статус: всё
Спонсор
 
Re: Подводные грабли Google-AMP и Яндекс-Турбо

Сообщение birds »

Ты еще забыл упомянуть, что валидатор https://validator.w3.org/ не может договориться с гугловским валидатором AMP страниц https://search.google.com/test/amp. Приоритет конечно на Google иначе он не будет индексировать AMP страницы, выдавая ошибку.
Твой RX траф в надежных руках! Рейт 45% подробнее - tg: @onlinerx
Зарабатываю на крипте | играх | банках. Продвигаю сайты: статьями и вечными
Онлайн будильник - не проспи! | Генератор ников
Аватара пользователя
birds
Администратор
 
Группа: Администраторы
Сообщения: 19659
Рефералы: -208
Зарегистрирован: 24 авг 2010
Откуда: местный житель
Средств на руках: 107.10
Статус: летящий вперед
Re: Подводные грабли Google-AMP и Яндекс-Турбо

Сообщение k0ttee »

Не получается совместить атрибут языка документа с атрибутом этой байды, поэтому - или <html amp> или <html lang="ru">

Вычитал, что можно <html amp-data> однако и на ёлку залезть и жопу не ободрать не удалось.

Еще вместо <style amp-custom> можно <style amp-data="custom"> или типа того... Гугля начнет предупреждать, что применен устаревающий вариант. Но даже так придется выбирать - между валидатором W3C и валидатором AMP.

И зоопарк ссылок не удалось победить. :(
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 10322
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 5.80
Статус: всё
Спонсор
 
Re: Подводные грабли Google-AMP и Яндекс-Турбо

Сообщение k0ttee »

Вопрос на засыпку...
Если свои свисто-перделки на JS делать нельзя, как тогда прикрутить к AMP-странице уведомление "сайт собирает куки" требуемое в законодательном порядке?
Или страницы грузятся с серверов гугла, так что посещения сайта деюре и не было?
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 10322
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 5.80
Статус: всё
Спонсор
 
Re: Подводные грабли Google-AMP и Яндекс-Турбо

Сообщение birds »

k0ttee, забей пока, пусть хоть в поиске появятся для начала, а то до сих пор нет :o Хотя ошибок валидатор не находит...
Твой RX траф в надежных руках! Рейт 45% подробнее - tg: @onlinerx
Зарабатываю на крипте | играх | банках. Продвигаю сайты: статьями и вечными
Онлайн будильник - не проспи! | Генератор ников
Аватара пользователя
birds
Администратор
 
Группа: Администраторы
Сообщения: 19659
Рефералы: -208
Зарегистрирован: 24 авг 2010
Откуда: местный житель
Средств на руках: 107.10
Статус: летящий вперед

Вернуться в Верстка, дизайн, графика

 


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 8