- Что такое бесконечная страница прокрутки?
- Какие примеры бесконечной прокрутки страниц?
- В чем проблема SEO с бесконечной прокруткой страниц?
- Итак, как вы это исправите?
- Шаг № 1: Определите, как разделить ваш контент
- Шаг № 2: Создайте структуру URL, которая вмещает бесконечную прокрутку
- Шаг № 3: Каждая страница должна содержать rel = ”next” и rel = ”prev” в теге <head>
- Шаг № 4: Используйте pushState на странице бесконечной прокрутки
- Шаг № 5: Используйте лучшие практики SEO на каждой странице
- Заключение
Это модно. Это круто. Это бедро. Это бесконечная страница прокрутки!
Как и в случае с любой новой тенденцией в дизайне, SEO-специалистам необходимо выяснить, как этот вариант веб-дизайна вписывается в общую схему SEO. Лично я предпочел бы иметь красивый сайт с потрясающей SEO, чем модный сайт с так себе SEO.
Если вы считаете, что бесконечная прокрутка страницы - лучший вариант дизайна для вашего сайта, но вы также хотите сохранить отличную SEO, тогда читайте дальше. Я собираюсь показать вам, как именно вы можете достичь обеих этих целей:
Что такое бесконечная страница прокрутки?
На всякий случай, если вы не знакомы с «бесконечной страницей прокрутки», позвольте мне объяснить вам. Как только я поделюсь некоторыми примерами (ниже), вы сразу поймете: «О да, я видел это раньше».
Бесконечная прокрутка - именно то, что описывает термин - функция, которая позволяет пользователю продолжать прокручивать страницу, не доходя до ее конца. Когда вы прокручиваете страницу вниз, к «нижней части» страницы, она просто загружает больше контента, обеспечивая постоянно растущее и, казалось бы, бесконечное количество материала.
Как правило, это реализовано с помощью JavaScript, который асинхронно загружает свежий контент , вызванный прокруткой пользователя за пределы страницы. Чтобы поддерживать идеальное время загрузки, новый контент начинает фоновую загрузку до того, как пользователь достигнет точки прокрутки «загрузить больше».
Теперь, когда вы знаете, что это такое, давайте рассмотрим несколько примеров.
Какие примеры бесконечной прокрутки страниц?
Давайте посмотрим на некоторые из самых популярных страниц бесконечной прокрутки в Интернете сегодня.
если ты посетите мой профиль в Твиттере - или любой профиль Twitter в этом отношении - вы сразу почувствуете бесконечную прокрутку. Продолжайте прокручивать, и страница продолжает расширяться.
Вы, вероятно, испытали это на Facebook. Именно поэтому вы никогда не перестаете смотреть на Facebook.
И пока мы обсуждаем вихревые качества социальных сайтов, давайте не будем забывать о бесконечной прокрутке на Pinterest.
Google, несмотря на свою устойчивость к бесконечным результатам поиска с прокруткой на главной странице поиска, использует бесконечную прокрутку для поиска изображений.
Но как насчет несоциальных страниц? Имеет ли бесконечный свиток место среди не-твиттеров или не-фейсбуков в мире Интернета? Абсолютно да. В конце концов, именно здесь будут проверены и / или доказаны реальные достоинства SEO бесконечной прокрутки.
Mashable, новостной сайт, имеет бесконечную прокрутку.
Французское дизайнерское агентство Département Créatif использует коллаж из графики героев, бесконечной прокрутки, элементов параллакса и других очень впечатляющих дизайнерских приемов.
Axara, сайт модного бренда, использует бесконечный свиток с некоторым успехом:
Бесконечная прокрутка имеет некоторые заметные преимущества с точки зрения взаимодействия с пользователем. Но есть и проблемы. Проблема, которая меня больше всего интересует, связана с SEO.
В чем проблема SEO с бесконечной прокруткой страниц?
Одним словом, проблема SEO с бесконечной прокруткой - это JavaScript , который является наиболее популярным способом его реализации. Поисковые системы, особенно Google, не сканировать большую часть JavaScript успешно:
Google может выполнить некоторый JavaScript, чтобы найти контент, но у Google есть ограничения на то, что он может делать и что он может понять. Лучшая практика остается прежней: поместите контент, который вы хотите, чтобы Google сканировал, и проиндексируйте в базовом HTML. Например, используйте вкладки jQuery для размещения содержимого в одном файле вместо вкладок AJAX, которые распределяют содержимое по нескольким файлам. Короче говоря, упростите Google доступ к вашему контенту.
Google, через свои рекомендации для веб-мастеров , делает эту точку также:
Если такие необычные функции, как JavaScript, файлы cookie, идентификаторы сеансов, фреймы, DHTML или Flash, не позволяют просматривать весь ваш сайт в текстовом браузере, тогда у пауков поисковых систем могут возникнуть проблемы при сканировании вашего сайта.
Вы можете быть уверены, что контент HTML в вашем исходном коде будет проиндексирован Google, но любой последующий контент, который загружается асинхронно через JavaScript, не будет проиндексирован. Краулеры не люди. Они не обязательно «продолжают прокручивать» в эмуляции поведения человека-пользователя .
Итак, как вы это исправите?
К счастью, есть способ иметь просматриваемые / доступные для поиска бесконечные страницы прокрутки.
Доступно несколько методов, но Google официально рекомендует только один метод.
Основная идея заключается в следующем. Вы должны создать страницу бесконечной прокрутки и ряд других страниц, которые соответствуют страницам бесконечной прокрутки. Таким образом, вы (или ваша CMS) развиваете бесконечный свиток с нумерацией страниц .
Страница бесконечной прокрутки разбита на страницы компонентов:
Вот точный процесс:
Шаг № 1: Определите, как разделить ваш контент
Подведите итог всему контенту, который вы хотите бесконечно прокрутить, и разбейте его на куски.
У этих кусков нет волшебной длины. Вы просто хотите, чтобы пользователи могли найти то, что они ищут, с разумной прокруткой.
В соответствии с рекомендациями, вы также должны убедиться, что эти страницы имеют оптимальное время загрузки и не дублируют содержимое других страниц.
Шаг № 2: Создайте структуру URL, которая вмещает бесконечную прокрутку
Даже если вы создаете бесконечный свиток, вам все равно нужно продумать структуру URL. Эта структура URL должна поддерживать последовательную природу, необходимую для бесконечной страницы прокрутки.
Помните, что вы разбиваете на страницы свой бесконечный процесс прокрутки, поэтому каждый раздел контента будет уникальной страницей с уникальным URL. Используйте человеческий язык для своих URL, так как он лучше всего подходит как для пользователей, так и для сканеров.
Стандартный и типичный URL отлично работает: «example.com/awesome-design».
Если для размещения оптимизированной конфигурации вы добавляете нумерацию страниц или идентификаторы, это тоже работает. Google заявляет, что следующие шаблоны являются приемлемыми:
- example.com/fun-items?lastid=567
- example.com/fun-items#1
При структурировании ваших URL следует избегать двух вещей:
- Не используйте относительные параметры URL-адреса. Использование основанных на времени функций добавляет хронологическую сложность, которая снизит ценность SEO вашей страницы. Например, Google рекомендует избегать этой конкретной структуры URL: «example.com/category/page.php?name=fun-items&days-ago=3» из-за раздела «days-ago = 3» URL.
- Не используйте кодовый язык в своем URL. Избегание кода Mumbo Jumbo помогает сохранить расширенный пользовательский опыт. Вот пример Google, который вы не должны указывать в URL-адресе: «example.com/awesome-design/radius=5&lat=40.71&long=-73.40». В этом примере вам не следует использовать все после слова « дизайн."
Шаг № 3: Каждая страница должна содержать rel = ”next” и rel = ”prev” в теге <head>
Добавление этих кодов нумерации страниц в ваш заголовок гарантирует, что Google сможет индексировать содержимое каждой страницы. Эти атрибуты rel информируют Google о взаимосвязи между вашими URL-адресами, увеличивая вероятность сканирования, индексации и возврата этих страниц роботом Google.
На практике атрибуция rel сохраняет последовательное сканирование вашего сайта, в то же время гарантируя, что весь контент имеет свою собственную проиндексированную и уникальную страницу.
Прочтите о постраничном контенте и о том, как использовать атрибуты rel различными способами.
Шаг № 4: Используйте pushState на странице бесконечной прокрутки
PushState - это метод HTML5, который определяет процесс загрузки. PushState будет извлекать из объекта состояния (все, что сериализовано) и URL, чтобы загрузить новый контент в последовательности, определенной разбиением на страницы.
По сути, pushState сообщает браузеру, что загружать и отображать. Вот как Твиттер реализует свою бесконечную прокрутку ,
Кроме того, вы можете использовать метод replaceState для изменения записи в журнале или реагирования на поведение пользователя при прокрутке. ReplaceState будет реагировать на действия прокрутки или позволит пользователю прокручивать назад и просматривать страницы, которые были загружены в истории разбивки на страницы.
Шаг № 5: Используйте лучшие практики SEO на каждой странице
Конечно, вы захотите проверить свою страницу с бесконечной прокруткой и убедиться, что каждая страница загружается точно и в правильные сроки. Затем, в дальнейшем, просто используйте свои знания SEO для создания лучшего и самого чистого контента.
В этом отношении бесконечная прокрутка ничем не отличается от SEO бизнеса, как обычно. После того, как вы реализовали правильные функции нумерации с бесконечной прокруткой, вы можете создавать убийственный контент, оптимизированный в соответствии с вашими потребностями.
Заключение
Бесконечная прокрутка - это лишь один из многих вариантов дизайна, который может улучшить взаимодействие с пользователем и удержание. Тем не менее, это не является оптимальным для каждого сайта. Все зависит от того, чего вы пытаетесь достичь с помощью конкретной страницы.
Как заявила Нильсен Норман Групп :
Бесконечная прокрутка ... не очень хороший выбор для сайтов, которые поддерживают целенаправленные задачи поиска. Такие целевые задачи поиска включают действия по преобразованию конечных точек. Когда пользователи бесконечно прокручивают страницу, это может привести к появлению новой категории отказов, которая искажает метрики и сводит к минимуму вероятность CRO.
Как вы теперь знаете, бесконечная прокрутка может работать на SEO. Но это не значит, что это лучше для вашего конкретного сайта.
Что такое бесконечная страница прокрутки?Какие примеры бесконечной прокрутки страниц?
В чем проблема SEO с бесконечной прокруткой страниц?
Итак, как вы это исправите?
Какие примеры бесконечной прокрутки страниц?
Но как насчет несоциальных страниц?
Имеет ли бесконечный свиток место среди не-твиттеров или не-фейсбуков в мире Интернета?
В чем проблема SEO с бесконечной прокруткой страниц?
Итак, как вы это исправите?
Com/fun-items?