>
← Повернутися на головну

Hreflang теги для багатомовних сайтів

Налаштування мовних та регіональних версій для Google SEO

📅 Оновлено: 7 лютого 2026 ⏱️ Час читання: 35 хв 🎯 Рівень: Середній
📘 Що таке hreflang?

Hreflang — HTML-атрибут, який повідомляє Google та іншим пошуковим системам про альтернативні мовні та регіональні версії сторінки. Це запобігає проблемам з дублікатами контенту та показує користувачам правильну версію сайту.

  • 🌍 Мовні версії: uk (українська), en (англійська), de (німецька)
  • 📍 Регіональні версії: en-US (англійська США), en-GB (англійська Британія)
  • 🔄 Запобігає duplicate content — Google розуміє, що це варіанти однієї сторінки
  • 🎯 Покращує UX — користувачі бачать версію своєю мовою

Частина 1: Синтаксис hreflang

Базовий приклад

<!-- Українська версія сторінки --> <link rel="alternate" hreflang="uk" href="https://scientific-calculators.com/uk/quadratic-equation" /> <!-- Англійська версія --> <link rel="alternate" hreflang="en" href="https://scientific-calculators.com/en/quadratic-equation" /> <!-- Російська версія --> <link rel="alternate" hreflang="ru" href="https://scientific-calculators.com/ru/quadratic-equation" /> <!-- Німецька версія --> <link rel="alternate" hreflang="de" href="https://scientific-calculators.com/de/quadratic-equation" /> <!-- x-default для всіх інших мов (fallback) --> <link rel="alternate" hreflang="x-default" href="https://scientific-calculators.com/en/quadratic-equation" />
📌 Важливі правила:
  1. Взаємність (reciprocity): кожна сторінка повинна посилатися на всі інші версії + на себе
  2. Абсолютні URL: завжди повний URL з https://
  3. Self-referencing: сторінка повинна мати hreflang на саму себе
  4. x-default обов'язковий: fallback версія для невідомих мов/регіонів

Мовні коди (ISO 639-1)

Мова Код Приклад hreflang
Українська uk hreflang="uk"
Англійська en hreflang="en"
Російська ru hreflang="ru"
Німецька de hreflang="de"
Французька fr hreflang="fr"
Іспанська es hreflang="es"
Польська pl hreflang="pl"

Регіональні варіанти (мова + країна)

<!-- Англійська для США --> <link rel="alternate" hreflang="en-US" href="https://example.com/us/" /> <!-- Англійська для Великобританії --> <link rel="alternate" hreflang="en-GB" href="https://example.com/uk/" /> <!-- Англійська для Канади --> <link rel="alternate" hreflang="en-CA" href="https://example.com/ca/" /> <!-- Іспанська для Іспанії --> <link rel="alternate" hreflang="es-ES" href="https://example.com/es/" /> <!-- Іспанська для Мексики --> <link rel="alternate" hreflang="es-MX" href="https://example.com/mx/" /> <!-- Іспанська для Аргентини --> <link rel="alternate" hreflang="es-AR" href="https://example.com/ar/" /> <!-- Португальська для Бразилії --> <link rel="alternate" hreflang="pt-BR" href="https://example.com/br/" /> <!-- Португальська для Португалії --> <link rel="alternate" hreflang="pt-PT" href="https://example.com/pt/" />

Частина 2: Три методи реалізації hreflang

1 HTML теги в <head> (найпростіший)

Додайте теги безпосередньо у <head> кожної сторінки:

<!DOCTYPE html> <html lang="uk"> <head> <meta charset="UTF-8"> <title>Калькулятор квадратного рівняння</title> <!-- Hreflang теги --> <link rel="alternate" hreflang="uk" href="https://scientific-calculators.com/uk/quadratic-equation" /> <link rel="alternate" hreflang="en" href="https://scientific-calculators.com/en/quadratic-equation" /> <link rel="alternate" hreflang="ru" href="https://scientific-calculators.com/ru/quadratic-equation" /> <link rel="alternate" hreflang="de" href="https://scientific-calculators.com/de/quadratic-equation" /> <link rel="alternate" hreflang="x-default" href="https://scientific-calculators.com/en/quadratic-equation" /> </head> <body> ... </body> </html>
✅ Переваги:
  • Простий у реалізації
  • Не потрібен доступ до сервера
  • Працює на статичних сайтах
⚠️ Недоліки:
  • Збільшує розмір HTML
  • Важко підтримувати при багатьох мовах
  • Потрібно оновлювати всі сторінки при додаванні нової мови
