Экономика стран

К сожалению, большинство людей, которые будут ими затронуты почти весь мир, не будут иметь никакого влияния на результат. Вести Экономика Дайджест иностранной прессы за 14 августа.
Вести Экономика Греции снова придется списывать долги Греция не сможет самостоятельно расплатиться по долгам, и понадобится новая реструктуризация долгов, чтобы спасти страну от банкротства.

JavaScript, PWA та… SEO

  1. 1. Доля хрому 41
  2. 2. Googlebot не є веб-переглядачем
  3. 3. Googlebot нічого не натискає
  4. 4. Відчуйте потік
  5. Безпрограшна ситуація
  6. РСР
  7. Універсальне застосування
  8. SEO-дружні URL-адреси
  9. Метадані + мікроформати
  10. Швидкість

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

З PWA, ви отримуєте рідні-подібні взаємодії, push-повідомлення та інсталяцію на домашньому екрані. Але це лише частина картини. Крім того, розповсюдження набагато простіше при стандартному веб-подібному поєднанні, спільному використанні - і без розповсюдження в магазині.

Докладніше про Посібник для початківців PWA .

З технічної точки зору, PWA є своєрідним Single Page Application - програмами JavaScript, які працюють у середовищі браузера, і тому їх не потрібно завантажувати або встановлювати.

За своєю природою 90% PWA є чисто JavaScript. Більшу частину часу розробники вибирають сучасні рамки JS, такі як React, Vue або Angular, щоб надати користувачеві найкращий досвід. Але модель розподілу - це мережа, для якої органічний пошук є життєво важливим.

Індустрія SEO не впевнена, що Google порівнює (і займає!) Сайти на основі JavaScript і сайти на основі HTML. З цим знанням, зрозуміло, що SEO та розробники тільки починають розуміти, як зробити сучасні рамки JavaScript обхідними. Ви можете прочитати багато підручників і повідомлень у блогах про те, як створювати зручні для JavaScript програми для сканерів. Google вдосконалюється з сучасними методами веб-рендерінгу - однак, є ще багато обмежень.

Якщо ми подивимося на веб-розробку з еволюційної точки зору, ви побачите, наскільки велика роль відіграла JavaScript у цьому процесі. Ми перейшли зі статичних веб-сайтів, побудованих на звичайному HTML, на динамічні програми JavaScript.

Google має багато обмежень у виконанні JavaScript. Інші пошукові системи взагалі не обробляють JS. Однак це не означає, що ми не можемо будувати блискучі, інтерактивні веб-сайти з сучасними фреймворками, які працюють і для пошукових систем! - Марія Цесьлак - старший технічний SEO, Слон

Ми запитали експертів агентства SEO Elephate про їхні висновки та рекомендації щодо методів SEO PWA.

Після проведення a серії експериментів з сучасними JS фреймворками проти Google Наведені результати дійсно цікаві:

1. Доля хрому 41

