Мета-теги — это элементы HTML, которые содержат информацию о веб-странице (метаданные) и размещаются внутри секции <head>. Они не видны пользователю напрямую, но играют важную роль для поисковых систем, социальных сетей и браузеров
Зачем они нужны ?? Примеры задач мета-тегов:
Указать кодировку страницы. Настроить отображение страницы на мобильных устройствах. Передать информацию для социальных сетей и поисковых систем. Добавить иконку для вкладки браузера.
В коде это выглядит так:
Как правильно написать мета-теги?
Кодировка страницы <meta charset="utf-8">
Этот тег указывает, что страница использует кодировку UTF-8. Она поддерживает большинство языков и символов.
Адаптивный дизайн <meta name="viewport" content="width=device-width, initial-scale=1.0"> - очень важно !!
Этот тег помогает корректно отображать сайт на мобильных устройствах, подстраивая его под ширину экрана.
Мета-теги Open Graph (для социальных сетей) Используйте их, чтобы ваш сайт красиво выглядел при публикации ссылок в соцсетях:
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Заголовок вашей страницы">
<meta property="og:description" content="Краткое описание страницы">
<meta property="og:image" content="https://example.com/image.jpg">
og:type — тип материала, например, article (статья), website (веб-сайт).
og:url — ссылка на страницу.
og:title — название страницы.
og:description — краткое описание (опционально).
og:image — ссылка на изображение, которое будет отображаться.
Название страницы <title>Название вашего проекта</title>
Название страницы отображается на вкладке браузера и влияет на SEO.
Иконка страницы <link rel="icon" href="./images/favicon.png">
Указывает путь к изображению, которое будет отображаться в качестве иконки на вкладке браузера.
Полный пример html кода:
https://codepen.io/noni_tut/pen/pvzwExq
Полезные советы:
- Проверяйте адаптивность сайта с помощью тегов viewport.
- Для социальных сетей используйте тестеры, как вариант - отправьте ссылку другу в телеге или https://metatags.io/?url=https%3A%2F%2Fnonitut.github.io%2Fnewone%2F на этом сайте, кстати очень удобно ^0^
- Используйте уникальные мета-теги для каждой страницы, чтобы повысить SEO
Почему нельзя использовать локальный путь в Мета-тег og:image ?
Социальные сети не могут получить доступ к вашим локальным файлам или изображениям, которые хранятся на вашем компьютере или не опубликованы в Интернете. Они используют свои серверы для загрузки и обработки изображения, и для этого требуется прямой доступ через URL.
Мета-тег og:image не поддерживает локальные пути (например, ./images/image.jpg), так как социальные сети требуют, чтобы изображение было доступно через Интернет. Это значит, что вы должны указать полный URL-адрес изображения, который начинается с http:// или https://.
Как сделать картинку доступной для og:image?
Загрузите изображение на сервер: Если у вас есть веб-сайт, поместите изображение в папку на сервере и используйте полный URL, например:
<meta property="og:image" content="https://yourwebsite.com/images/image.jpg">
Используйте облачные сервисы:
Если у вас пока нет сайта, вы можете загрузить изображение на платформы, предоставляющие прямые ссылки, например:
Google Drive (но нужно убедиться, что файл доступен для всех).
Dropbox. Imgbb, Imgur или аналогичные сервисы для хостинга изображений.
Ребята, конечно же в статье не все мета теги, их намного больше, но тут база, желаю вам успехов в освоении кода и мета тегов ⚡️⚡️⚡️⚡️⚡️⚡️⚡️⚡️⚡️⚡️