2 HTTP заголовки (для PDF/файлів)

Налаштуйте сервер для відправки Link HTTP-header:

Link: <https://scientific-calculators.com/uk/guide.pdf>; rel="alternate"; hreflang="uk", <https://scientific-calculators.com/en/guide.pdf>; rel="alternate"; hreflang="en", <https://scientific-calculators.com/ru/guide.pdf>; rel="alternate"; hreflang="ru", <https://scientific-calculators.com/en/guide.pdf>; rel="alternate"; hreflang="x-default"

Apache (.htaccess):

<Files "guide.pdf"> Header add Link '<https://scientific-calculators.com/uk/guide.pdf>; rel="alternate"; hreflang="uk"' Header add Link '<https://scientific-calculators.com/en/guide.pdf>; rel="alternate"; hreflang="en"' Header add Link '<https://scientific-calculators.com/en/guide.pdf>; rel="alternate"; hreflang="x-default"' </Files>

Nginx:

location ~ \.pdf$ { add_header Link '<https://scientific-calculators.com/uk/$uri>; rel="alternate"; hreflang="uk"'; add_header Link '<https://scientific-calculators.com/en/$uri>; rel="alternate"; hreflang="en"'; add_header Link '<https://scientific-calculators.com/en/$uri>; rel="alternate"; hreflang="x-default"'; }
3 XML Sitemap (найкращий для великих сайтів)

Додайте hreflang у файл sitemap.xml:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <!-- Українська версія --> <url> <loc>https://scientific-calculators.com/uk/quadratic-equation</loc> <xhtml:link rel="alternate" hreflang="uk" href="https://scientific-calculators.com/uk/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="en" href="https://scientific-calculators.com/en/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="ru" href="https://scientific-calculators.com/ru/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="de" href="https://scientific-calculators.com/de/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="x-default" href="https://scientific-calculators.com/en/quadratic-equation"/> </url> <!-- Англійська версія --> <url> <loc>https://scientific-calculators.com/en/quadratic-equation</loc> <xhtml:link rel="alternate" hreflang="uk" href="https://scientific-calculators.com/uk/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="en" href="https://scientific-calculators.com/en/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="ru" href="https://scientific-calculators.com/ru/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="de" href="https://scientific-calculators.com/de/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="x-default" href="https://scientific-calculators.com/en/quadratic-equation"/> </url> <!-- Російська версія --> <url> <loc>https://scientific-calculators.com/ru/quadratic-equation</loc> <xhtml:link rel="alternate" hreflang="uk" href="https://scientific-calculators.com/uk/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="en" href="https://scientific-calculators.com/en/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="ru" href="https://scientific-calculators.com/ru/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="de" href="https://scientific-calculators.com/de/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="x-default" href="https://scientific-calculators.com/en/quadratic-equation"/> </url> <!-- Німецька версія --> <url> <loc>https://scientific-calculators.com/de/quadratic-equation</loc> <xhtml:link rel="alternate" hreflang="uk" href="https://scientific-calculators.com/uk/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="en" href="https://scientific-calculators.com/en/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="ru" href="https://scientific-calculators.com/ru/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="de" href="https://scientific-calculators.com/de/quadratic-equation"/> <xhtml:link rel="alternate" hreflang="x-default" href="https://scientific-calculators.com/en/quadratic-equation"/> </url> </urlset>
✅ Рекомендовано для великих багатомовних сайтів!
  • Централізоване управління (один файл)
  • Легко генерувати автоматично
  • Не збільшує розмір HTML
  • Легко валідувати

Частина 3: Автогенерація hreflang

JavaScript генератор

// hreflang-generator.js const languages = ['uk', 'en', 'ru', 'de', 'fr']; const defaultLang = 'en'; // Структура URL для різних мов function getUrlForLang(lang, path) { return `https://scientific-calculators.com/${lang}${path}`; } // Додати hreflang теги у <head> function addHreflangTags() { const currentPath = window.location.pathname; const head = document.head; // Видалити старі теги (якщо є) document.querySelectorAll('link[rel="alternate"][hreflang]').forEach(link => link.remove()); // Додати теги для кожної мови languages.forEach(lang => { const link = document.createElement('link'); link.rel = 'alternate'; link.hreflang = lang; link.href = getUrlForLang(lang, currentPath); head.appendChild(link); }); // Додати x-default const xDefaultLink = document.createElement('link'); xDefaultLink.rel = 'alternate'; xDefaultLink.hreflang = 'x-default'; xDefaultLink.href = getUrlForLang(defaultLang, currentPath); head.appendChild(xDefaultLink); } // Викликати при завантаженні сторінки document.addEventListener('DOMContentLoaded', addHreflangTags);

