Забыли пароль?

Новости Мира
Ваш надежный партнер!

Электронная коммерция, оптимизированная для SEO, с моментальным поиском Algolia.js

  1. Некоторый фон
  2. SEO проблемы и как я с ними справился
  3. Бесконечная прокрутка
  4. Фильтры и дружественные URL
  5. Обработка заголовков и кратких описаний
  6. Завершение

Когда я впервые столкнулся с Алголией, и в частности instantsearch.js Я влюбился в скорость, великолепный способ взаимодействия компонентов пользовательского интерфейса и простоту реализации. Но очень скоро после экспериментов и понимания того, как это работает, я, как и многие другие, очень заинтересовался его использованием на веб-сайте, который будет опираться на SEO, индексирование большого количества контента и рейтинг в SERPs ,

Тем не менее, я продолжил и чувствую, что преодолел различные проблемы SEO, которые возникают на любом AJAX-зависимом веб-сайте. Ниже приведено подробное объяснение полученных уроков и функциональности, которую я смог реализовать.

Некоторый фон

All The Dresses объединяет всю женскую одежду, которую можно взять напрокат в Австралии, в один красивый, простой в использовании и чрезвычайно быстрый (благодаря Algolia) веб-сайт. В настоящее время мы насчитываем около 3000 наименований в 15 лучших онлайн-бутиках Австралии.

В настоящее время мы насчитываем около 3000 наименований в 15 лучших онлайн-бутиках Австралии

Все платья на рабочем столе

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

Прежде чем мы углубимся в детали, позвольте мне заявить, что «Все платья» были написаны с нуля (не считая использования нескольких JS-скриптов с открытым исходным кодом для определенных функций пользовательского интерфейса). То есть мы не используем какую-либо платформу электронной коммерции, такую ​​как Magento, WooCommerce или Shopify. Основными языками / платформами / фреймворками являются PHP, MySQL и Jquery. Сайт использует бесконечная прокрутка как описано Алголией Вот с несколькими хитростями.

Одна страница поиска / списков PHP обрабатывает представление домашней страницы (или «Наше избранное»), представление дизайнера и представление категории.

SEO проблемы и как я с ними справился

Загрузка контента в исходном HTML

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

Совет. Убедитесь, что все файлы .js, .css и изображения не заблокированы роботом Googlebot через robots.txt или любым другим механизмом, чтобы робот Google мог выполнять необходимый вам Javascript.

Вот пример того, что «Fetch as Google» увидел на одной из наших страниц: список дизайнерских продуктов для Zimmermann , Все виджеты InstantSearch успешно загружены.

Вот пример того, что «Fetch as Google» увидел на одной из наших страниц:   список дизайнерских продуктов для Zimmermann   ,  Все виджеты InstantSearch успешно загружены

Как робот Google видел страницу со списком дизайнеров Zimmermann

Я только обнаружил эту функцию довольно близко к запуску сайта. Я рано решил, что быть в безопасности контент должен быть загружен как часть исходного HTML, где это возможно. Даже если бы я узнал, что я делал с роботом Google на раннем этапе, я все равно придерживался этого решения. Для этого я использовал Algolia PHP API сделать запрос, который соответствует запросу InstantSearch.js, который будет сделан при загрузке.

После создания соответствующего фильтры в PHP и, отправляя запрос в Algolia через API, я вывожу результаты в HTML, который очень близок к тому, что генерирует Instantsearch.js. Instantsearch настроен на одновременное отображение 20 элементов, так что это все, что я выводил в исходный HTML-код через PHP. Если вы посетите страницу со списком дизайнеров на All The Dresses, например, Талула Платья , затем «Просмотр исходного кода» в вашем браузере, вы увидите, что детали первых 20 продуктов находятся в исходном HTML как часть обычной разметки. Я также выводю списки уточнений для Designer и Website, которые возвращаются PHP API как часть одного и того же запроса, если вы указать грани ,

Instantsearch.js запускается при загрузке и динамически заменяет исходный HTML-код полученными результатами. Это в основном не влияет на отображение страницы, так как по большей части заменяет исходный HTML точно таким же HTML. Перфекционист во мне был раздражен этой концепцией - делать один и тот же запрос дважды, один раз через PHP и один раз через Instantsearch, а также заменять контент точно таким же контентом - но я справился с этим. Для всех платьев это оказывает минимальное влияние на производительность или пользовательский опыт. В идеале, instansearch.js предлагает возможность передать ему начальное состояние без необходимости делать начальный запрос в Алголию, но, к сожалению, это не доступно. Команда из Алголии сказала, что это то, что они включают в новый выпуск React InstantSearch - будем надеяться, что они сделают то же самое для InstantSearch.js :)

