Будьте один з гусеничним - Pt 1 - Nrwl

  1. 3 Частини
  2. Googlebot
  3. Історія трьох частин Googlebot
  4. Вік серверних сторінок
  5. Вік допомоги розуміння
  6. Вік грамотності
  7. Поступове підвищення
  8. URL-адреси та посилання
  9. Немає хешей
  10. Варіації
  11. onclick 👎 <a href=´”> 👍
  12. Консоль пошуку
  13. Правильні роботи
  14. Будьте швидкими
  15. Як Googlebot сканує

Джефф Крос є співзасновником компанії nrwl.io , що надає консультативні послуги підприємствам. Раніше він працював у головній команді Angular в Google, очолюючи команду Angular Mobile. Джефф Крос є співзасновником компанії   nrwl

Googlebot

3 Частини

Це перший з серій з трьох частин, які роблять додатки Angular зрозумілими та індексовані Googlebot. У цій статті ми розглянемо коротку історію розвитку здатності Googlebot сканувати програми JavaScript і охоплюватиме деякі кращі практики, які застосовуються до програм JavaScript загалом. 2-я і 3-а частини будуть охоплювати конкретні міркування та корисні інструменти.

SEO є важливою темою для розробників, щоб зрозуміти, якщо вони торкаються додатків, які покладаються на трафік пошукової системи, тому що SEO питання важко і дорого виправити після того, як факти, що коштують тижнів або місяців втрати трафіку.

Googlebot

SEO - це широка тема. Ця стаття присвячена одному аспекту SEO: сканування. Я зосереджуюся лише на одному сканері, роботі Googlebot (сканері Google), і я зосереджуюся лише на скануванні програм JavaScript і Angular. Під скануванням я маю на увазі процес переходу, завантаження та аналізу сторінок Googlebot. Я не буду охоплювати індексацію, ранжування або будь-яку з цих інших цікавих тем.

Історія трьох частин Googlebot

До 2009 року (вік серверних сторінок), 2009–2015 рр. (Вік допоміжного розуміння), 2015+ (вік грамотності)

Вік серверних сторінок

До 2009 року розробники просто визнали, що якщо вони використовують jQuery, Backbone або інші бібліотеки JS для відображення своїх програм у браузері, пошукові системи не зможуть зрозуміти їхній зміст. Таким чином, сторінки потрібно буде виводити на сервері в певній формі, а потім можна збільшити за допомогою JavaScript у браузері. Оскільки JavaScript-фреймворки стали зрілими і використовувалися для створення цілих додатків "Програми для окремих сторінок", Google побачила необхідність надавати розробникам можливість інформувати сканера про вміст їхніх додатків.

Вік допомоги розуміння

Тому У 2009 році Google запропонував новий протокол використовуючи комбінацію мета-тега для вказівки, що ваша програма - це програма JavaScript, а конфігурація сервера - слугувати просту версію вмісту сторінки, коли потрібна сторінка з параметром запиту, який називається _escaped_fragment_ .

На сьогоднішній день сайт AngularJS docs реалізує цей протокол. Якщо ви відвідуєте https://docs.angularjs.org/api/ng/function/angular.bind , ви побачите звичайну сторінку.

Знімок екрана https://docs.angularjs.org/api/ng/function/angular.bind

Але якщо ви зміните URL-адресу до _escaped_fragment_ , https://docs.angularjs.org/ ? _escaped_fragment_ = api / ng / function / angular.bind , ви побачите той самий вміст у набагато простішій, не стилізованій формі, без JavaScript, так що сканер може легко зрозуміти вміст сторінки.

Знімок екрана https://docs.angularjs.org/?_escaped_fragment_=api/ng/function/angular.bind

У цей момент у жовтні 2009 року Googlebot збільшував свою здатність відображати та аналізувати програми JavaScript. Надаючи параметр _escaped_fragment_, розробники могли б допомогти сканеру мати більшу впевненість у змісті динамічних сторінок.

Вік грамотності

Швидко перейти до жовтня 2015 року, Googlebot став набагато просунутішим у своїй здатності навігації та розбору програм JavaScript. Команда пошуку оголошено на блозі веб-майстрів Google що попередня пропозиція щодо використання _escaped_fragment_ тепер застаріла. Сканер розвивався достатньо, щоб мати можливість впевнено і послідовно сканувати програми однієї сторінки JavaScript.

Таким чином, з розвитком сканера, розробники JavaScript можуть розробляти програми як звичайні, не турбуючись про можливість сканування? Взагалі, так, але не без деяких застережень, відмов і зірочок. Щоб пояснити поточні рекомендації щодо сканування додатків JavaScript, Джон Мюллер з Google розміщено в Google+ з деякими короткими пропозиціями. Джон також представлені на тій же темі на AngularConnect 2016 , перейшовши в трохи більше деталей, ніж його публікація в Google+, але повторюючи багато однакових точок. Пропоную резюме посади та презентацію.

