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-адресов напрямую, он сгенерирует полную загрузку страницы на стороне сервера соответствующего содержимого. В этом случае, однако, нет компонента нумерации страниц. Мы просто хотели получить «конечную прокрутку», не затрагивая изначально загруженную статью.

Похожие

Комментарии