Статьи

SEO-дружественный бесконечный свиток с прогрессивным улучшением

  1. Что такое бесконечный свиток?
  2. Почему бесконечный свиток вреден для SEO
  3. Как получить свой торт и съесть его
  4. SEO-дружественные рекомендации для бесконечной прокрутки
  5. Чего не хватает в руководстве Google по бесконечной прокрутке
  6. SEO-дружественный бесконечный свиток с изящной деградацией
  7. SEO-дружественный бесконечный свиток с прогрессивным улучшением

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

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

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

Что такое бесконечный свиток?

Бесконечная прокрутка, как следует из названия, позволяет читателю прокручивать веб-страницу вниз и постоянно просматривать новый контент, даже не достигнув конца. Его также иногда называют «бесконечной прокруткой», «непрерывной прокруткой», «ленивой загрузкой», «автопейджером» или «распуском страниц». Хорошо выполненный, это увлекательный веб-браузер, потому что вам никогда не нужно нажимать на ссылку и дождитесь загрузки новой страницы, чтобы увидеть следующий набор заголовков, изображений или другого содержимого.

Задача веб-разработчиков, реализующих бесконечную прокрутку, заключается в том, что вы не можете доставлять бесконечно длинную страницу контента и все же поддерживать разумную скорость загрузки страниц. Чтобы страницы загружались быстро, вы должны раздавать их кусочками.

Типичная реализация бесконечной прокрутки отображает определенное количество элементов (обычно заголовков в моем мире) для начальной загрузки страницы, но затем использует JavaScript для асинхронной загрузки нового контента, когда вы прокручиваете определенную точку на странице. В идеале новый контент начнет загружаться в фоновом режиме при прокрутке до того, как асинхронные вызовы JavaScript будут замечены.

Для примера бесконечной прокрутки, проверьте Mashable ,

Реализация бесконечной прокрутки в Mashable, которая использует тег noscript

Скорее всего, вы были на Facebook, поэтому вы, вероятно, знакомы с бесконечной прокруткой с точки зрения взаимодействия с пользователем, даже если вы не знали, как она называется. В наши дни большинство сайтов социальных сетей используют бесконечную прокрутку, наряду с Google Images, Mashable и множеством популярных блогов и новостных сайтов. Анил Дэш даже предположил пару лет назад, что пришло время для Интернета прекратить публикацию веб-страниц и начать публикацию потоков , Бесконечная прокрутка является идеальным решением для потокового опыта.

Почему бесконечный свиток вреден для SEO

Проще говоря: Google не сканирует JavaScript. На самом деле мы знаем, что Google все чаще начинает выполнять JavaScript, поскольку они пытаются очистить ценный контент издателя, упорядочить мировую информацию и сделать ее доступной. В целях этого обсуждения (и вашего оптимизированного веб-сайта) мы предполагаем, что Google и другие сканеры поисковых систем не сканируют JavaScript.

Это означает, что контент, доставляемый при начальной загрузке страницы (и отображаемый в исходном коде HTML вашей веб-страницы), является единственным контентом, видимым для поисковых систем. Вторая и последующие загрузки страниц, которые выглядят как бесконечный поток, обрабатываются асинхронными вызовами JavaScript, что означает, что поисковые системы не увидят ничего из этого.

Как получить свой торт и съесть его

Google-х недавнее руководство по бесконечной прокрутке говорит нам, чтобы наши системы управления контентом создавали постраничную серию страниц (страниц компонентов) для представления в тандеме с бесконечной прокруткой. Изображение ниже от Google показывает, как это выглядит, с бесконечной прокруткой слева и соответствующей последовательностью страниц с компонентами справа.

Руководство Google по бесконечной прокрутке указывает на использование классической нумерации страниц в паре с опытом бесконечной прокрутки.

Это именно то, что я советую своим клиентам сделать некоторое время сейчас. Вы можете прочитайте полный пост в официальном блоге Google для веб-мастеров, чтобы получить подробные инструкции, но вот краткое резюме:

