Статьи

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

Похожие

Определение SEO
Определение SEO SEO ( поисковая оптимизация ) можно определить как набор методов, применяемых к веб-сайту и третьим веб-сайтам с целью увеличения числа посетителей веб-сайта, естественно, в основных поисковых системах. Разрабатывая релевантный контент по очень конкретным темам, веб-мастер стремится расположить некоторые страницы вашего сайта с определенными ключевыми словами на первой странице результатов
SEO Лондон |
... для Google стала намного сложнее, и теперь это не просто случай открытия исходных файлов ваших сайтов в блокноте, добавления некоторых ключевых слов в различные теги HTML, загрузки файлов и ожидания результаты, достижения. На самом деле, по нашему мнению, и я уверен, что другие с нами согласятся, этот тип оптимизации, обычно называемый оптимизацией на странице, будет эффективен только на двадцать процентов при достижении рейтинга для любых ключевых слов, которые даже слегка конкурентоспособны.
Поля SEO
... странице. Поисковые системы используют метаданные для поиска релевантной информации для отображения в результатах поиска. Это включает в себя такие вещи, как заголовок страницы, мета-описание и ключевые слова. Поле для ввода метаданных можно найти в следующих местах: Домашняя страница : Настройка магазина ›Настройки магазина› Раздел поисковой оптимизации Страницы категорий :
Сан-Диего SEO
Сан-Диего Веб-маркетинг После применения методов SEO мы также предлагаем услуги веб-маркетинга, чтобы расширить эти результаты. Кампании веб-маркетинга нацеливают новых клиентов на ваше местоположение в Интернете. Веб-сайт вашей компании, который теперь отображается в связанных результатах поиска, будет продаваться для дальнейшего повышения рентабельности инвестиций и охвата большей части вашей целевой аудитории. В Сан-Диего веб-маркетинг включает в себя создание электронных
Что такое SEO?
Для того, чтобы зарабатывать деньги в Интернете, вам нужен трафик на ваш сайт. Чтобы увеличить трафик на ваш сайт или блог, вам нужно занять место на первой странице Google и других поисковых систем, таких как Bing & Yahoo. Мы будем говорить о Google, поскольку он владеет 66% всего поискового трафика и большей частью мобильного поискового
Google Places SEO - поисковая оптимизация Google Places
Что такое пакет Google Places SEO? Чтобы попасть в список Google Maps (официально известный как Google Places), на первой странице поиск по географическим регионам может стать проблемой, если вы не знакомы с тем, что делает хороший список, а что плохой. Здесь, в Superior Internet Marketing, мы точно знаем, что нужно для того, чтобы
SEO Analyzer - Интернет SEO Checker
... для тех, кто занимается SEO и веб-дизайном. Этот конкретный инструмент предоставит вам быстрый обзор веб-сайтов и SEO-аудит созданных вами веб-сайтов, так что вы сможете определить, нужно ли и где вносить какие-либо изменения, чтобы вы могли сделать его максимально эффективным, когда речь заходит о привлечении посетителей. и держать их заинтересованными. В отличие от многих подобных инструментов, рецензент веб-сайта полностью бесплатен. Когда вы воспользуетесь этим инструментом, вы поймете,
Как улучшить ваши SEO страницы
... ли у вас есть страница на вашем сайте и по какой-то причине она полностью игнорируется поисковыми системами? Какой действенный интеллект вы можете использовать в качестве стратегии или какой SEO Техника, которую вы можете реализовать, чтобы поместить эту страницу на карту? Следующая тактика способна исправить (1) осиротевшие страницы и (2) установить назначение страниц в стратегический порядок клевывания.
SEO Позиционирование: его значение сегодня
SEO позиционирование развивалось на протяжении многих лет. С одних дней он состоял в группировке некоторых ссылок и оптимизации результатов поиска, вплоть до сегодняшнего дня. Давайте посмотрим, что такое SEO в настоящее время. Аббревиатура SEO ( Поисковая оптимизация ), они по-прежнему представляют то же самое, однако поисковая система изменилась, то есть (поисковая система) и « Оптимизация
Что такое SMM и Smo?
Если вы уже знаете, что такое SEO и SEM, и как они помогают улучшить позиционирование в Интернете и теперь вы задаетесь вопросом, что такое позиционирование SMM и SMO , вот основные характеристики этих методов позиционирования. Для начала, SMM и SMO ​​позиционирование - это методы позиционирования, ориентированные на социальные сети или социальные сети.
Как улучшить SEO в Joomla 3.0?
Подробности создано: вторник, 01 апреля 2014 19:22 Каждый день появляются новые веб-сайты, созданные с помощью Joomla, и если методы SEO для поисковых систем не применяются активно, ваш сайт может быть забыт понемногу и никогда не улучшать позиции в рейтинге Google. Для предыдущих версий Joomla 1.5 и 2.5 есть хорошие плагины для SEO, но в версии