Бесконечная прокрутка

Итак, я обработал вывод исходного HTML для первых 20 продуктов любого запроса выше. Но все платья использует бесконечная прокрутка и определенный запрос часто возвращает более 20 продуктов, так как мне заставить Googlebot индексировать содержимое остальных этих продуктов на странице списков?

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

<link rel = "next" href = " / Дизайнер / Автопортрет / 1 «>

Я использую перезапись URL-адресов, чтобы сделать поисковую систему URL-адресов более удобной (подробнее об этом позже), но в основном передается параметр startPage = 1 (0 представляет первую страницу). Я передаю это как PHP-API Algolia, так и InstantSearch, чтобы результаты начинались с продукта № 21 для этого запроса. На странице 2 есть rel = prev с URL-адресом startPage, равным 0 (или не указан), и rel = next с URL-адресом startPage, равным 2. Это продолжается до тех пор, пока больше не будет товаров для этого запроса. В сочетании с этими 20 продуктами PHP API Algolia также предоставляет общее количество результатов, доступных для запроса. Вы можете использовать это, чтобы определить, есть ли еще продукты после определенной страницы, и, следовательно, следует ли включать тег rel = next.

Робот Googlebot следует за каждым из этих URL-адресов и, следовательно, индексирует содержание.

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

В идеале на странице должна быть обратная бесконечная прокрутка , которая не была характерной чертой решения Алголии с бесконечной прокруткой. Я могу реализовать это в будущем, но сейчас это не является приоритетом. Вот отличный пример бесконечной прокрутки, удобной для поисковых систем: http://scrollsample.appspot.com/items

Фильтры и дружественные URL

Для всех платьев «Дизайнер» был единственным параметром фильтра, который был действительно важен для SEO. С помощью Apache mod_rewrite Чтобы включить дружественные URL-адреса, я создал URL-адреса непосредственно для списков продуктов для определенного дизайнера, например:

Робот Googlebot находит эти URL одним из трех способов:

  • Каждый дизайнер в списке уточнений на самом деле является тегом <a> с ссылкой на страницу с URL-адресом для конкретного дизайнера. Нажав на это, вы фактически не попадете туда, просто примените фильтр к InstantSearch, но для Google это действительная ссылка, и она пойдет по ней.
  • У меня есть преданный Страница со списком дизайнеров , в котором перечислены все дизайнеры, каждый со ссылкой на соответствующий дружественный URL.
  • Карта сайта, которая была отправлена ​​в Google. Я использую класс PHP, карта сайта на PHP

Помимо указания номера страницы, как описано ранее, единственная другая функция URL, которую я реализовал, предназначена для предварительно определенных поисков. Вкратце, я беру общие термины поиска (или категории, если хотите), такие как « Красное платье " а также " Комбинезон с цветочным принтом »И сделайте поиск этих терминов доступным по URL-адресу, например:

Я делаю эти ссылки доступными через файл Sitemap, а также Страница категорий (который намеренно не так легко найти).

Обработка заголовков и кратких описаний

Теперь у нас есть индивидуальные URL-адреса, удобные для поисковых систем, для каждого дизайнера и каждой категории. Чтобы улучшить SEO на этих страницах, мне нужен заголовок <h1>, относящийся к дизайнеру или категории, и для некоторых дизайнеров я выбрал текстовое (и ключевое слово) описание из 100 слов.

Давайте использовать страница со списком дизайнеров для Dion Lee , В качестве примера. Проблема в том, что теперь у нас есть страница с заголовком «Dion Lee» и краткое описание над списками продуктов, но у пользователя есть возможность полностью изменить то, что отображается с помощью мгновенных улучшений поиска. Если пользователь выбирает добавить другого дизайнера в качестве уточнения, должна ли страница по-прежнему отображать заголовок «Dion Lee»? Я бы подумал, что нет. Что если пользователь отменит выбор «Dion Lee» из списка дизайнерских уточнений? Тогда я бы точно подумал, что нет.

Я решил эту проблему, установив атрибут заголовка «тип заголовка» (дизайнер, категория или домашняя страница) в заголовке и используя простую пользовательскую функцию поиска (опция InstantSearch () основной метод ). Это проверяет состояние текущих фильтров, чтобы увидеть, был ли изменен фильтр, который выровнен по значению атрибута title type. Если он изменился, скрыть заголовок.

Таким образом, при просмотре списка дизайнеров, если пользователь изменяет фильтры, такие как Размер или Цена, заголовок остается. Как только список уточнений дизайнера будет изменен, заголовок будет скрыт.