Google розбирає та передає JS, але з великими обмеженнями - він використовує безголовий браузер на основі Chrome 41 (2015 ')… Якщо ви використовуєте сучасні специфікації Ecma Script (як і більшість розробників на даний момент), ваш JS, ймовірно, повинен використовувати багато шимс / зворотні заходи для надання тій же самій структурі коду / посилань Googlebot. Найгірше - це важко сказати, які елементи будуть успішно інтерпретовані та індексовані компанією Google, а які ні.

На жаль, для розробників програм PWA в Chrome 41 інтерфейси, такі як IndexedDB і WebSQL, вимкнено. Інтерфейси найчастіше використовуються для надання користувачам автономної підтримки.

2. Googlebot не є веб-переглядачем

Всесвітня павутина є величезною, тому Google оптимізує свої сканери для продуктивності. Саме тому Googlebot іноді не відвідує всі сторінки, які бажають веб-майстри.

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

Експерименти Elephate показують, що Google Crawler не чекає більше 5 секунд для завантаження / надання будь-якого ресурсу. Більше того, він може "оптимізувати" поведінку вашої програми, не поважаючи (все ще досить поширені) виклики setTimeout (), і т.д.

Тут Google Indexer просто опустив скрипт і надав решту сторінки. Джерело: Elephate блог .

3. Googlebot нічого не натискає

Необхідно переконатися, чи з'являється меню в DOM, перш ніж натискати будь-які пункти меню. Якщо ви покладаєтеся на подію onClick, це може завадити браузеру індексувати структуру вашого веб-сайту.

4. Відчуйте потік

Потік індексації для класичних програм HTML і JS сильно відрізняється; індексувати програми JS Googlebot вимагає набагато більше ресурсів і часу. Компанія Google офіційно заявила, що « рендеринг веб-сайтів, керованих JavaScript, у Пошуку Google відкладається до тих пір, поки у Googlebot не буде доступних ресурсів для обробки цього вмісту. "

Джерело: Google I / O '18

Це лише кілька прикладів підводних каменів, з якими ви можете зіткнутися при роботі з вашим додатком SEO. Ви можете дізнатися більше деталей про те, як індексуються програми JavaScript, читаючи Остаточний посібник з JavaScript SEO ”.

ОК, так що давайте перевіримо, як ми можемо мати справу з викликами SEO на основі JavaScript на основі нашого власного прикладу.

Vue Storefront є автономним Progressive Web App магазином для вашої електронної комерції, здатним з'єднатися з будь-яким електронним комерційним сервером (напр. Magento , Pimcore, Prestashop або Shopware) через API. Це зроблено за допомогою фреймворку Vue.js - і так, це SPA (Single Page Application), і так, він добре працює з Google та іншими сканерами. Ви можете знайти більше інформації про нашу Github .

«Після деяких хороших практик JS SEO, програми для однієї сторінки (включаючи прогресивні веб-програми) можна сканувати, рендерувати і індексувати, що означає, що вони можуть бути SEO-дружніми. Наприклад, переглядаючи один з найпопулярніших веб-сайтів у мережі… YouTube. Так, YouTube побудований за допомогою JavaScript (відвідайте веб-сайт, вимкніть JavaScript у веб-переглядачі та подивіться, що відбувається), і це дуже добре.

Vue Storefront побудований з універсальним JavaScript. Це одне з найоптимальніших для SEO рішень, рекомендованих компанією Google. ” - Марія Cieślak - старший технічний SEO, Слон

Безпрограшна ситуація

Засоби та методи веб-розробки змінюються - набагато швидше, ніж можливості пошукових систем для обробки всіх нових функцій. Google досі використовує механізм рендеринга - починаючи з 2015 року - для відтворення більшості сучасних веб-додатків.

Є рішення. Ви можете відокремити вміст, який обслуговується сканером (наданий на стороні сервера), із надсучасною версією CSR (на стороні клієнта) для користувачів. Ви можете це зробити. Юридично. Ніяких наслідків;)

РСР

Серверна рендеринг (SSR) є однією з методів, які ми використовували при створенні Vue Storefront. Це схоже на створення Ізоморфного / Універсального Застосування, в якому ви пишете одну базу коду JS для клієнтської / серверної візуалізації.

Найбільші переваги:

Універсальне застосування

Коли ви подивитеся на будь-яку з URL-адрес Vue Storefront - подібно https://demo.vuestorefront.io/c/women-20 - і натисніть кнопку "Переглянути джерело", ви можете знайти, що Vue Storefront надає веб-переглядачу дуже унікальну користувальницьку розмітку для кожного обслуговуваного URL.

ОК, так це виглядає як 2003 '- класичний HTML + CSS. Генерується на JavaScript, серверній стороні.

Це як класичне веб-додаток. Після того, як перша сторінка завантажена - додаток веде себе як типовий SPA з точки зору клієнта - вибірка даних для всіх наступних сторінок за допомогою AJAX + Service Workers.