SEO-дружественные рекомендации для бесконечной прокрутки

  1. Создайте серию страниц, которые будут служить компонентными страницами, которые вводятся в бесконечную прокрутку. Убедитесь, что каждая страница индивидуально доступна и видима с отключенным JavaScript. Включите разумное количество элементов на каждой странице, чтобы они быстро загружались, и обеспечьте, чтобы при переходе с одной страницы на другую не перекрывались элементы.
  2. Следуйте рекомендациям для SEO-ориентированных URL и убедитесь, что каждая страница компонента в серии может быть доступна в браузере по отдельности.
  3. Настройте классическую нумерацию страниц, которая позволяет пользователям и сканерам поисковых систем переходить непосредственно к каждой странице компонента в серии. Обязательно следуйте рекомендациям по разбиению на страницы, используя rel = next и rel = prev.

    Пример классической нумерации страниц

  4. Используйте API истории HTML5 для реализации replaceState / pushState на странице бесконечной прокрутки. Это позволит вам автоматически обновлять URL в адресной строке, когда пользователь прокручивает страницу вниз. Это имитирует изменение URL, которое произойдет, если пользователь действительно щелкнет по ссылкам на страницы. Если пользователь скопирует URL-адрес из адресной строки после прокрутки вниз по странице, ссылка с прямым доступом перейдет прямо к нужной точке в серии. Это также позволяет пользователю выполнять последовательное резервное копирование, поскольку ваш код JavaScript может хранить страницы в истории просмотра.

Существует множество ресурсов для изучения того, как реализовать бесконечную прокрутку и использовать API истории HTML5. Эта статья, Манипулирование историей для развлечения и проффта Это отличная отправная точка. Блог Twitter Engineering также опубликовал проницательная статья о том, как они приближаются к этой технике, которую они описывают как «рендеринг Hijax + на стороне сервера». Идея состоит в том, что они используют AJAX для «захвата» цели URL из события onClick и вместо того, чтобы позволить щелчку генерировать обратный вызов сервер, они используют его для вызова AJAX. Конечный результат выглядит как быстрая загрузка страницы для пользователя.

Чего не хватает в руководстве Google по бесконечной прокрутке

Если вы решите внедрить бесконечную прокрутку, следуя указаниям Google, вы можете задаться вопросом, как именно обеспечить бесконечную прокрутку для пользователей с современными браузерами в сочетании с классической нумерацией страниц для пользователей, которые этого не делают. Как это часто бывает, существует более одного способа кожи кошки.

Это сводится к понятию «прогрессивное улучшение» или «постепенная деградация». Прогрессивное улучшение в основном означает, что вы начинаете с опыта, доступного для всех браузеров, а затем постепенно расширяете этот базовый опыт, добавляя новые уровни функциональности для современных браузеров. , Изящная деградация очень похожа, но нюанс состоит в том, что вы начинаете с полнофункционального опыта, а затем убедитесь, что в старых браузерах материал не ломается или грациозно ломается.

SEO-дружественный бесконечный свиток с изящной деградацией

Mashable - один из наиболее известных примеров крупного издателя, который внедрил бесконечную прокрутку с использованием принципа постепенной деградации. Если у вас включен Javascript, вы получите бесконечный опыт прокрутки; в противном случае вы увидите содержимое тега <noscript>, который содержит ссылки на большой набор разбитых на страницы архивов.

Большое количество ссылок появляется внизу домашней страницы Mashable в теге noscript.

Хотя это пример крупного технически подкованного издателя, это не та реализация, которую я бы порекомендовал своим SEO-клиентам. В посте Адама Шерка « SEO Советы по бесконечной прокрутке «Он и я обсуждаем в области комментариев, что тег noscript не будет наиболее желательным методом для отображения ссылок на страницы в браузерах, не поддерживающих JavaScript. Я не уверен в обосновании Адама (возможно, он пояснит в комментариях здесь), но для меня это из-за история злоупотреблений спамерами SEO связан с этим тегом.

SEO-дружественный бесконечный свиток с прогрессивным улучшением

Мой предпочтительный метод для реализации удобной для поиска бесконечной прокрутки основан на подходе прогрессивного улучшения. Начните с опыта, который работает без включенного JavaScript, и постепенно улучшайте его с помощью бесконечной прокрутки. Для этого может быть полезно использовать библиотеку обнаружения функций, такую ​​как Modernizr ,

