- Мій експеримент
- Об'єкт Push State та History
- Висновок
- Вам потрібна допомога у створенні кращого користувальницького досвіду? Зв'яжіться з Rand Group Digital...
Необхідність є матір'ю всіх винаходів - Платона
Я розробник, перш ніж я є професіоналом з маркетингу. Мені більше доводиться турбуватися про продуктивність, код роз'єднання та можливість повторного використання, ніж Google буде сканувати мої програми. Я розумію, що API та мови сценаріїв краще, ніж я можу читати дані трафіку Google Analytics. Але після приєднання до Rand Group я дізнався про важливість пошуку сайтів, оптимізованих для пошукових систем. Поняття SEO-рейтингу та дубльовані покарання змісту стали речами, які я повинен вважати настільки ж важливим, як поновлення сторінок / перемальовування. Деякі рішення є болісними, і мені потрібно відступити, якщо моя програмістка хоче, щоб цілі проекту виграли. Одне з цих рішень - якщо я можу використовувати AJAX на сторінці, і якщо це зашкодить або допоможе сторінка, яку я будую.
Приходить AJAX або Асинхронний JavaScript і XML веб-технології, яка включає в себе кілька методів, які обіцяли кращий спосіб оновлення вмісту веб-сайту. Що таке AJAX? Відповісти, що нам потрібно зрозуміти Як працює браузер . 
В основному, коли ви відкриваєте веб-переглядач на сторінці веб-сайту через a URL або уніфікований локатор ресурсів , HTTP-запит надсилається через ефір до веб-сервера, який розміщує цю сторінку / веб-сайт. Webserver тоді, просто кажучи, обслуговує цей ресурс (зображення, HTML і т.д.) з відповідним типом mime. Ця відповідь отримується браузером і завантажує поточний вигляд (вікно браузера) з цим документом, зображенням тощо. До появи AJAX це означало, що ви втратили попередню сторінку, яку ви переглядали, і вікно оновлено новим запитаним ресурсом. Це було достатньо 40 років тому в часи ARPANET, де інтернет був лише купою документів, пов'язаних з іншими документами, але мережа сьогоднішнього дня вимагає більш динамічних і інтерактивних веб-сайтів. Це означає, що кожен сайт стає все більш важким і незграбним для завантаження. Це робота розробників, щоб зробити ці сторінки більш ефективними та більш настільними. Це означало, що довгий час використання браузера потребує змін. AJAX став «винаходом», що викликав цю потребу. Microsoft додала новий об'єкт, званий XMLHttpRequest доступний через JavaScript. Завдяки XMLHttpRequest веб-сторінка може мати JavaScript, який асинхронно (фантастичний термін, який означає, що працює у фоновому режимі), запитує актив з веб-сервера і отримує відповідь як дані, якими можна керувати за допомогою JavaScript. Найбільш поширеним є вставка динамічної розмітки в DOM. Щоб проілюструвати, уявіть, що у вас є сторінка з бічною панеллю з тікером для останньої інформації про акції. З AJAX потрібно лише натиснути посилання або кнопку, яка викликає запит до API обміну акцій і завантажує документ, який він повертає. Все без оновлення сторінки. Це заощаджує час і дозволяє користувачеві займатися і зменшує навантаження на веб-сервер.
На даний момент, ви можете побачити більш чітке тепер переваги AJAX. Менше навантаження на сервер, кращий досвід для користувача, веб-сторінки нагадують настільні програми, гнучкість для будь-якого ресурсу (HTML, текстові файли, зображення тощо). Незважаючи на те, що це дуже корисно, не обійшлося без його недоліків. AJAX керується історією браузера, на відміну від звичайно завантажених сайтів, натискання кнопки назад або вперед не покаже різні версії сторінки. Це призводить до плутанини і розчарування з боку користувача, не кажучи вже про різницю в реалізації з різними браузерами. AJAX більше спрямований на додатки, ніж документи. Програми дбають про стан зору для виконання завдання. Документи є «контейнерами» інформації. Потрібно додаткових зусиль, щоб побудувати цю різницю в коді, щоб отримати єдиний інтерфейс для запитів AJAX. Що призвело до популярності безлічі Javascript фреймворків і бібліотек, таких як jQuery і AngularJS.
Для веб-професіоналів найбільшим недоліком AJAX є те, що це не оптимальне рішення для індексації вашої сторінки та її сканування пошуковими системами. Пошукові автоматизовані модулі, більш привітно відомі як боти, є розумними додатками, які проскакують інтернет, переходячи по одній за іншою, щоб каталогізувати Інтернет в документи слів і URI. Боти повинні бути оптимізовані, щоб виконати завдання, тому протягом довгого часу всі пошукові роботи надавали лише початкову розмітку документа на веб-сайті. Інформація після події DOMContentLoaded, подібно до запиту AJAX, була проігнорована. Так що якщо у вас був веб-сайт, залежний від AJAX, то вам не пощастило. Як я вже згадував раніше, AJAX краще підходить для додатків, де стан поточного перегляду існує для позначення завдання, яке потрібно виконати. Цілком несумісні з документоорієнтованими ботами.
Пошукові боти дуже ефективні парсери єдиною метою якої є читання тексту та архівування URL-адреси, що вказує на цей документ, шляхом збереження вмісту, що містить вміст, певним чином. Простіше уявити собі бібліотеку книг, де кожна книга є сторінкою веб-сайту, а каталог бібліотеки відповідає кожній книзі не за загальними темами, а за змістом книги, кожним словом і реченням. Щоб запозичити книгу, вам необхідно передати бібліотекаре сліп з переходом на карту каталогу цієї книги, пошуковий запит. З іншого боку, дані, згенеровані AJAX, будуть порівнюватись з вільною сторінкою, яку ви можете запозичити у бібліотекаря, коли ви потрапите на сторінку перед нею. Але оскільки каталог був побудований без включення цієї додаткової сторінки, ви не можете використовувати вміст цієї розірваної сторінки, щоб подати її до бібліотекаря, щоб він / вона міг знайти книгу і позичити її вам. Як і розірвана сторінка, боти не зможуть використовувати інформацію на цій додатковій сторінці для ідентифікації вашої “книги”.
У 2009 році Google бачить значення AJAX у майбутньому Інтернету, запропонував набір практик створювати зв'язуються держави на веб-сайті. Це робиться, дозволяючи серверу ідентифікувати запит і обслуговувати попередньо скомпільовану версію або знімок стану сторінки. Стан виглядає так, як виглядає сторінка після зміни на сторінці, наприклад, натискання сторінки 2 і завантаження цього набору ліній за допомогою AJAX. URL-адреса стану сторінки ідентифікується за допомогою спеціального атрибута, що називається фрагментом виходу.
Розробники в усьому світі раділи своїй новій супердержаві. Google скоро оголосив, що вони більше не рекомендують схему і оголосили, що їх сканери / боти можуть розуміти і відтворювати сторінки, такі як сучасні веб-браузери. Є застереження до цього, хоча, сторінки повинні бути виконавчими і дбайливими повинні бути надані функції, включені в сторінку, що означає не фантазії кровотеча краю технології.
Я вважаю, що ця новина дійсно дуже перспективна. Щоб підтвердити твердження Google, я розробив деякі експерименти, натхнення з яких klikki .
Перше питання, на яке я хотів би відповісти, коли вміст, створений за допомогою Javascript, сканується до роботів Google. По-друге, які дані AJAX є безпечними для сканування.
Мій експеримент
Я створив сторінку з областю, де я завантажую вміст AJAX. По-перше, розділ будується з фрагментом (.shtml) з нормальною розміткою HTML. Я додав до файлу унікальний рядок, думаючи, що це полегшить тестування з пошуку Google.
Після додавання цього розділу я перейшов до Інструментів Google для веб-майстрів і надіслав сторінку для індексування. Через кілька хвилин я перейшов до Пошуку Google:
Все йде нормально. Отже, відповідь на питання, чи мій перший тест є повним, - це гучне так.
Другий розділ - це графік посилань, побудованих з джерела даних JSON, і магія маніпулювання JQuery DOM. Те ж саме з першим розділом, я створив унікальний рядок, побудований з об'єднаних категорій.
Цього разу я хотів, щоб Google індексував сторінку природно. Чекав годину після повторного подання моєї карти сайту:
Це не було несподіванкою дізнатися, що сторінка ще не була проіндексована. Я вирішив залишити експеримент там і почекати кілька днів. Через п'ять днів, я зрозумів, що я успішно запитав другий унікальний рядок і пересунув сторінку хосту:
Ми довели, що як HTML-фрагмент, так і створена розмітка, можна сканувати з Google.
Щоб переконатися, що сторінка не отримає покарання від Googlebot, я повторно подав індекс і чекав ще кілька днів:
Я не спостерігав жодних переваг щодо типу розмітки. Розділи та назви якорів були індексовані та доступні для пошуку з Google.
У той же час я надіслав свою сторінку для індексування. Я увійшов до Bing і надіслав ту саму сторінку. На момент написання цієї сторінки я ще маю змогу використовувати вміст AJAX для націлювання сторінки за допомогою Bing.
Наведений вище експеримент показує, що сканер Google може відображати та сканувати створений вміст JavaScript. У моєму експерименті відсутні індексації станів. Стан, про який я згадував раніше, є знімком сторінки після того, як сталася дія. Потрібно додаткових зусиль, щоб браузер знав про зміни.
Об'єкт Push State та History
HTML5 запроваджено методами history.pushState () і history.replaceState () . Ці методи допомагають об'єкту історії браузера, який браузер використовує для перегляду різних сторінок. Обидва методи приймають URL-адресу як параметр. Всякий раз, коли, наприклад, метод pushState називається, поточне розташування зберігається як реферер, і подія спрацьовує. Сценарії на сторінці перехоплюватимуть цю подію та її роботу, щоб виконати відповідні дії. За допомогою цього пункту можна навести сторінку, щоб мати різні "знімки". Тепер можна скористатися кнопкою історії, щоб переміщатися по сеансу сторінки, не вилучаючись або не оновлюючи поточну сторінку. Потім стани сторінки можуть бути передані як URL-адреса, яка індексується за допомогою посилання на сторінці або записів у карті сайту. Такий розвиток привело до нового типу додатків, які називаються SPA або Single Page Application.
Темою мого наступного експерименту будуть програми з однією сторінкою. Тому стежте за цим.
Висновок
AJAX і методи, які розробники взяли, щоб полегшити недоліки браузера, просунули, як ми переживаємо веб-сайти, і таким чином, як ми очікуємо, що сайти повинні поводитися. AJAX, безумовно, відмінний інструмент у поясі веб-розробника. Як і всі інші технології, необхідно приділяти обережність при включенні цього в проект. Особливо, якщо метою проекту є краща пошукова та ефективна індексація.
Вам потрібна допомога у створенні кращого користувальницького досвіду? Зв'яжіться з Rand Group Digital для маркетингового аудиту переглянути поточний веб-сайт і допомогти визначити сфери, які потрібно покращити.
- Програмне забезпечення поставляється як обіцяне. Немає сюрпризів.
Вам потрібна допомога у створенні кращого користувальницького досвіду?