Практичний посібник з пошукової оптимізації (SEO) з Google

1. Зробіть хороший вміст
2. Зробіть свій сайт мобільним
3. Зробіть свій сайт доступним
4. Текст для читання з екрана
5. Використовуйте семантичний HTML
6. Зробіть свій сайт швидшим
7. Використовуйте CDN
8. Зменшіть JavaScript і CSS
9. Оптимізуйте зображення
10. Увімкнути стискання Gzip
11. Використовуйте кешування веб-переглядача
12. Створіть обліковий запис Google Analytics
13. Під’єднайтеся до консолі пошуку Google
14. Використовуйте структуровані дані
15. Створіть карту сайту
16. Використовуйте шифрування HTTPS
17. Висновок

Більшість трафіку на мій сайт надходить від органічних пошуків Google. Шукаючи як зробити тему WordPress , як використовувати bootstrap , і навчальний посібник , включаючи їхні варіації та інші популярні пошукові фрази, перерахують мій сайт як один з перших результатів (з моменту написання цієї статті у 2017 році).

Іноді алгоритм буде навіть вибирати мій результат як представлений фрагмент .

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

У результаті цих даних, багато людей запитували мене, що я роблю для SEO, і якщо я можу написати статтю на цю тему. Я не експерт, але поділюся тим, що я роблю, і тим, що знаю з вами.

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

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

Почати, перший і більш важливий крок, на сьогоднішній день.

Зробіть хороший вміст

Google є дуже ясно про це:

Надайте якісний вміст на своїх сторінках, особливо на домашній сторінці. Це єдина найважливіша річ.

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

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

Соціальні медіа також не обов'язково мають впливати на пошукові рейтинги. Ось як люди знайшли мій сайт (дані про придбання) з 1 по 28 лютого 2017 року .

З усіх сесій 80% були органічними, 11% - прямими, 4% - рефералами і лише 3% - соціальними засобами (reddit, Twitter, Facebook тощо). Я часто не публікую або прозелітизую, що може бути пов'язано з низьким відсотком соціальних медіа, але це не негативно позначилося на моєму рейтингу.

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

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

Зробіть свій сайт мобільним

Google також має [сильні думки] (<a href =) з цього питання:

Якщо ви не зробили свій сайт мобільним, вам слід. Більшість користувачів, які приходять на ваш сайт, можуть використовувати мобільний пристрій.

Ви можете запустити свій сайт за допомогою Мобільний тест перевіряти.

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

Зробіть свій сайт доступним

Доступність веб-сайтів це практика створення вашого сайту більш дружнім для людей з обмеженими можливостями. Це стосується людей, у яких є порушення зору (сліпота, поганий зір) або порушення слуху (глухота або поганий слух), серед інших вад.

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

Ресурси : WAVE (Інструмент оцінки доступності веб-сайтів), Wuhcag (Доступність для веб-розробників).

Текст для читання з екрана

Люди з сліпотою та порушеннями зору використовують програмне забезпечення для читання з екрана і повністю покладайтеся на текст, де ми можемо отримати візуальні підказки від зображень або піктограм.

Для того, щоб забезпечити контекст цих візуальних підказок, створіть клас для читання з екраном. Все, що ви розмістите в цьому класі, буде приховано для екранів, але все одно надасть текст читачам. Використовуйте це замість відображення: none або visibility: hidden.

Цей клас часто також записується як sr-only.

.screen-reader-text {кліп: rect (1px, 1px, 1px, 1px); позиція: абсолютна! висота: 1px; ширина: 1px; переповнення: приховано; }

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

<a href = "# main-content" class = "screen-reader-text"> Пропустити навігацію </ a> <nav> ... </ nav> <main id = "main-content"> </ main>

Інший важливий спосіб зробити сайт більш доступним - це додавання тегів alt для опису зображень.

<img src = "image.jpg" alt = "Альтернативний текст для опису зображення." />

(Це те, над чим я все ще маю працювати.)

Використовуйте семантичний HTML

Використання власних семантична структура у вашому HTML важливо для читачів екрану, щоб вони могли швидко і точно знаходити вміст. Це означає використання відповідних тегів заголовків (<h1> до <h5>), тегів списку (<ul>, <ol>) і тегів семантичної розкладки (<article>, <section>).

Переглянути повний Контрольний список WCAG 2.0 .

