Створення сайту на локальному комп’ютері — це лише половина роботи розробника. Щоб ваш проект побачив світ, його потрібно опублікувати (задеплоїти) в Інтернеті та зробити доступним для користувачів 24/7. Але навіть якщо сайт опубліковано і він ідеально працює, він не принесе користі, якщо користувачі не зможуть знайти його в Google або поділитися красивим посиланням у месенджері.
Кінцевий успіх веб-проекту залежить від того, наскільки якісно він оптимізований для пошукових систем (SEO) та як швидко і безпечно він віддається користувачам сервером (Хостинг). Сучасна веб-розробка значно спростила процеси розгортання: якщо раніше необхідно було самостійно налаштовувати Linux-сервер по FTP, то сьогодні достатньо “запушити” код у GitHub, і розумні платформи хостингу зроблять усе інше автоматично (CI/CD).
Мета цієї лекції — розібратися з процесом розгортання, базовими концепціями роботи Інтернету (DNS, Хостинг, SSL) та ключовими аспектами технічної оптимізації сайту для пошукових ботів.
Кожен комп’ютер в Інтернеті має свою унікальну адресу, яка називається IP-адресою (наприклад, 192.168.1.1 для IPv4 або складніший запис для IPv6). Людям важко запам’ятовувати цифри, тому були придумані доменні імена (наприклад, google.com).
Як це працює (спрощено):
example.com.example.com.Історично сайти працювали за протоколом HTTP (дані передавалися відкритим текстом). Якщо користувач вводив пароль або номер кредитної картки на такому сайті, будь-який зловмисник, що перехопив сигнал (наприклад, через публічний Wi-Fi в кафе), міг прочитати ці дані.
Сьогодні стандартом є HTTPS (HyperText Transfer Protocol Secure). Це той самий HTTP, але всі дані між клієнтом і сервером зашифровані за допомогою криптографічного протоколу SSL/TLS. Щоб сайт міг працювати по HTTPS, йому потрібен SSL-сертифікат — цифровий документ, що підтверджує справжність сайту та активує шифрування (саме він відображається у вигляді іконки “замочка” в адресному рядку браузера).
Важливо для розробників: Google Chrome позначає всі HTTP-сайти як “Небезпечні” (що лякає користувачів). Крім того, Google штучно занижує HTTP-сайти в результатах пошуку (песимізація). Багато сучасних API браузера (наприклад, доступ до геолокації або камери) взагалі не працюють без HTTPS.
Замість того, щоб орендувати власні віртуальні сервери (VPS/VDS) і вручну їх налаштовувати (встановлювати веб-сервери Nginx або Apache), фронтенд-розробники сьогодні масово використовують хмарні платформи типу PaaS (Platform as a Service) або Jamstack-хостинги.
Найпопулярніші платформи: Vercel, Netlify, GitHub Pages.
Їхні головні переваги:
git push в основну гілку, платформа автоматично завантажує ваш код, “збирає” проект (якщо використовується React/Vite) і розгортає оновлену версію на сервері. Це називається Безперервним Розгортанням (Continuous Deployment).SEO (Пошукова оптимізація) — це комплекс заходів, спрямованих на те, щоб ваш сайт з’являвся на першій сторінці результатів пошуку (Google, Bing) по потрібних ключових запитах.
Процес роботи Google складається з 3 етапів:
Завдання фронтенд-розробника полягає у правильному налаштуванні Технічного SEO. Ми повинні допомогти боту (який “бачить” не картинку на екрані, а читає HTML-код) максимально чітко розпізнати структуру сторінки.
Використання правильних HTML5-тегів (<header>, <main>, <article>, <nav>) замість суцільних <div> показує пошуковику структуру. Особливо критично важливі заголовки від <h1> до <h6>.
Правило: На кожній сторінці повинен бути тільки один унікальний тег
<h1>, який описує її головну тему (для статей — це заголовок статті, для товарів — назва товару). Якщо на сторінці кілька<h1>, це бентежить бота і псує SEO.
<title>Це найважливіший з SEO-тегів. Розміщується всередині <head>. Вміст цього тегу з’являється як активне посилання (синього кольору) у видачі Google (це називається “сніпет”). Він повинен бути унікальним для кожної сторінки сайту (довжиною ~50-60 символів).
descriptionЦе короткий опис того, про що сторінка. Google часто використовує його як сірий текст-підказку під посиланням (сніпет). Він не впливає безпосередньо на ранжування, але критично впливає на CTR (Click-Through Rate) — клікабельність вашого посилання. Сюди пишуть заклик до дії та ключові переваги.
<head>
<title>Купити ноутбук ASUS в Києві | Магазин TechPro</title>
<meta
name="description"
content="Широкий вибір ноутбуків ASUS. Офіційна гарантія, доставка кур'єром по Києву. Замовляйте онлайн!"
/>
</head>
<a> повинні мати атрибут href. Якщо це просто кнопка дії з JS (<a onclick="...">), бот не зможе по ній перейти.rel="nofollow". Це каже боту “я не ручаюся за цей сайт і не передаю йому свій рейтинг довіри”.Пошукові боти поки що не вміють “бачити” картинки людськими очима, вони спираються на ваш код. Тому кожен тег <img> зобов’язаний мати атрибут alt (Альтернативний текст), що коротко описує зображення. Зображення без alt втрачають шанс з’явитися у вертикалі “Google Зображення”.
<!-- Погано для SEO -->
<img src="img-1.jpg" alt="" />
<!-- Добре для SEO -->
<img src="asus-zenbook-14.jpg" alt="Ноутбук Asus Zenbook 14 срібного кольору" />
Коли ви відправляєте посилання другу в Telegram, Facebook або Twitter, месенджер/соцмережа автоматично “підтягує” картинку, заголовок та опис (формує так звану “картку” або прев’ю). Щоб керувати тим, як виглядає ваше посилання, був створений стандарт Open Graph (OG).
Це набір спеціальних мета-тегів у секції <head>, які читають боти соцмереж (а не пошукові боти).
Основні OG-теги:
<meta property="og:title" content="Заголовок для соцмереж" />
<meta
property="og:description"
content="Опис, що з'явиться в прев'ю посилання."
/>
<meta property="og:image" content="https://mysite.com/social-banner.jpg" />
<!-- Вказуємо тип контенту (стаття, веб-сайт, відео) -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mysite.com/this-page" />
Порада: Формат
og:imageнайкраще робити в розмірі1200x630px(співвідношення 1.91:1) — він ідеально підійде для Facebook, Twitter та LinkedIn.
Перед публікацією проекту в “Живе” середовище (Production) розробники повинні перевірити його на відповідність стандартам індустрії. Найзручніший інструмент для цього — Lighthouse.
Lighthouse — це автоматизований інструмент з відкритим вихідним кодом від Google, вбудований безпосередньо в DevTools (панель розробника вашого браузера, вкладка “Lighthouse”).
Він аналізує сторінку і виставляє оцінки (від 0 до 100) за чотирма категоріями:
alt, чи достатній контраст шрифтів, чи вистачає семантики).<title>, description, коректність посилань та доступність для ботів (файл robots.txt).Крім сухої оцінки, Lighthouse генерує детальний звіт із порадами, що саме потрібно виправити у вашому коді (наприклад, “зменшіть розмір такої-то фотографії”, “додайте title до сторінки”).
h1 до h6).title та description впливають на клікабельність результату пошуку, а атрибути alt у картинках — на ранжування в пошуку по зображеннях.og:image, og:title) забезпечують красиве відображення посилання під час “шеру” у месенджерах та соцмережах.<h1>?