Один из самых полезных и четко закодированных примеров, которые я нашел для этого подхода, - « Бесконечный свиток AJAX ”Страница плагина jQuery. Если вы посмотрите на их пример здесь вы увидите классическую нумерацию страниц, когда у вас отключен JavaScript, и бесконечную прокрутку с URL-адресом в адресной строке, обновляющуюся при прокрутке вниз, если у вас включен JavaScript.

Я хотел бы закончить это замечательным примером бесконечной прокрутки, дружественным к SEO, от крупного издателя, но я, честно говоря, не смог найти тот, который действительно прибил бы его. Там в Google картинки , конечно, но это несколько другой вариант использования. Если у вас есть хороший пример SEO-дружественной бесконечной прокрутки на главном сайте издателя новостей / СМИ, обязательно поделитесь ею в комментариях ниже. Через пару месяцев у меня будет замечательная акция, так что следите за обновлениями.

-

Обновление 26.05.16: Мы помогли многим клиентам с тех пор, как это было написано. Вот хороший пример из Rolling Stone:

http://www.rollingstone.com/music/artists/jimi-hendrix

Попробуйте просмотреть это с включенным JavaScript и без него, и вы увидите разницу.

А вот немного другой подход к Us Weekly. Это скорее «конечная прокрутка», поскольку три дополнительные статьи загружаются через JavaScript, если вы продолжаете прокрутку:

http://www.usmagazine.com/entertainment/news/adele-forgets-the-lyrics-to-her-own-song-reacts-perfectly-watch-w207979

Обратите внимание на использование pushState для обновления URL при прокрутке. Если пользователь поделится одним из этих URL-адресов напрямую, он сгенерирует полную загрузку страницы на стороне сервера соответствующего содержимого. В этом случае, однако, нет компонента нумерации страниц. Мы просто хотели получить «конечную прокрутку», не затрагивая изначально загруженную статью.

Что такое бесконечный свиток?
Что такое бесконечный свиток?

Новости

Werkel интернет магазин
Электроснабжение дома, квартиры является той системой, которой мы пользуемся раз в день. Подключение устройств к розеткам, включение и выключение света — мы нередко исполняем эти деяния, не задумываясь.

Интернет магазин искусственных цветов
Человеческая фантазия безгранична, как и стремление человека к прекрасному. Это не может не радовать творческих личностей, да и вообще представителей современного прогрессивного человечества. Но в двойне

Интернет магазин ЛЕГО
Ка быстро растут чужие дети, да что там чужие и свои растут не медленнее. Еще казалось только вчера Вы ощутили небывалый прилив нежности только сказав мужу новость, что скоро он станет папой. И вот уже

Билайн домашний интернет за 1 рубль
Компания Beeline предоставляет абонентам не только качественную  мобильную связь, но и домашний интернет с телевидением. Появилась услуга недавно, поэтому многие клиенты ещё не знают об интересной

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

Кому какой пакет: на что хватит 1 ГБ мобильного интернета, а на что нужно больше
28 Января 2016 15:00 34791 С появлением 3G в Украине мобильный интернет перестал быть медленным и неполноценным придатком к смартфону, а стал таким же рабочим инструментом, как и Wi-Fi.  Скорость

Операторы показали украинцам 3G: на что хватит 1 ГБ трафика
Операторы предлагают абонентам пакеты с 0,7-2,5 ГБ трафика. Много это или мало? И что конкретно можно сделать, имея в смартфоне 1 ГБ? К середине июня уже два из трех мобильных операторов - Астелит (life:)

Интернет-банк Банка Авангард
Обзор системы интернет-банка Пожалуй, не будет преувеличением сказать, что интернет-банк – самый востребованный банковский сервис современного банка. Возможность подключения практически

Наталья Толстая - Что делать, если у мужа появилась любовница? Советы психолога
Еще лет двадцать назад невозможно было себе представить, чтобы люди знакомились, влюблялись и изменяли своим половинам, не вставая с кресла. Но с появлением Интернета все это стало реальностью... Виртуальный

Что делать если 3G,LTE и WIFI не работает
«Мегафон» - это компания, которая предоставляет услуги мобильной связи, а так же доступ к Интернету. Эта российская компания набирает все большей и большей популярности, так как имеет множество разных