Завершение

Я надеюсь, что приведенная выше информация поможет вам принять решение о том, использовать ли InstantSearch.js на вашем сайте электронной коммерции. Правда в том, что «Все платья» недостаточно взрослые, чтобы я мог категорически сказать, какое влияние использование InstantSearch оказало или окажет на нашу индексацию и рейтинг Google. У меня также нет альтернативной базы для сравнения (то есть период предварительного поиска). Но, по крайней мере, вы можете видеть, что я продумал проблемы, и теперь вы знаете, как я их преодолел.

В течение 48 часов после запуска All The Dresses уже получали более 100 посещений в день от Google, и этот показатель быстро рос каждую неделю в течение последних 8 недель. Это без единой существенной обратной ссылки для повышения авторитета нашего домена или страницы. По общему признанию, большая часть трафика Google попадает на страницу с описанием конкретного продукта, которая не требует или использует InstantSearch.

Буду рад вашим отзывам о методах, использованных выше, а также о нашем веб-сайте в целом. Кроме SEO, мы думаем, что это довольно крутая реализация Algolia InstantSearch. Дайте нам знать, что вы думаете в комментариях. О, и если вам понравилось чтение, пожалуйста, нажмите на сердце ниже, чтобы рекомендовать этот пост. Ура!

Мы только что выпустили Все платья Новая Зеландия в allthedresses.co.nz - это дочерний сайт All The Dresses (Австралия) и работает полностью на той же кодовой базе. Параметры конфигурации просто указывают на другую базу данных и приложение / индекс Algolia в зависимости от домена, на который зашел пользователь.

Реклама
ТОП Новостей
Юлия Юрьева. Ответы на экзаменационные вопросы по нотариату России
   При равенстве баллов у нескольких кандидатов решение конкурсной комиссией принимается открытым голосованием. При равенстве голосов членов конкурсной комиссии при открытом голосовании решающим является

how-to-all.com" href="/video/2010951150-alternativnoe-golosovanie-eto/" style="font-size:9pt;align:left;"> Значение «альтернативное голосование»: "Политическая наука: Словарь-справочник"; словари русского языка онлайн > how-to-all.com


§ 11. Организация и проведение голосования, подсчет голосов и опубликование результатов
Страница 3 из 4 Непосредственно перед началом подсчета голосов избирателей, участников референдума члены участковой комиссии с правом решающего голоса вносят в каждую страницу списка избирателей, участников

2. Методика действий членов УИК по организации и проведению голосования избирателей вне помещения для голосования
Для организации и проведения голосования избирателей вне помещения для голосования необходимо провести предварительную работу, начиная со следующего: ДО ДНЯ ГОЛОСОВАНИЯ 1. Заблаговременно письменно обратиться

Центральная избирательная комиссия Российской Федерации
Уважаемые ДАМЫ И ГОСПОДА! Актуальность вопроса   Развитие информационного общества и стремительное внедрение инфокоммуникаций во все сферы жизни предъявляют новые требования  к

Статья 68. Открепительное удостоверение. 1. Открепительное удостоверение является документом строгой отчетности, степень защиты которого определяется Центральной избирательной комиссией Российской Федерации. Открепительное удостоверение должно иметь отрыв
2. Избиратель, который не будет иметь возможность прибыть в день голосования в помещение для голосования того избирательного участка, где он включен в список избирателей, вправе получить в соответствующей

Статья 49. Агитационный период - Центральная избирательная комиссия Российской Федерации
Статья 49. Агитационный период   1. Агитационный период начинается со дня выдвижения кандидата, списка кандидатов, регистрации инициативной группы по проведению референдума. Агитационный период

Как и где получить открепительное удостоверение. Голосование по открепительным удостоверениям
О таком документе, как открепительное удостоверение для голосования, слышали если не все, то многие граждане нашей страны. Что представляет собой этот документ? Где получить открепительное удостоверение

Рождение нового метода
Рождение нового метода «Пуанкаре начинает как Коши», — одобрительно заметил как-то один из ведущих профессоров Сорбонны. Он имел в виду широкое разнообразие работ молодого математика, опубликовавшего

VOTUM®: голосование и оценка кач-ва знаний
VOTUM ® : голосование и оценка качества знаний       Работая в аудитории, преподаватель может использовать VOTUM® не только как инструмент для проведения тестирования с целью проверки знаний в любой

Реклама
Календарь
Реклама
Архив сайта

2013 © Все права защищены. www.osreg.ru . При копировании материала с сайта не забываем указывать источник в виде активной ссылки на сайт.