Node.js скрипт для генерації Sitemap

// generate-sitemap-hreflang.js const fs = require('fs'); const languages = ['uk', 'en', 'ru', 'de']; const defaultLang = 'en'; const baseUrl = 'https://scientific-calculators.com'; // Список всіх сторінок сайту const pages = [ '/quadratic-equation', '/derivative-calculator', '/matrix-calculator', '/physics/kinematics', '/chemistry/molar-mass', // ... додайте всі сторінки ]; function generateSitemap() { let xml = `<?xml version="1.0" encoding="UTF-8"?>\n`; xml += `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"\n`; xml += ` xmlns:xhtml="http://www.w3.org/1999/xhtml">\n\n`; pages.forEach(page => { languages.forEach(lang => { xml += ` <url>\n`; xml += ` <loc>${baseUrl}/${lang}${page}</loc>\n`; // Додати hreflang для всіх мов languages.forEach(altLang => { xml += ` <xhtml:link rel="alternate" hreflang="${altLang}" `; xml += `href="${baseUrl}/${altLang}${page}"/>\n`; }); // Додати x-default xml += ` <xhtml:link rel="alternate" hreflang="x-default" `; xml += `href="${baseUrl}/${defaultLang}${page}"/>\n`; xml += ` </url>\n\n`; }); }); xml += `</urlset>`; fs.writeFileSync('sitemap.xml', xml); console.log('✅ Sitemap згенеровано: sitemap.xml'); } generateSitemap();
# Запуск node generate-sitemap-hreflang.js

Частина 4: Валідація hreflang

1 Google Search Console
  1. Відкрийте Google Search Console
  2. Перейдіть у Experience → International Targeting → Language
  3. Перевірте помилки:
    • ⚠️ No return tags — відсутня взаємність
    • ⚠️ Incorrect hreflang — неправильний код мови
    • ⚠️ Missing x-default — відсутній fallback
2 Онлайн валідатори
3 Валідація через командний рядок
# Перевірити hreflang у HTML curl -s https://scientific-calculators.com/uk/page | grep 'hreflang' # Перевірити HTTP headers curl -I https://scientific-calculators.com/uk/page | grep -i link # Завантажити та перевірити sitemap.xml curl -s https://scientific-calculators.com/sitemap.xml | grep 'xhtml:link'

Частина 5: Поширені помилки

❌ Помилка 1: Відсутня взаємність (non-reciprocal)
<!-- ❌ НЕПРАВИЛЬНО: uk версія не посилається на en --> <!-- /uk/page --> <link rel="alternate" hreflang="uk" href="/uk/page" /> <!-- /en/page --> <link rel="alternate" hreflang="en" href="/en/page" /> <link rel="alternate" hreflang="uk" href="/uk/page" />
<!-- ✅ ПРАВИЛЬНО: обидві сторінки посилаються одна на одну --> <!-- /uk/page --> <link rel="alternate" hreflang="uk" href="/uk/page" /> <link rel="alternate" hreflang="en" href="/en/page" /> <link rel="alternate" hreflang="x-default" href="/en/page" /> <!-- /en/page --> <link rel="alternate" hreflang="uk" href="/uk/page" /> <link rel="alternate" hreflang="en" href="/en/page" /> <link rel="alternate" hreflang="x-default" href="/en/page" />
❌ Помилка 2: Відносні URL замість абсолютних
<!-- ❌ НЕПРАВИЛЬНО --> <link rel="alternate" hreflang="uk" href="/uk/page" /> <link rel="alternate" hreflang="en" href="/en/page" /> <!-- ✅ ПРАВИЛЬНО --> <link rel="alternate" hreflang="uk" href="https://example.com/uk/page" /> <link rel="alternate" hreflang="en" href="https://example.com/en/page" />
❌ Помилка 3: Відсутній x-default
<!-- ❌ НЕПРАВИЛЬНО: немає fallback для невідомих мов --> <link rel="alternate" hreflang="uk" href="https://example.com/uk/" /> <link rel="alternate" hreflang="en" href="https://example.com/en/" /> <!-- ✅ ПРАВИЛЬНО: є fallback --> <link rel="alternate" hreflang="uk" href="https://example.com/uk/" /> <link rel="alternate" hreflang="en" href="https://example.com/en/" /> <link rel="alternate" hreflang="x-default" href="https://example.com/en/" />
❌ Помилка 4: Неправильні коди мов
<!-- ❌ НЕПРАВИЛЬНО --> <link rel="alternate" hreflang="ua" href="..." /> <!-- ua = код країни, не мови --> <link rel="alternate" hreflang="eng" href="..." /> <!-- eng неправильний код --> <link rel="alternate" hreflang="en_US" href="..." /> <!-- підкреслення _ --> <!-- ✅ ПРАВИЛЬНО --> <link rel="alternate" hreflang="uk" href="..." /> <link rel="alternate" hreflang="en" href="..." /> <link rel="alternate" hreflang="en-US" href="..." /> <!-- дефіс - -->

