() translation by (you can also view the original English article)
В этом кратком руководстве я представлю вам простой, но очень полезный инструмент, Hey Meta. Если вам интересно увидеть, как выглядит ваш сайт, когда им кто-то делиться, и вы хотите убедиться, что мета теги, которые вы используете, верны, Hey Meta как раз то, что вам нужно в этом случае. Начнем!
Узнайте ваши мета теги
Проверьте их
Проверьте эффективность ваших текущих мета тегов, введя URL в поле ввода. Вам будет показано превью для социальных сетей (которое будет отображаться в социальных сетях, приложениях и т.д.) и заголовок, описание, выбранное изображение вашего URL.
Если на вашей странице нет никаких мета тегов, то вы ничего не увидите.
Сгенерируйте правильные мета теги
Если на вашей странице не хватает каких-то мета тегов, либо же они отображаются некорректно, вы можете использовать Hey Meta, чтобы сгенерировать правильные мета теги. Введите вашу информацию в поля ниже:
Это же можно проделать для описания вашего сайта, URL и изображения. Сгенерированные теги отобразятся на превью, а код будет выглядеть примерно так:
1 |
<!-- HTML Meta Tags -->
|
2 |
<title>Test website</title> |
3 |
<meta name="description" content="This is the website description. Nice eh?"> |
4 |
|
5 |
<!-- Google / Search Engine Tags -->
|
6 |
<meta itemprop="name" content="Test website"> |
7 |
<meta itemprop="description" content="This is the website description. Nice eh?"> |
8 |
<meta itemprop="image" content="https://lorempixel.com/400/200/"> |
9 |
|
10 |
<!-- Facebook Meta Tags -->
|
11 |
<meta property="og:url" content="https://nothing.com"> |
12 |
<meta property="og:type" content="website"> |
13 |
<meta property="og:title" content="Test website"> |
14 |
<meta property="og:description" content="This is the website description. Nice eh?"> |
15 |
<meta property="og:image" content="https://lorempixel.com/400/200/"> |
16 |
|
17 |
<!-- Twitter Meta Tags -->
|
18 |
<meta name="twitter:card" content="summary_large_image"> |
19 |
<meta name="twitter:title" content="Test website"> |
20 |
<meta name="twitter:description" content="This is the website description. Nice eh?"> |
21 |
<meta name="twitter:image" content="https://lorempixel.com/400/200/"> |
22 |
|
23 |
<!-- Meta Tags Generated via https://heymeta.com -->
|
Здесь вы увидите HTML мета теги, такие как <title>, теги Твиттера, и теги Open Graph, такие как <meta property="og:title">, которые позволяют корректно делиться вашим сайтом в соцсетях. Эти теги можно поместить в элемент <head> вашего HTML документа.
Заключение
Убедитесь, что мета теги отображают ваш сайт сайт должным образом!
Дальнейшее чтение