Прогресивне вдосконалення, URL-адреси та посилання, консоль пошуку, правильні роботи, бути швидкими

Поступове підвищення

Браузер, який використовує сканер для візуалізації програм JavaScript, не має всіх функцій Chrome та інших сучасних браузерів. Станом на бесіду Джона у вересні 2016 року, конкретні API не підтримуються, включаючи ServiceWorker, Fetch, Promise, requestAnimationFrame та localStorage. Більшість програм, ймовірно, вже заповнюють більшість з них, або, принаймні, мають запасний варіант. Якщо будь-який з цих API використовується для відображення вмісту сторінки, важливо, щоб сторінка вийшла з ладу і все ще може відображати вміст за відсутності.

URL-адреси та посилання

Канонічні URL-адреси

URL-адреси дуже важливі для індексу Google. Усі документи в індексі Google містять URL-адреси. Тому важливо, щоб сторінки мали єдину канонічну URL-адресу. Іншими словами, якщо одна й та ж сторінка доступна за різними URL-адресами, включаючи один і той самий шлях URL-адреси з різними параметрами запиту, потрібно повідомити Google про правильну канонічну URL-адресу цієї сторінки.

Немає хешей

Google також має сильні упередження щодо URL-адрес, які використовують хеш (/ # /) всередині шляхів. Якщо Google бачить посилання, які містять хеш, він приймає вміст після того, як хеш є незначним. Google рідко індексує URL-адреси за допомогою хешу.

Варіації

Якщо сторінка містить значні варіації одного вмісту, наприклад вміст, перекладений на кілька мов, для кожної версії сторінки має бути унікальний URL.

onclick 👎 <a href=´”> 👍

Googlebot не розглядає обробників кліків як посилання, тому важливо, щоб посилання на вміст були представлені в атрибуті href елементів прив'язки.

Консоль пошуку

The Консоль пошуку надана компанією Google, є важливим інструментом для керування та моніторингу відносин сайту з індексом Google. Примітка для розробників JavaScript - це Отримати як Google інструмент. Вибирайте, коли Google дозволяє розробникам запитувати, щоб Googlebot вибирав сторінку, а потім відображав деякі характеристики про цю сторінку, коли Google її бачив. Розробники JavaScript захочуть натиснути кнопку "Fetch and Render", що призведе до того, що Googlebot відобразить програму JavaScript. Коли сканування буде завершено, буде показано скріншот візуалізованої сторінки.

Коли сканування буде завершено, буде показано скріншот візуалізованої сторінки

Отримати як скріншот Google nrwl.io

Це корисно, щоб переконатися, що вміст сторінки правильний, але, на жаль, наразі неможливо побачити метадані сторінки (назва, мета-опис, канонічна URL-адреса). Якщо ви хочете побачити цю інформацію, вам доведеться обдурити і додати інформацію до тіла сторінки десь, щоб вона з'явилася на знімку екрана.

Правильні роботи

Robots.txt - це те, як сервери можуть показувати роботам, як Googlebot, який вміст вони повинні і не повинні сканувати. Часто ці конфігурації використовуються для запобігання завантаження певних активів, які не є необхідними для відображення вмісту. Важливо переконатися, що файли robots.txt на вашому сервері та серверах, на яких ви залежать, не блокують критичні активи, такі як бібліотеки JavaScript, необхідні для відображення сторінки.

Будьте швидкими

Googlebot може бути просто роботом, але це не означає, що він має необмежене терпіння. У певний момент, якщо сторінка завантажується занадто довго, Googlebot відмовиться і не розібратиме сторінку, або розібрати її у своєму поточному стані. Це може призвести до видалення сторінок з індексу, якщо вони постійно завантажуються. Точний момент, на якому Googlebot відмовиться, не зрозумілий, але загальна думка, що це близько 5 секунд. Тому важливо оцінити всі запити на блокування та роботу, які можуть затримати рендеринг критичного контенту, і або видалити менш важливу роботу, або відкласти її, поки вміст не буде виведений.

Як Googlebot сканує

Важливо знати про Googlebot, що він не натискає посилання у вашій програмі. Замість цього, коли Googlebot розбирає сторінку, вона збирає всі знайдені гіперпосилання і планує переглядати посилання пізніше. Потім у певний момент у майбутньому, можливо, відразу чи через кілька днів, Googlebot видасть новий запит на завантаження сторінки. Іншими словами, зосередьтеся на тому, як ваша сторінка виконує та надає для початкового завантаження маршруту.

У наступній частині цієї серії я зосереджуся на конкретних міркуваннях, щоб зробити додатки Angular більш доступними для сканування. Якщо у вас є запитання або специфіка, які ви хотіли б охопити, чиріть на мене @jeffbcross .

Джефф Крос є співзасновником компанії Nrwl - Підприємство Angular Consulting.

Org/?
Таким чином, з розвитком сканера, розробники JavaScript можуть розробляти програми як звичайні, не турбуючись про можливість сканування?