Softonic

Проверка OG-тегов на localhost

Шаг 1 / 3
Далее

Пока вы работаете на localhost, настоящих карточек публикации ещё не будет, потому что Facebook и другие платформы не могут открыть адрес на вашем компьютере. Но og-теги можно проверить уже сейчас. Вставьте HTML с локальной страницы, и инструмент покажет, какие теги есть и какие у них значения.

Как тестировать og-теги с localhost

  1. 1

    Откройте исходный код локально

    Откройте страницу на localhost в браузере и используйте view-source, чтобы скопировать раздел head.

  2. 2

    Вставьте HTML

    Поместите его в поле HTML заголовка страницы, затем нажмите Далее и Результаты.

  3. 3

    Проверьте красные пункты

    Каждый красный пункт среди шести проверок означает тег, который инструмент не смог прочитать из вашей разметки.

  4. 4

    Исправьте шаблон и проверьте снова

    Измените шаблон в проекте, перезагрузите страницу, заново скопируйте исходный код и вставьте его ещё раз.

Почему локальные страницы нужно проверять иначе

Социальные платформы загружают страницу с собственного сервера. Адрес вида localhost:3000 или 192.168.1.20 недоступен из Facebook, X или мессенджера, поэтому превью, которое вы там видите, никогда не точно отражает локальный результат. Локально можно проверить только саму разметку: есть ли теги, правильные ли у них атрибуты и заполнены ли значения.

Что стоит проверить локально

  • Использует ли каждый тег Open Graph атрибут property, например <meta property="og:title" ...>.
  • Содержит ли og:url полный адрес публичной страницы, а не localhost. Локальный адрес в og:url укажет неверную цель после публикации.
  • Является ли og:image абсолютным адресом https. Относительный путь, например /img/card.jpg, работает в браузере, но не в карточке публикации.
  • Заполнены ли значения и нет ли в них текста-заглушки из шаблона.

Проверка по публичному адресу

Когда страница окажется на настоящем домене, проверьте её тем же инструментом, скопировав исходный код с публичного адреса. Затем используйте Sharing Debugger с публичным URL, чтобы увидеть готовую карточку. Не отправляйте туда локальный адрес, потому что платформа до него не дотянется.

Типичные ошибки в средах разработки

Симптом Вероятная причина Решение
og:url показывает localhost Значение жёстко прописано в шаблоне Формируйте адрес из публичного домена или конфигурации
Изображение показывает локальный путь Относительный адрес Используйте полный адрес https к файлу
Теги видны только в инструментах разработчика JavaScript добавляет их после загрузки страницы Выводите теги в HTML, который отдаёт сервер
Старые теги остаются после изменения Закэшированная версия страницы Очистите кэш среды разработки и перезагрузите страницу

После публикации

Зелёный результат здесь означает, что разметка полная, но не то, что публичная страница работает. Проверьте, отвечает ли страница без входа, не перенаправляет ли она на другой адрес и открывается ли изображение в браузере. Только после этого локальное тестирование действительно завершено.

Часто задаваемые вопросы

Нет. Facebook не достигает адресов на вашем компьютере или в локальной сети, поэтому превью оттуда не собрать. Проверьте разметку здесь, а затем соберите публичный адрес.

Og:url указывает канонический адрес, на который ведут карточка и публикации. Если он указывает на localhost, публикации распределятся между адресами, которые никто не сможет открыть.

Да, если у тестовой среды есть публичный адрес. Проверьте там разметку так же, как в продакшене, потому что шаблоны в разных средах могут отличаться.

Инструмент читает HTML, который вы вставили, чтобы показать результат. Он не загружает вашу локальную страницу и не обращается ни к одной платформе.

Сопутствующие инструменты

Генератор карты сайта

Вставьте список URL и создайте корректную карту сайта XML с changefreq, priority и необязательным lastmod, готовую к сохранению и отправке в Search Console.

Парсер UTM

Вставьте URL кампании и прочитайте пять стандартных UTM-меток (source, medium, campaign, term и content) с каждым декодированным значением. Быстрый способ проверить ссылку отслеживания перед отправкой.

Проверка смешанного контента

Просканируйте любую страницу на HTTPS в поисках небезопасных HTTP-ресурсов, которые вызывают предупреждения о смешанном контенте и ломают значок замка в браузере.

Инструмент для извлечения метаданных

Извлеките метаданные страницы из любого URL: название, метаописание, Open Graph, карточки в Twitter, канонический URL и структурированные данные в формате JSON-LD.

Анализатор заголовков безопасности

Вставьте свои заголовки HTTP-ответа и получите приоритизированные советы по заголовкам безопасности, которые важны: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, Referrer-Policy и другим.

Конструктор UTM-ссылок

Создавайте URL для отслеживания кампаний с параметрами UTM source, medium, campaign, term и content. Чистые ссылки с URL-кодированием, готовые для рекламы и рассылок.

Инструмент доступен на других языках

Руководства и сценарии использования