Отчёт: Социальные карточки
Мы проверяем, есть ли на веб-сайте социальные карточки (Open Graph и Twitter Cards) и действительны ли они
Социальные карточки - это способ отобразить веб-сайт в социальных сетях. Они являются требованием для любого веб-сайта в современном вебе и должны отражать идентичность бренда. Они также используются поисковыми системами для отображения веб-сайта в результатах поиска, обычно с большим изображением.
Рекомендации
- Создайте высококачественное изображение социальной карточки размером 1200x630 пикселей для оптимального отображения на разных платформах
- Включите логотип вашего бренда и убедительное визуальное представление вашего контента
- Используйте четкий, читаемый текст с хорошим контрастом на фоне
- Проверьте свои социальные карточки с помощью инструмента Facebook Sharing Debugger и валидатора карточек Twitter
- Убедитесь, что ваши социальные карточки соответствуют идентичности вашего бренда и дизайну веб-сайта
Известные ошибки
- На веб-сайте есть недействительные социальные карточки (см. подробности)
- На веб-сайте нет социальных карточек
Минимальная социальная карточка
Это пример минимальной социальной карточки, необходимой для правильного отображения в большинстве социальных сетей. Это хорошее начало, но не лучший способ отобразить веб-сайт во всех социальных сетях, которые могут ожидать и другие поля.
<meta name="twitter:card" content="summary" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:url" content="https://your-website.com/your-page" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://your-website.com/image.jpg" /><!-- optional -->
Карточки Twitter
Это полный пример реализации карточки Twitter, показывающий все доступные поля и их правильное использование. Хотя не все поля обязательны, их реализация обеспечивает наилучшее возможное отображение на Twitter и других платформах, поддерживающих карточки Twitter.
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description of your page." />
<meta name="twitter:image" content="https://your-website.com/image.jpg" /><!-- optional -->
<meta name="twitter:url" content="https://your-website.com/your-page" /><!-- optional -->
<meta name="twitter:site" content="@your-twitter-handle" /><!-- optional -->
<meta name="twitter:creator" content="@your-twitter-handle" /><!-- optional -->
Карточки Open Graph
Это полный пример реализации карточки Open Graph, показывающий все доступные поля и их правильное использование. Хотя не все поля обязательны, их реализация обеспечивает наилучшее возможное отображение на Facebook, LinkedIn и других платформах, поддерживающих протокол Open Graph.
<meta property="og:title" content="Your Page Title" />
<meta property="og:url" content="https://your-website.com/your-page" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://your-website.com/image.jpg" /><!-- optional -->
<meta property="og:type" content="website" /><!-- optional -->
<meta property="og:site_name" content="Your Website Name" /><!-- optional -->
<meta property="og:locale" content="en_US" /><!-- optional -->
<meta property="og:locale:alternate" content="en_GB" /><!-- optional -->
<meta property="og:locale:alternate" content="en_AU" /><!-- optional -->
<meta property="og:locale:alternate" content="en_CA" /><!-- optional -->
<meta property="og:locale:alternate" content="en_NZ" /><!-- optional -->
<meta property="og:locale:alternate" content="en_ZA" /><!-- optional -->