Частина 6: Best Practices

✅ Рекомендації:
  1. Використовуйте Sitemap XML — найкраще для великих сайтів (не збільшує HTML, легко оновлювати)
  2. Завжди додавайте x-default — вкажіть англійську версію як fallback
  3. Self-referencing обов'язковий — кожна сторінка посилається на саму себе
  4. Consistency — використовуйте лише один метод (HTML теги АБО Sitemap АБО HTTP headers)
  5. Canonical tags — не використовуйте canonical у поєднанні з hreflang (або зробіть canonical = self)
  6. Tested thoroughly — перевірте через Google Search Console
  7. URL structure — використовуйте ccTLDs (.com.ua, .co.uk) АБО subdomains (uk.example.com) АБО subdirectories (/uk/)

Рекомендована структура URL

Метод Приклад Переваги Недоліки
Subdirectories /uk/, /en/ Легко налаштувати, єдиний домен Складніше geo-targeting
Subdomains uk.site.com, en.site.com Окремий контент, легко масштабувати Розділений авторитет домену
ccTLDs .com.ua, .co.uk Найкраще для geo-targeting Дорого, складне управління
URL parameters ?lang=uk — ❌ Не рекомендовано для SEO

Висновок

Hreflang — критично важливий елемент для багатомовних сайтів:

🚀 Рекомендований workflow:
  1. Оберіть URL структуру: subdirectories (/uk/) — найкраще для малих/середніх проектів
  2. Реалізуйте через Sitemap XML — централізоване управління
  3. Автоматизуйте генерацію — Node.js скрипт для оновлення sitemap
  4. Додайте x-default на англійську версію
  5. Валідуйте через Google Search Console
  6. Моніторте помилки щомісяця
📚 Додаткові ресурси:

Як користуватися шпаргалкою

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

Ефективне використання

Використовуйте шпаргалку поряд з розв'язуванням задач — не для списування, а як довідник формул. Спершу спробуйте пригадати формулу самостійно, потім звіртеся з довідником. Регулярне повторення формує стійку пам'ять.

Часті запитання (FAQ)

Які ключові формули та правила містить шпаргалка з hreflang теги для багатомовних сайтів?
Ця шпаргалка з 'Hreflang теги для багатомовних сайтів' включає: основні означення, головні формули у компактному вигляді, правила обчислень, типові підстановки та приклади застосування. Все систематизовано для швидкого пошуку.
Для кого призначена ця шпаргалка з hreflang теги для багатомовних сайтів?
Шпаргалка з 'Hreflang теги для багатомовних сайтів' орієнтована на студентів університетів та учнів старшої школи, а також на всіх, хто хоче швидко освіжити знання перед іспитом або при вирішенні практичних задач.
Як використовувати шпаргалку з hreflang теги для багатомовних сайтів при підготовці до іспиту?
Оптимальна стратегія: спершу вивчіть теорію, потім використовуйте шпаргалку як довідник при розв'язанні задач. За 1–2 дні до іспиту перегляньте шпаргалку цілком, звертаючи увагу на формули, які ви плутаєте.
Чи охоплює ця шпаргалка всю програму курсу з hreflang теги для багатомовних сайтів?
Шпаргалка з 'Hreflang теги для багатомовних сайтів' охоплює стандартну університетську програму: всі ключові теореми, формули та методи. Матеріал структурований від базових понять до просунутих результатів.
Де ще можна попрактикуватися з hreflang теги для багатомовних сайтів після вивчення шпаргалки?
Після роботи зі шпаргалкою рекомендуємо: тренажери вправ на calculator.party (миттєвий зворотний зв'язок), розв'язані задачі (показують метод покроково) та онлайн-калькулятори для перевірки власних результатів.