Комментарии

Несмотря на это, Нил считает, что «хотя в моем отце нет ни одной тонны, которая бы не сосала», он всегда говорил, что совпадений не было, так что « Может быть, мы встретились по причине?
Несмотря на это, Нил считает, что «хотя в моем отце нет ни одной тонны, которая бы не сосала», он всегда говорил, что совпадений не было, так что « Может быть, мы встретились по причине? Может быть, из этого получилось что-то хорошее? - Ничего, о чем я могу подумать, - произносит Эмма, скрывая новости Генри, и возвращает подарок в виде брелка, который она носила как ожерелье. Замечательная работа Дженнифер Моррисон.
Помните, мы рассмотрели, как структура их веб-сайта не была оптимизирована для SEO, и как трудно было посетителям найти то, что они хотят?
Помните, мы рассмотрели, как структура их веб-сайта не была оптимизирована для SEO, и как трудно было посетителям найти то, что они хотят? Что ж, это оказало большое пагубное влияние на их способность использовать свою значимость в своей отрасли (один из самых больших активов). К счастью, Medaesthetics сделал правильный выбор и
Что определяет, что такое хороший SEO, а что плохой?
Что определяет, что такое хороший SEO, а что плохой? Ответ прост: Google. Если вы все делаете правильно, то это, в соответствии с рекомендациями Google, идеально. Если вы хотите ускорить позиционирование и попытаться манипулировать результатами поиска, рано или поздно вы поймете, и падение будет больше. Что такое SEO в белой шляпе, о котором все говорят? Джон Уэйн входит в «Салун», красный платок привязан к шее и белой шляпе. Он подходит к бару и просит виски,
Что такое SEO и почему это важно?
Что такое SEO и почему это важно? Поисковая оптимизация, или SEO, является одной из наиболее важных частей интернет-маркетинга, особенно в малом или местном бизнесе. По сути, SEO - это процесс создания и поддержки веб-сайтов с высоким рейтингом в результатах поисковых систем. Чем выше рейтинг сайта на странице поисковой системы, тем больше трафика получает сайт. Поисковые системы определяют этот рейтинг, используя алгоритмы, которые сканируют ключевые слова и
Статью Местный SEO - что это такое и как это работает?
Вы прекрасно справляетесь с тем, что делаете, но вам не хватает трафика на веб-сайте, потенциальных клиентов и встреч, которые вам нужны, чтобы хорошо зарезервировать свой календарь?
Вы прекрасно справляетесь с тем, что делаете, но вам не хватает трафика на веб-сайте, потенциальных клиентов и встреч, которые вам нужны, чтобы хорошо зарезервировать свой календарь? Давайте исправим это с помощью лучшего свадебного SEO , конверсии сайта и проверенных стратегий продаж ! Я лично был там, где вы находитесь, и я создал Bride Appeal ™, увидев воочию в своем собственном свадебном бизнесе, насколько сложно творческому
Ваша мечта о SEO заключается в следующем: «Я заплачу за кого-то, кто будет заниматься SEO, если и когда я окажусь на первой странице Google для ключевого слова X, не раньше, чем сейчас?
Ваша мечта о SEO заключается в следующем: «Я заплачу за кого-то, кто будет заниматься SEO, если и когда я окажусь на первой странице Google для ключевого слова X, не раньше, чем сейчас?» Теоретически, этот дешевый SEO-план звучит фантастически, даже благородно, он может прийти от глубокой части вас, которая хочет «поставить SEO-фирмы на свои места». Это может быть даже то, что вы эмоционально поднимаете флаг, «никто не будет рвать». от меня." Вот сделка, хотя, есть главная
Если Google начнет игнорировать наши оптимизированные теги заголовка - элемент № 1 оптимизации на странице - и будет воспринимать его как мета-описание, как это изменит нашу работу?
Если Google начнет игнорировать наши оптимизированные теги заголовка - элемент № 1 оптимизации на странице - и будет воспринимать его как мета-описание, как это изменит нашу работу? Возможно, стоит подумать, потому что день может наступить. Я думаю, что больше всего на свете возрастет важность актуальности страниц и оптимизации. У меня есть второй пост с более подробной информацией об этой мысли. Как вы думаете? Кто-нибудь еще заметил это? У кого-нибудь еще есть пример,
Итак, как вы убедитесь, что Google рассматривает ваш контент как сливки урожая?
Итак, как вы убедитесь, что Google рассматривает ваш контент как сливки урожая? Вот почему мы оптимизируем содержание нашего сайта в соответствии с поисковыми целями. Если бы мы создавали видеоурок о том, как создать идеальный дымчатый глаз, мы стремились бы оптимизировать наш контент для женщин, которые готовятся к девичному вечеру, а не для женщин, которые хотят классически выглядеть для своих подружек невесты. Прочитайте больше:
Мы все знаем, что когда вы запускаете поиск в Google, вы получаете длинный список результатов, которые имеют отношение к тому, что вы ввели в поле поиска, но как определяется этот список результатов?
Мы все знаем, что когда вы запускаете поиск в Google, вы получаете длинный список результатов, которые имеют отношение к тому, что вы ввели в поле поиска, но как определяется этот список результатов? Почему одна веб-страница занимает первое место, а другая внизу страницы 10? Ключ к эффективному SEO - это то, что происходит на вашем сайте. Это может быть Google, который определяет ваш рейтинг, но они реагируют только на то, как ваш контент представлен. Google рассматривает ряд факторов,
Что такое SEO и как оно может мне помочь?
Что такое SEO и как оно может мне помочь? SEO расшифровывается как поисковая оптимизация. Если вы вовлечены в SEO, вы пытаетесь повысить рейтинг страницы результатов поиска в поисковой системе с целью увеличения неоплачиваемого трафика на страницу. Какие популярные методы SEO? Популярными и важными методами SEO являются аудит сайта, обновление страниц для релевантности, исследование ключевых слов, SEO на странице и создание ссылок. Что может

Что такое бесконечный свиток?
Что такое бесконечный свиток?
?ли у вас есть страница на вашем сайте и по какой-то причине она полностью игнорируется поисковыми системами?
Какой действенный интеллект вы можете использовать в качестве стратегии или какой SEO Техника, которую вы можете реализовать, чтобы поместить эту страницу на карту?
Несмотря на это, Нил считает, что «хотя в моем отце нет ни одной тонны, которая бы не сосала», он всегда говорил, что совпадений не было, так что « Может быть, мы встретились по причине?
Может быть, из этого получилось что-то хорошее?
Помните, мы рассмотрели, как структура их веб-сайта не была оптимизирована для SEO, и как трудно было посетителям найти то, что они хотят?
Помните, мы рассмотрели, как структура их веб-сайта не была оптимизирована для SEO, и как трудно было посетителям найти то, что они хотят?
Что определяет, что такое хороший SEO, а что плохой?
Что такое SEO в белой шляпе, о котором все говорят?

Новости

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 не работает
«Мегафон» - это компания, которая предоставляет услуги мобильной связи, а так же доступ к Интернету. Эта российская компания набирает все большей и большей популярности, так как имеет множество разных