Google любить технічно досконалі сайти. Якщо ви хочете, щоб ваші сайти ранжувалися якнайкраще, ви повинні засвоїти основи і зробити все, що у ваших силах.
Хоча деякі аспекти технічної досконалості завжди були важливими, у цій статті я хочу зосередитись на семи причинах, з яких ваш сайт не працює настільки добре, як міг би. Якщо вам вдасться усунути ці проблеми, ваш сайт займе вищі позиції цього року та в найближчому майбутньому.
1. Оптимізація для мобільних пристроїв
Відвідування мобільних пристроїв становлять понад 50% світового веб-трафіку. У таких країнах, як США та Великобританія, це число ближче до 60 відсотків. Навіть до 2018 року наявність хорошого мобільного сайту була потребою, якщо ви хотіли високих конверсій.
Оголошення про первинність мобільного індексу Google означає, що мобільна версія сайту буде використовуватися для визначення базових показників якості сайту. Також це робить мобільні сайти настільки ж важливими для видимості в пошукових системах, як і конверсія.
Якщо ви хочете зробити свій сайт зручним для мобільних пристроїв або оновити існуючий мобільний сайт, важливо зробити це правильно. Є три поширені рішення для мобільних сайтів:
- m.example.com – рішення передбачає створення окремого сайту з під доменом на «м.» та перенаправлення туди мобільних користувачів
- Динамічна верстка – для кожного пристрою створюється окремий дизайн сайту. Сервер завантажує користувачеві потрібну залежно від пристрою, який він використовує
- Адаптивна верстка – створюється та підтримується лише один набір HTML-коду, але він відображається по-різному залежно від розміру екрану.
Хоча всі три рішення життєздатні, Google явно надає перевагу адаптивному методу.
Адаптивний дизайн
Адаптивний дизайн має безліч переваг. З погляду Google, це краще, оскільки тут немає переадресації.
З точки зору розробників та веб-менеджерів, а значить, ви будите мати справу тільки з одним набором HTML, а значить спростить створення, підтримку та відстеження сайту.
Якщо у вас є кілька сайтів через m. та динамічне обслуговування, відстежувати шлях клієнта стає набагато складніше, і багато ланцюжків конверсії включають відвідування з різних пристроїв.
Після 2018 року складно уявити ситуацію, коли адаптивний дизайн не найкращий варіант для мобільних пристроїв. Хоча Google не кара активно неадаптивні мобільні сайти. Якщо вони вказали це як своє краще мобільне рішення, можна припустити, що вони бачать у цьому деяку вигоду.
2. Використання AMP (прискорені мобільні сторінки) для контенту та реклами.
Це, ймовірно, найсуперечливіший із семи пунктів, які я підніму в цьому пості. Багато фахівців з маркетингу, в минулому піднімали попереджувальні сигнали про AMP, закликаючи веб-майстрів та колег з маркетингу оцінити цінність, яку AMP може реально нести для їхнього бізнесу, перш ніж витрачати час на його впровадження.
Хоча це, як і раніше, актуально. AMP важливий для достатньої кількості підприємств, тому його варто включити до цієї статті, і я вважаю, що в майбутньому його важливість зросте. Зокрема, зараз слід звернути особливу увагу видавцям новин та власникам інтернет-магазинів.
У результаті: AMP – це спосіб блискавичного завантаження контенту користувачам мобільних пристроїв. Google кешує AMP-версію сторінки (окремо від вихідної сторінки), яку він може використовувати для пошуку, не чекаючи, поки ваш сервер обробить повну сторінку (сервери кешування Google працюють набагато швидше, ніж ваші). Прискорені мобільні сторінки часто зустрічаються в каруселі новин Google і стрічці статей у додатку Google, але вони також починають проникати в електронну комерцію.
Зміст AMP
Оскільки AMP вимагає створення та управління новими версіями вашого контенту, важливо подумати, чи справді його впровадження принесе користь вашому сайту. Якщо цього не станеться, загальна швидкість сайту може бути вигідніша, враховуючи, що весь зміст AMP полягає у прискоренні перегляду на мобільних пристроях.
Тим не менш, поширеність AMP зростає, і я бачив, що він стає новим веб-стандартом, якого повинні прагнути сайти, так само, як стали стандартом сертифікати SSL. Можна з самого початку створювати нові сайти з урахуванням AMP, щоб вони набули більшого поширення в міру природного розвитку веб-сайтів.
Маючи це на увазі, моя команда і я вивчаємо можливості AMP для сайтів електронної комерції та Google Реклами. В даний час можливо – хоча і не широко – показувати AMP-контент за допомогою текстових оголошень Google, які завантажуються в Chrome та пристрої Android. Для цього просто введіть AMP-URL цільової сторінки як мобільну URL-адресу оголошення.
Крім новинних каруселів, сторінки AMP можуть також замінити стандартну версію URL у результатах мобільного пошуку, як показано на зображеннях нижче зі значком блискавки AMP.
Я досі не впевнений, якою мірою це стане загальноприйнятим стандартом, але зараз ясно одне: швидкість сайту важлива, якщо ви хочете бачити результати як від звичайного, так і від платного трафіку.
3. Швидкість сайту
Хоча швидкість AMP-контенту контролюється Google, немає причин, через які ви не можете створити справді швидкий веб-сайт за допомогою власних дій. Архітектура вашого сервера, збирання сайту та кешування можуть бути налаштовані таким чином, щоб ваш сайт швидко завантажувався на всіх пристроях.
Якщо ваш сайт працює повільно, ви втратите як звичайну видимість, так і конверсію. Швидкість сама по собі є фактором ранжування, але повільним сайтам буде складно утримувати користувачів.
Існує кілька різних способів оптимізувати швидкість сайту. Ми розглянемо деякі з них, розбивши процес завантаження сторінки на чотири загальні частини:
- Запит, коли дані сайту запитуються із сервера
- Відповідь, коли сервер об’єднує файли, необхідні для створення веб-сторінки
- Складання, коли браузер перетворює дані з сервера на HTML і CSS DOM (об’єктну модель документа)
- Рендеринг, коли браузер додає ресурси, такі як таблиця стилів або JavaScript.
Існують способи оптимізувати швидкість кожного кроку. Коли всі етапи будуть оптимізовані, ваш сайт працюватиме значно швидше, ніж міг би інакше.
Запит – з використанням CDN та меншої кількості файлів
Мережі CDN знаходяться між сервером та браузером, щоб наблизити користувача до таких ресурсів, як зображення, CSS та JavaScript. У деяких випадках ви навіть можете розмістити весь сайт у CDN. Улюблена мережа доставки контенту нашої команди – Amazon Cloudfront; таке рішення скорочує час запиту користувача з будь-якого місця.
Крім того, рекомендую провести аудит файлів, які вимагають для кожної сторінки вашого сайту. Багато тем і скриптів намагатимуться завантажувати великі файли у фоновому режимі кожної сторінки вашого сайту, навіть якщо ці файли не потрібні для цієї сторінки. Видалення цих непотрібних запитів скорочує час завантаження.
Відповідь – кешування та HTTP/2
Більшість динамічних веб-сайтів з керованим контентом складаються з вмісту в базі даних, шаблонів стилів та програмного пакета, який може зібрати все це разом. Щоб серверу не доводилося збирати вміст сайту кожного користувача, ми можемо кешувати його для зберігання готової версії сайту.
Кешування може бути реалізовано в CMS сайту, але кешування на стороні сервера також може використовуватися для збереження потужніших конфігурацій на рівні сервера. Кешування та CDN також добре поєднуються, оскільки ви можете кешувати цілі сторінки в CDN для обробки запиту до того, як він потрапить на сервер.
Ви також можете використовувати новітні серверні технології, такі як HTTP/2 для прискорення процесу. HTTP/2 дозволяє передавати дані “в потоці”, що означає, що сервер обробляє кілька запитів від браузера одночасно, а не обробляє їх один за одним.
Ключовий висновок цього розділу – уникати дешевого, загального чи «простого» хостингу. Ці варіанти можуть здатися привабливими, але низька ціна буде коштувати вам цінну швидкість і продуктивність, що в кінцевому підсумку може призвести до втрати більшої кількості грошей.
Складання та рендеринг – оптимізація критичного шляху та асинхронне завантаження файлів
Процес збирання прискориться, якщо ви скористаєтеся деякими техніками, які я згадував в останніх двох розділах. Але ви можете зробити більше, щоб скоротити час, необхідний для відображення сторінки у браузері користувача.
Ключовим моментом на заключному етапі є оптимізація критичного шляху рендерингу, що означає скорочення кількості ресурсів, які можуть заблокувати першу частину сторінки, яку користувач побачить від рендерингу.
Блокування рендерингу
Ви можете запобігти блокуванню рендерингу, тим самим прискоривши весь процес шляхом асинхронного завантаження файлів або скасування пріоритету для деяких з них, щоб вони завантажувалися останніми. Більшість CMS насправді поставляється з деякою оптимізацією для блокування рендерингу, але якщо ви продовжуєте бачити низьку продуктивність у браузері, вам варто уважніше вивчити цю проблему.
Якщо ви шукаєте способи прискорити процес самостійно, важливо переконатися, що великі файли JavaScript та CSS не потрібно завантажувати в заголовок документа. Якщо можливо, весь JavaScript повинен бути переведений у нижній колонтитул, CSS слід завантажувати лише за потреби, а зовнішні ресурси повинні завантажуватися асинхронно, якщо це можливо.
Оптимізація швидкості сайту – це дуже технічне завдання, але його треба робити, якщо ви хочете, щоб ваш сайт добре працював як у звичайному, так і платному трафіку.
4. Розуміння того, як Google сканує (або не сканує) JavaScript.
Фреймворки JavaScript – популярний інструмент у сучасній веб-розробці, але Google історично щосили намагався сканувати сторінки, які відображаються таким чином. У 2018 році сканери Google стали кращими, ніж будь-коли, у скануванні та рендерингу JavaScript, але ще не досягли досконалості.
Фреймворки JavaScript переважно дозволяють відображати сторінки з JS, а не завантажувати велику кількість HTML з сервера. Сайти, створені таким чином, вимагають лише серверних запитів для даних, які стосуються продукту або сторінки; все інше будується динамічно.
Зараз існують десятки популярних фреймворків JavaScript: Vue, React та Angular, і це лише деякі з них. Усі вони візуалізують контент однаково. Прихильники цього методу розробки стверджують, що він призводить до кращого UX, і можуть мати рацію.
JS-фреймворки
Однак Google не повністю погоджується з цим. Відомо, що JS-фреймворки створюють проблеми для маркетологів пошукових систем, що працюють як у звичайному, так і платному пошуку. Ми знаємо, що Google відображає JavaScript під час сканування іноді, але не завжди. Search Console тепер дозволяє нам бачити, як виглядає сторінка при її відображенні роботом Googlebot, але ми знаємо, що цього не відбувається щоразу, коли Google сканує ваш веб-сайт.
Сторінка без рендерингу JavaScript виглядає Google як сторінка, що складається в основному з порожніх тегів HTML. Це означає, що він не може бачити будь-який контент, необхідний для визначення теми та якості сторінки, включаючи текст та зображення. Це тривалий час було проблемою для сторінок, на яких певний текст, графіка та посилання були приховані або завантажені за допомогою JavaScript, але тепер це може бути проблемою для цілих сайтів, якщо вони покладаються на JS-рендерінг.
Google працює над цим. Можливо, за кілька років вони досягнуть мети. Однак на даний момент високопродуктивні сайти повинні уникати JS-фреймворків для ключового контенту та елементів навігації.
5. Правильне налаштування сайту для різних регіонів
У ході роботи ми щотижня бачимо як хороші, і погані приклади інтернаціоналізації. Різні агенції та бренди вже деякий час створюють веб-сайти для різних територій, часто без урахування пошукової оптимізації.
Майже кожен бізнес виходить онлайн, і навіть деякі з найменших вивчають варіанти інтернаціоналізації. Необхідність правильного настроювання важлива як ніколи – якщо ви зробите це неправильно, ви програєте на все більш конкурентному глобальному ринку. Чим більше ви зможете зробити для роботи сайту різними територіями та різними мовами, тим більше ви виграєте.
Правильне налаштування для регіонів – це коли користувач потрапляє на сайт його мовою або з націленням на його країну. Google покращив видачу різним користувачам цільового контенту для їх країни, але веб-майстрам ще багато потрібно зробити для забезпечення максимального UX.
Метатег під назвою hreflang
Google максимально допоміг маркетологам, надавши метатег під назвою “hreflang”. Це тег у заголовку HTML сторінки. Знаходиться в елементі посилання і містить мову та сторінку, яку повинен побачити користувач, якщо він говорить певною мовою.
В одному елементі можна вказати кілька мов. Google має сторінку підтримки на цю тему, де наводяться конкретні приклади реалізації. Багато CMS тепер підтримують hreflang з коробки, тому немає причин не впроваджувати його, якщо ви орієнтуєтеся на міжнародну аудиторію.
Якщо для сторінки, вказаної в тегах hreflang, є кілька мовних параметрів, я б порекомендував також встановити ціль за промовчанням, щоб Google було зрозуміло, що цю сторінку повинні бачити всі користувачі в невизначених регіонах.
Це дає вам максимальний контроль над переміщенням різних користувачів сайтом, і знижує ймовірність того, що Google видасть неправильний контент. У міру того, як Google покращується в цьому відношенні, ризик має зменшуватись.
6. Розподіл контенту по розрізненим сховищам
Розміщення контенту в розрізнених сховищах це створення архітектури сайту, в якій ключові інформаційні сторінки вкладені в ті ж папки, що і сторінки основних служб або категорій. Це допомагає покращити органічний рейтинг для основних ключових слів. Зараз стратегія дозріла, завдяки чому розрізнені сховища стали зручнішими та ефективнішими, ніж будь-коли.
У добре продуманого сховища контенту є як мінімум дві основні переваги: покращена органічна продуктивність для пов’язаних ключових слів та покращена взаємодія з користувачем. Актуальний контент, вкладений в одну папку, допомагає іншим сторінкам у цій папці ранжуватися, покращуючи якість пов’язаного контенту на сайті та забезпечуючи чіткішу внутрішню структуру посилань.
Google завжди намагається ранжувати сайти з хорошим рівнем інформації про цільові теми, навіть якщо ця інформація не вся міститься на одній сторінці. Крім того, більша кількість внутрішніх посилань за допомогою хлібних крихт та контекстних посилань спрощує пошук та індексування сторінок для Google та посилює тематичний зв’язок групи сторінок.
FAQ
Досвід користувача також може поліпшитися в результаті добре продуманого поділу. Наприклад, FAQ для важливої категорії в тій же папці, що й сторінки категорій, дозволяє користувачам швидко та легко знаходити додаткову інформацію.
Якщо весь ваш контент прихований у розділі блогу або посібників, користувачам може бути дуже складно розкопати його, особливо якщо у вас немає ефективної функції внутрішнього пошуку по сайту.
Багато CMS дозволяють відразу налаштувати поділ, але для деяких може знадобитися встановлення плагінів. При плануванні структури вам необхідно переконатися, що URL-адреси залишаються чистими і користувачам легко переміщатися, інакше ви можете послабити деякі з переваг, про які я говорив вище.
Якщо ваша CMS не дозволяє вам зберігати контент за промовчанням, можливо, доведеться поговорити з розробниками сайту про те, як найкраще його реалізувати.
7. Огляд старого контенту та стратегій.
Хоча важливо дивитися у майбутнє, іноді найкращий спосіб підготуватися до майбутнього – це оптимізувати те, що у вас вже є. Є кілька способів зробити це, але ми маємо можливість розглянути лише деякі.
Один із способів – подивитися на свій поточний рейтинг у пошуках можливостей «швидкого виграшу». Вони існують там, де ваші сторінки ранжуються відразу за першою сторінкою або, можливо, за межами трьох найкращих результатів. Створюючи посилання на ці сторінки, оновлюючи контент або додаючи відповідні медіа, ви можете зробити їх успішнішими за відносно невеликого обсягу ресурсів.
Ще одна ключова стратегія – постійно відвідувати вашу високоефективну інформаційну та комерційну сторінку, щоб переконатися, що на них представлена найактуальніша інформація. Це допоможе сторінкам, які з уже високим рівнем трафіку залучити більше відвідувачів, що призведе до збільшення доходу від вашого веб-сайту.
Це особливо важливо, якщо ви використовували вічну або наріжну стратегію щодо контенту. Якщо хочете, щоб контент верхнього рівня залишався актуальним, його потрібно періодично переглядати та оновлювати.
Незалежно від існуючого контенту на сайті, це має бути враховано у ваших планах щодо сайту в майбутньому.
Подумайте про те, що у вас вже є, для підвищення швидкості сайту, або як розділити контент, або який є мобільний UX сайту. Щоб ці далекоглядні стратегії були найефективнішими, вони повинні працювати разом і покращувати те, що вже є.