Для Googlebot це просто HTML, який дозволяє йому індексувати його оптимальним способом. Для розробника це той самий код - незалежно від того, чи є він клієнтом або сервером.

SEO-дружні URL-адреси

Дуже важливо оптимізувати структуру посилань - не тільки для того, щоб уникнути типових посилань на хеш-тег SPA (#products замість / products?), Але й дозволити налаштувати URL-адреси.

Vue.js надає розробнику досить прохолодний механізм Vue Router ( https://router.vuejs.org/ ), де можна додавати та змінювати власні відображення URL / компонент.

Метадані + мікроформати

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

Вибрані рамки повинні дозволити розробникам працювати на рівні шаблону, створюючи структуру HTML, що налаштовується. Vue Storefront базується на движку шаблонів - основні структури можуть бути змінені, обмінені, видалені і т.д.

д

Vue.js - це круто зі своєю системою. Зрештою, шаблони компілюються до звичайного JavaScript-коду (наприклад, шаблони React JSX, але мають набагато більше пропозицій, а тим більше простіше знайомитися з новими розробниками;))

Швидкість

Час рендеринга сервера також може поліпшити ваш рейтинг SEO. Вона неодноразово офіційно була заявлена ​​самою компанією Google і доведена багатьма експериментами. Алгоритм індексування використовує основну інформацію про швидкість завантаження сторінок, зібрану серед користувачів. Таким чином, оптимізація часу завантаження сторінки збільшить не тільки показники конверсій, але й пошукові рейтинги.

База даних NoSQL, кешування та попередня візуалізація допомагають зберегти час SSR Vue Storefront під 0.2s (на розробниках env, без оптимізації). Добре, просто хотів би показати це;)

Перехід до створення прикладних програм JavaScript є природним кроком у веб-розробці. Якщо ви піклуєтеся про надання найкращого користувальницького досвіду (особливо для мобільних користувачів), PWA є те, що ви шукаєте. Ми побудували Vue Storefront, маючи на увазі всі обмеження, які мають пошукові системи, і наше рішення дотримується всіх найкращих практик JS SEO . В результаті, програма є одночасно зручною для користувачів і пошукових систем.

  • PWA діє як рідна програма та забезпечує кращий досвід користувача. Варто розробити, якщо ви хочете збільшити продажі. Існує багато досліджень, щоб дізнатися, як розпочати роботу Вітрина Google закінчуючись нашим TOP 30 Прогресивне дослідження веб-додатків .
  • Пошукові системи не можуть плавно обробляти додатки на основі JavaScript. Тим не менш, можна побудувати SEO-дружній додаток.
  • Візуалізація на стороні сервера є найкращим рішенням для обслуговування програм-сканерів JavaScript у дружньому до SEO способі.
  • WRS (служба веб-рендеринга - послуга, яка використовується Google для відображення веб-сайту перед індексацією) - це свого роду безголовий браузер; це як дуже старий - 2015 'vintage - Chrome 41 до деякої міри.
  • Набагато простіше підтримувати розмітку HTML для динамічного генерування (SSR) для оптимізації SEO, ніж витончено понизити обмеження JS, щоб Googlebot міг індексувати вашу програму належним чином.
  • Ви повинні переконатися, що ваші сценарії є швидкими. Переконайтеся, що ваш сервер не сповільнюється при збільшенні навантаження на хост.

Докладніше про Блог Elephate . Навряд чи можна знайти краще керівництво до індексації JS.

Цю статтю написав Петро Карватка у співпраці з Марією Цесьлак з Elephate.

Цю статтю написав Петро Карватка у співпраці з Марією Цесьлак з Elephate

Products замість / products?
Навигация сайта
Реклама
Панель управления
Календарь новостей
Популярные новости
Информация
Экономика стран www.mp3area.ru © 2005-2016
При копировании материала, ссылка на сайт обязательна.