Зробіть свій сайт швидшим

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

Хороша ідея розпочати роботу - запустити свій сайт через різні інструменти перевірки швидкості в Інтернеті і побачити, де лежать найбільші проблеми. Як зауваження, я б обережно знову не захоплювався оптимізацією швидкості сторінки - наприклад, отримати ідеальний результат на Google PageSpeed ​​Tools практично неможливо, і є більш важливі речі, на які можна витрачати час.

Я згадаю кілька методів, які відносно легко реалізувати.

Ресурси: Google PageSpeed ​​Insights , Тест швидкості сайту Pingdom , WebPageTest , GT Metrix

Використовуйте CDN

Ви можете підключитися до постачальника CDN, наприклад CloudFlare , щоб миттєво прискорити роботу веб-сайту та зменшити витрати на пропускну здатність. Для простого особистого облікового запису, такого як моя, CloudFlare є безкоштовним. Для того, щоб використовувати CDN, ви встановите сервери доменів до нових, які надає CloudFlare.

Зменшіть JavaScript і CSS

Використовуючи такі завдання, як Залпа або Грунт , ви можете встановити JavaScript і CSS для автоматичного зменшення, що означає зменшення всіх пробілів і непотрібних символів. Це зменшує розмір активів сценарію та таблиці стилів

Оптимізуйте зображення

Зображення зазвичай є найбільшими активами, які обслуговуватиме ваш веб-сайт. Оптимізація та стиснення зображень є хорошим і простим способом зменшити швидкість завантаження. Ви можете використовувати інструмент на основі браузера, наприклад Optimizilla або TinyPNG , завантажте оптимізований вміст з Google PageSpeed ​​Insights або скористайтеся a завдання бігун . Якщо ви використовуєте WordPress, ви можете використовувати плагін, наприклад WP Smush It .

Увімкнути стискання Gzip

Стиснення Gzip значно зменшує розмір файлу HTML та інших активів. Це керівництво Патрік Секстон демонструє, як включити Gzip на різних типах серверів (Apache, NGINX).

Використовуйте кешування веб-переглядача

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

Створіть обліковий запис Google Analytics

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

У адміністративній області ви знайдете код відстеження, який ви розмістите в <head> всіх сторінках, які слід відстежувати. Після цього Google Analytics почне відстежувати трафік.

Під’єднайтеся до консолі пошуку Google

Консоль пошуку Google , частина інструментів Google для веб-майстрів - це доповнення до Google Analytics для веб-розробників. Створіть обліковий запис, додавши властивість, пов'язуючи його з обліковим записом Google Analytics, і перевірте домен.

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

Використовуйте структуровані дані

Структуровані дані це інший спосіб, який пошукові системи розпізнають вміст на веб-сайті.

JSON LD або JSON для пов’язаних даних - це найкращий спосіб отримання Google Схема інформації (структурованих даних). Нижче наведено один приклад типу схеми JSON LD - особи. Я використав себе як приклад. Я б просто поклав цей скрипт у нижній колонтитул мого веб-сайту.

<script type = "application / ld + json"> {"@context": "http://schema.org", "@type": "особа", "зображення": "tania.jpg", "jobTitle" : "Веб-розробник", "ім'я": "Tania Rascia", "gender": "female", "url": "", "sameAs": ["https://github.com/taniarascia", "https: //twitter.com/taniarascia "]} </ script>

Можна знайти список всіх типів і властивостей тут .

Мікродані буде альтернативним, менш бажаним способом додавання даних схеми до вашого веб-сайту.

Створіть карту сайту

Карта сайту допомагає сканерам пошукової системи індексувати та розуміти ваш веб-сайт. Ви можете створити карту сайту з безкоштовним інструментом на основі браузера, таким як Генератор Sitemap XML . Якщо ви використовуєте WordPress, використовуйте Генератор Sitemap Google підключати.

Використовуйте шифрування HTTPS

Щоб покращити безпеку в Інтернеті, Google здійснив шифрування HTTPS через SSL / TLS a коефіцієнт ранжирування у 2014 році.

Можна використовувати Давайте шифрувати для встановлення дійсного з'єднання HTTPS. Інакше я написав цей посібник про те, як використовувати одну з стандартних сервісів сертифікатів.

Висновок

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

Як і повідомлення, які ви бачите тут? Зареєструйтеся, щоб отримувати сповіщення про нові.