- Навіщо взагалі створювати сайти на Javascript і Ajax?
- Що таке shebang / hashbang і причому тут SEO?
- Як прискорити індексацію за допомогою функції window.history.pushState () в HTML5
- Що робити, якщо сайт на Angular JS і React?
- висновки
При створенні сайту або програми на Ajax ігнорується одна з основних сутностей інтернету - веб-сторінка з окремим URL. Вся інформація на сторінці подгружается скриптом без поновлення URL, тобто фактично пошуковим системам нічого додавати в індекс, крім головної сторінки. Це просто пекло для пошукового просування.
Та ж проблема існує для односторінкових Лендінзі, створених нема на Ajax.
Звичайно, напрошується питання ...
Навіщо взагалі створювати сайти на Javascript і Ajax?
Проекти на Javascript і Ajax простіше в розробці. Вони забезпечують зручне і швидке взаємодія з користувачем завдяки використанню асинхронних запитів. Коди таких сайтів значно коротше через можливість повторного використання компонентів. Крім того, в плюси запишу швидке завантаження сторінок і відсутність очікування зв'язку з сервером.
Але ось з пошуковою оптимізацією у таких сайтів справжня біда, і щоб виправити це доведеться запам'ятати кілька нових термінів :)
Що таке shebang / hashbang і причому тут SEO?
Shebang / hashbang - послідовність із символів #! в URL, яка дозволяє пошуковим системам сканувати та індексувати сайти і додатки, повністю створені за допомогою Ajax.
Суть методу: для кожної Ajax-сторінки, яку необхідно проіндексувати, на сервері розмістити HTML-версію.
По кроках:
1. При запиті Ajax-сторінки повинен формуватися URL http://site.com/#!/hello-world. Включення знаку оклику дозволить дізнатися про наявність HTML-версії документа, а не просто якоря - закладки з унікальним ім'ям на тій же сторінці, як у випадку з використанням простого #. Приклад простий якірної посилання можна побачити на сторінці «Як налаштувати розширену електронну торгівлю за допомогою Google Tag Manager» . Клік по посиланнях з блоку нижче дозволить перейти до потрібної частини статті на тій же сторінці:
2. Пошуковий робот автоматично замінює #! на? _escaped_fragment_ = і, відповідно, звертається до сторінці http://site.com/?_escaped_fragment_=hello-world - саме ця сторінка повинна бути HTML копією Ajax-сторінки сайту.
3. Посилання на сторінки з #! необхідно помістити в карту сайту. Це прискорить індексацію сторінок.
4. Щоб повідомити робота про HTML-версії головної сторінки, в код слід включити метатег <meta name = "fragment" content = "!">. Цей метатег потрібно використовувати на кожній Ajax-сторінці.
Важливо! У HTML-версії документа метатег розміщувати не слід: в цьому випадку стаття не буде проіндексована, тому що при наявності метатега на сторінці, пошуковий робот робить звернення до сервера в пошуках відповідної сторінки з фрагментом URL:? _Escaped_fragment_ =. Саму сторінку c метатегах він не індексує.
5. Посилання в результатах пошуку направить користувача на Ajax-версію сторінки.
6. У файлі robots.txt повинні бути відкриті всі Javascript-файли, а також файли, що відповідають за обробку Ajax. Це дуже важливо для індексації.
наприклад:
На сайті maxcar.bg за допомогою технології hashbang реалізована фільтрація в категоріях сайту. наприклад:
В результаті сторінки потрапляють в індекс Google:
Як прискорити індексацію за допомогою функції window.history.pushState () в HTML5
Це невелика Javascript-функція в HTML5 History API. Крім передачі інших параметрів, вона дозволяє змінити URL і Title, який відображається в браузері користувача. Важливо уточнити, що звернення до сервера або до нової сторінки при цьому не відбувається, що позитивно впливає на швидкість завантаження сторінок.
Навіть на сайті-одностранічнік можна створити будь-яку кількість таких URL і помістити їх в XML-карту сайту, відправивши її на індексацію. Таким чином ми отримаємо хоч греблю гати сторінок з різними контентом.
У такого методу є недоліки. Якщо в браузері відключений Javascript, користувач не зможе побачити вміст сторінок. Крім того, у пошукових систем все ще можуть виникати труднощі при скануванні сайту з використанням Javascript, особливо якщо в реалізації допущені помилки.
Ось що пише довідка Google :
Багато веб-майстри вже оцінили переваги Ajax для підвищення привабливості сайтів за рахунок створення динамічних сторінок, які виступають в ролі функціональних веб-додатків. Але, як і Flash, Ajax може утруднити індексування сайтів пошуковими системами, якщо ця технологія реалізована з помилками. В основному Ajax викликає дві проблеми при використанні пошукових систем. Роботи пошукових систем повинні «бачити» ваше зміст. Необхідно також переконатися, що вони розпізнають правила навігації і слідують їм.
Робот Googlebot добре підходить в тих випадках, коли потрібно зрозуміти структуру HTML-посилань, але він може допускати помилки на тих сайтах, де для навігації застосовується Javascript. Ми працюємо над вдосконаленням системи розпізнавання Javascript, але якщо ви хочете створити сайт, який зможуть сканувати Google та інші пошукові системи, то посилання на утримання найкраще надавати на мові HTML.
Те, що раніше виглядало як http://site.com/#page1, при застосуванні функції push.State () буде виглядати як http://site.com/page1.
Функція window.history.pushState () використовує три параметри: data, title, url. Впровадження даної функції відбувається наступним чином:
- Перед тим як приступити до впровадження функції, необхідно упевнитися, що сайт працює і з відключеним в браузері Javascript - контент повинен відображатися навіть в такому випадку.
- Контент, який змінюється на сторінці, повинен розміщуватися на серверної частини. При переході по посиланнях повинна довантажуватися тільки тематична частина, а не HTML-сторінка повністю.
- Javascript повинен перехоплювати і записувати в параметр URL кліки по будь-яким внутрішнім посиланням (елементи навігації і так далі), якщо вони є.
- З огляду на атрибути посилання, по якій клікнув користувач (можливо, на href), Javascript / Ajax завантажує відповідний контент на сторінку.
- При цьому, якщо використовувати звичні для пошукових систем посилання виду <a target="_blank" href="site.ru/page1"> і обробляти кліки за допомогою даної функції, можна значно поліпшити швидкість завантаження без будь-якого негативного впливу на SEO.
Подивитися, як це реалізовано, можна на сайті html5.gingerhost.com .
Добре, припустимо, розібралися.
Що робити, якщо сайт на Angular JS і React?
Щоб прискорити індексацію сайтів на Angular JS і React, необхідно використовувати один з описаних нижче методів:
- Замість того, щоб постійно віддавати HTML-версію сторінки за допомогою? _Escaped_fragment_ =, віддавати HTML-версію тільки при запиті пошуковим роботом. Список ботів Google можна подивитися тут .
- Надавати сайт пошуковим системам без попереднього рендеринга. Використовуйте функцію HTML5 History API для поновлення URL-адреси в браузері без використання #! , Створіть файл sitemap.xml з усіма канонічними URL-адресами і додайте його в Google Search Console.
- Використовувати? _Escaped_fragment_ = без використання #! . Для цього необхідно додати в код <meta name = "fragment" content = "!">, Не змінюючи при цьому URL. Пошукові системи при наявності даного метатега будуть шукати відповідну HTML-версію сторінки на сервері.
подивіться результат .
висновки
- Використовуйте послідовність із символів #! в URL для сайтів на Ajax, Javascript для покращення індексації.
- Використовуйте Javascript-функції pushState () для Лендінзі, Ajax і Javascript-сайтів.
- Впроваджуйте методи для поліпшення індексації сайтів на AngularJS і React.
Що таке shebang / hashbang і причому тут SEO?
Навіщо взагалі створювати сайти на Javascript і Ajax?
На?
Com/?
Що робити, якщо сайт на Angular JS і React?
Використовувати?
