Что такое meta charset utf 8
Что внутри «head»? Метаданные в HTML
Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:
В этой статье мы рассмотрим всё вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой.
Однако на больших страницах блок может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.
Название страницы (title)
Мы уже видели, как работает элемент : его используют для добавления заголовка (названия страницы) в документ. Элемент
(en-US) тоже иногда называют заголовком страницы. Но это разные вещи!
Активное изучение: разбор простого примера
set to
element.» src=»https://mdn.mozillademos.org/files/12323/title-example.png» style=»display: block; margin: 0 auto;» loading=»lazy»>Теперь должно стать совершенно ясно, в чём разница между
Содержимое элемента используется и в других местах. Например, при добавлении страницы в избранное (Bookmarks > Bookmark This Page в Firefox), текст из предлагается в качестве названия закладки.
element » src=»https://mdn.mozillademos.org/files/12337/bookmark-example.png» style=»display: block; margin: 0 auto;» loading=»lazy»>
Текст из также появляется в результатах поиска, как мы скоро увидим.
«>» title=»Permalink to Метаданные: Элемент «>Метаданные: Элемент
Указываем кодировку текста документа
В заголовке примера выше есть следующая строка:
Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:
Примечание: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.
Активное изучение: экспериментируем с символьными кодировками
Чтобы проверить это, вернитесь к HTML из примера (странице title-example.html), поменяйте meta charset на ISO-8859-1 и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано «рис горячий»):
Указываем автора и описание
У элементов часто есть атрибуты name и content :
Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:
По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.
Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.
Активное изучение: как поисковые системы используют описание
Описание из используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.
Примечание: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.
Другие виды метаданных
В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.
Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:
Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия (User eXperience, UX).
У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:
Добавление иконок
Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.
Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.
Чтобы добавить на страницу favicon:
Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:
В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении.
Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.
Подключение CSS и JavaScript
Метатеги
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Метатеги для поисковых механизмов
Среди разработчиков сайтов существует мнение, что правильно написанные метатеги позволяют подняться к верхним строчкам поисковых серверов. На самом деле это не так, на одних метатегах высоко не поднимешься, но и неудачно выполненное содержимое метатегов может ухудшить рейтинг сайта.
Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.
Некоторые принципы, относящиеся к метатегам:
description
Большинство поисковых серверов отображают содержимое поля description (пример 1) при выводе результатов поиска. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.
Пример 1. Использование Description
keywords
Этот метатег был предназначен для описания ключевых слов, встречающихся на странице (пример 2). Но в результате действия людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики пропускают этот параметр.
Пример 2. Использование Keywords
Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.
Автозагрузка страниц
Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv=»refresh» (пример 3).
Пример 3. Автозагрузка страницы
Кодировка
Пример 4. Выбор текущей кодировки
Мета теги страниц сайта: title, description, keywords, robots и другие
В статье:
В статье рассмотрим, для чего нужны мета теги, как влияют на продвижение сайта, каким образом их можно оптимизировать и как быстро проверить правильность заполнения через сервис для автоматического аудита Анализ сайта.
Что такое мета теги
Мета теги — это элементы html-разметки, которые содержат в себе информацию о странице сайта. Они находятся между тегами head в заголовке страницы.
Они не обязательны — сайт может нормально работать и без них, страницы откроются. Но мета теги нужны для продвижения, потому что к ним обращаются поисковые системы, когда обрабатывают запрос: по ним боты понимают, какая информация содержится на странице и удовлетворит ли она пользователей.
Технические мета теги
Есть мета теги, которые служат для технических функций — настройки визуального отображения страницы, подсказок ботам поисковых систем.
Robots
Мета тег robots информирует поисковые системы Яндекс и Google о доступности страницы для поисковых ботов. С помощью этого тега их можно закрывать или открывать страницу для индексации, а также разрешать или запрещать отслеживать гиперссылки.
В общем файле robots.txt указывают, как ботам поступать со страницами и файлами на сайте, а с помощью мета тега robots можно дать подробные рекомендации для конкретной страницы. Указания в robots.txt и robots не должны конфликтовать, иначе бот может не проиндексировать нужную страницу.
Рекомендации ботам в мета теге дают с помощью директив:
К примеру, этот мета тег запрещает поисковикам показывать страницу в поиске:
Для разных ботов можно указывать несколько мета тегов:
Есть оговорка для Google — гуглбот воспринимает содержание robots как рекомендации, а не правила, поэтому может не следовать указаниям и посещать даже закрытые страницы.
Наличие файла robots, который распознают поисковики, можно быстро проверить в Анализе в разделе Оптимизация:
Проверка наличия robots
Viewport
Тег Viewport применяют для корректного отображения адаптивных сайтов на мобильных устройствах.
Есть три варианта отображения сайта на смартфонах, владелец компании выбирает подходящее решение под потребности бизнеса:
Для мобильного приложения нужно много ресурсов на разработку и администрирование, но для некоторых компаний это оправданное решение. Чаще разработчики выбирают сделать адаптивную версию.
Для адаптивного сайта и ресурса с фиксированной или гибкой разметкой можно настроить отображение страницы на экране с помощью мета тега viewport.
Мета тег viewport выглядит так:
Атрибут «width» отвечаете за ширину сайта на экране. Можно указать конкретное число от от 200 px до 10 000 px либо «device-width», тогда система масштабирует страницу под экран.
Если мета тег viewport не прописан в коде, браузер будет масштабировать окно как для экрана монитора. Скорее всего такой сайт будет неудобно смотреть со смартфона, потому что контент будет мелким, может появиться горизонтальная прокрутка.ю Так что поведенческие ухудшатся, а поисковой робот в мобильной выдаче отдаст лучшие позиции другим сайтам.
Анализ сайта поможет сделать сайт мобилопригодным: он показывает превью сайта на смартфоне, ищет тег viewport и анализирует, насколько удобно пользоваться сайтом с мобильных устройств. Проверка адаптивности находится в разделе Юзабилити.
Проверка адаптивности для мобильных
Charset и Content-type
Charset — мета тег кодировки, то есть способа отображения кода страницы на экране пользователя. Тип кодировки показывает строка Content-Type и сервер в header запросе.
В HTML5 есть эквивалентные записи:
Ошибка может возникнуть, если у сервера и страницы указать разные кодировки, или если браузер неправильно определит кодировку страницы. Тогда вместо текста появится инопланетное послание, «кракозябры», как эти символы называют в обиходе.
Владельцу нужно срочно прописать мета тег сharset
Проблема решается с помощью meta charset. Чтобы буквы и цифры отображались в любом браузере корректно, во всех местах, где указана кодировка, она должна быть одинаковой. Обычно используют стандартизированную общепринятую кодировку UTF-8.
Для одностраничника пропишите кодировку в head страницы, все должно заработать.
Для других сайтов есть разные варианты настройки, нюансы мы разобрали в подробном руководстве «Как настроить кодировку сайта самостоятельно».
Найти страницы с ошибками в charset поможет анализ внутренних страниц в Анализе сайта: запустите сканер, в результатах поставьте фильтр «Ошибочные charset» и сервис покажет список ссылок на нужные страницы.
Поиск страниц с ошибками кодировки
Влияет ли meta charset на продвижение страницы
Прямого влияния на позиции страницы нет. Яндекс и Google не рассматривают кодировку как сигнал для индексирования или фактор ранжирования страницы в выдаче.
Тем не менее Charset косвенно влияет на SEO. Если пользователи зайдут на страницу и увидят абракадабру вместо текста, они покинут сайт. Это повлияет на поведенческие сигналы, а значит и на отношение поисковика к странице, и на ее позиции.
Refresh
Мета тег refresh использовали, чтобы задать время обновления страницы и переадресовать пользователя на другую. К примеру, его применяли при переезде сайта, для переадресации на главную после покупки, чтобы повысить поведенческие, для обновления информации. Или для продвижения по-черному — для дорвеев.
Страница перезагрузится через 5 секунд:
Страница перезагрузится через 4 секунды и перенаправит пользователя на сайт site2.ru:
При небольших значениях времени Яндекс посчитает мета тег аналогичным 302/303/307 редиректам.
Google не советует использовать meta-refresh, потому что он может повлиять на индексацию страницы, на которой установлен. Об этом говорил представитель Google Джон Мюллер. Бот воспринимает этот мета тег как редирект, поэтому проиндексирует страницу после перенаправления — то есть исходную скорее всего пропустит. Для переадресации лучше используйте 301 редирект.
Яндекс воспринимает мета тег и разрешает использовать его вместо 302 редиректа при переезде, если другие способы по каким-то причинам не подходят вам.
Author и Copyright
Мета теги Author и Copyright используют, чтобы указать автора контента и владельца авторских прав.
Автора контента можно указать и в разметке Schema.Org для статей, разметка позволит дать поисковику структурированную подробную информацию о контенте и поможет сформировать подробный сниппет для статьи, рецепта новости.
Мета теги для SEO
Перечисленные мета теги нужны, чтобы страница корректно отображалась на экране пользователя и индексировалась поисковыми системами. Но есть и другие мета теги, которые помогают странице нравится и поисковым системам, и пользователям.
Михаил Шакин, специалист по продвижению сайтов в рунете и англоязычном интернете, автор SEO-блога Михаила Шакина:
«Метатеги учитываются, но напрямую не влияют на продвижение. То есть если вы добавите в них ключевые слова, это не означает, что сайт попадет в топ.
Но в связке с кликабельностью и улучшением поведенческих факторов в поисковой выдачи оптимизация метатегов отлично работает. Суть в том, чтобы найти компромисс между SEO оптимизацией метатегов title и description и привлекательностью страницы в выдаче Яндекса и Google.
Исследования показали, что для того, чтобы повысить позицию в выдаче на один пункт, нужно увеличить CTR на 3%.
Поведенческие факторы при правильном подходе работают как в Google, так и в Яндексе. Задача не накрутить их, а улучшить естественным образом, чтобы посетители дольше находились на продвигаемом сайте и просматривали больше страниц, а также взаимодействовали с сайтом — нажимали кнопки заказа, комментировали и так далее».
Title
Title — заголовок страницы, его задача — описать, какая информация ждет пользователя на странице, и мотивировать его перейти по ссылке.
Title важен поисковым роботам — по заголовку они оценивают релевантность страницы запросу, и пользователям — глядя на title в результатах выдачи, потенциальные клиенты решают, кликать по ссылке или нет. Так что мета тег влияет на кликабельность и на видимость страницы в выдаче по ключевым запросам.
Исследование факторов ранжирования Лаборатории поисковой аналитики компании «Ашманов и партнеры» показало, что в Google видна сильная корреляция с попаданием в топ-30 для запроса в точной форме в title — это единственный тег, где важны ключевые слова и их количество.
Первое, что видят пользователи в результатах выдачи, это содержимое тега title
Как оптимизировать тег title
Грамотно составленный тег title увеличивает шансы сайта попасть в топ, поскольку он покажет, каким запросам релевантна страница. Чем больше тег похож на запрос, который пользователь ввел в поисковую строку, тем больше шансов попасть в самое начало выдачи.
Поэтому составление title немыслимо без сбора семантического ядра. Как ищут пользователи ваш товар или услугу, можно выяснить при помощи Яндекс.Wordstat.
Первая страница выдачи по запросу «анализ сайта»
Title может совпадать с тегом заголовка H1, поисковики не относятся к этому негативно. Но лучше уникализировать Title, используя брендовые и региональные запросы.
Андрей Прудко, директор студии интернет-маркетинга и веб-брендинга «Большая Буква»:
«Для наилучшего эффекта рекомендуется уникализировать Title и дополнять нужными ключами в рамках 12 слов — до 70 символов, допускается и более, но рекомендуется уложиться в указанные параметры.
Считаю, что для коммерческого проекта одной из лучших схем являются варианты (абстрактный пример):
Title: Купить стиральную машинку Аристон (Ariston) в магазине БольшаяСтирка
H1: Стиральные машинки Аристон (Ariston)
Title: Стиральные машинки Аристон (Ariston): купить в Москве, магазин БольшаяСтирка
H1: Стиральные машинки Аристон (Ariston)»
Советы по оптимизации заголовка страницы:
Андрей Прудко:
«Если для вебмастера сложно создать уникальные Title для всех страниц сайта, то добавляйте брендовый запрос: название компании, сайта, магазина. Причем уникальные в рамках сайта: некоторые путают и стараются сделать уникальные по всей поисковой выдаче».
Description
Description — описание страницы. Этот тег участвует в формировании сниппетов; пользователь видит его содержимое на странице выдачи результатов поиска.
Если не прописать этот мета-тег, в сниппет автоматически подтянется текст со страницы сайта
Заполнять тег description не обязательно, поисковик может сам найти фрагмент теста для описания. Исследование компании «Yoast» 2018 года показывает, что Google не важна плотность ключевых слов и длина description. В двух третях случаев поисковик проигнорировал description и взял в описания часть первого абзаца текста.
Но есть шанс, что в описание попадет именно ваш вариант — если у вас есть на это ресурсы, оформите его привлекательнее для пользователей.
Как составить description, чтобы привлечь клиентов
Description не обязательно прописывать вручную. Если на вашем сайте десятки тысяч товаров, заниматься составлением описаний долго, дорого и ни к чему. Лучше использовать специальные плагины для автоматической генерации сниппетов, к примеру, для WordPress это Yoast SEO.
Проверка Title, Description и текста на главной странице находится в основной сводке Анализа сайта:
Проверка оптимизации главной страницы
Проверка Title, Description и других мета-тегов остальных страниц есть в проверке внутренних страниц Анализа, с помощью фильтров и настройки колонок можно управлять массивом данных:
Проверка мета-тегов страниц
Keywords
Мета тег keywords — тег для ключевых запросов, по которым поисковые боты понимают, о чем идет речь на странице.
Ключи записывают через запятую, с пробелом между ними.
Keywords вписывают через запятую в единственном числе и обязательно следят, чтобы они были релевантны информации на странице
Еще в 2009 году представители Google заявили, что при ранжировании страницы полностью игнорирует этот мета тег, чтобы разработчикам было неповадно вписывать туда нерелевантные запросы.
В рекомендациях Яндекса написано, что этот мета тег может учитываться при определении соответствия страницы поисковым запросам.
Лаборатория поисковой аналитики компании «Ашманов и партнеры» провела исследование факторов ранжирования Google и Яндекс 2019. Оно не показало корреляции между количеством вхождений ключей в мета тег и попаданием в топ-30 или топ-3 Google или Яндекс. Исследователи отметили, что поисковики не считают вхождения «ключевиков» в текст.
По одной оси разные способы оценки, по другой зоны страницы:
Мета теги косвенно влияют на оптимизацию и позиции сайта, над ними нужно работать, но если сам сайт и его содержимое не понравится пользователям и поисковым системам — вашим работодателям — то на желанный топ можно не рассчитывать.
Подготовила Ольга Мороз, обновила Елена Жмурина
Элемент meta и кодировка веб-страниц.
В прошлой заметке мы с вами научились задавать кодировку текста для веб-страниц. Но, просто задать кодировку текста с помощью программы редактора кода, еще не достаточно. Для того, чтобы все заработало, нужно дополнительно сообщить браузеру, какую кодировку мы выставили для HTML-страницы.
Для этого нужно использовать специальный обязательный элемент, который называется meta и задать ему атрибут charset со значением кодировки, которую вы выставили.
Если вы не создадите этот элемент, то браузер будет пытаться определить кодировку текста автоматически и создаст этот элемент сам. Не факт, что это у него получиться правильно.
В качестве значения атрибута charset необходимо указать название кодировки.
Пример указания кодировки Юникод(UTF-8)
Пример указания кодировки Windows-1251.
Вот, как может выглядеть полный код html-страницы:
Внесите это изменение в вашу HTML-страницу и проверьте, что она успешно открывается в браузере.
1) Разместите в комментариях скриншот на вашу тестовую страницу, которая отображается в какой-нибудь нестандартной кодировке.
2) Сможете сделать так, чтобы кодировка у веб-страницы была выставлена как meta charset=»UTF-8″, но на странице все равно показывались бы кракозябры?
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Или зарегистрируйтесь через социальные сети:
Кодировка UTF – основной стандарт текста в интернете
Нужно правильно раскодировать сигналы, которые наш мозг получает из окружающей среды. Проще говоря, следует правильно « настроить » свой взгляд на жизнь. Ну, вроде не полупустой кошелек, а наполовину полный. То есть, требуется использовать нужную кодировку. Для интернета чаще всего правильной является кодировка utf :
Немного о кодировках
Наверное, не является секретом тот факт, что основным типом содержимого во всемирном веб-пространстве является текст. Конечно, сейчас с этим утверждением можно поспорить, но буквально какой-то десяток лет назад это было так.
Но передача текста в цифровом формате происходит совсем иначе, чем у нас на экране. Для перевода текста в машинный код используется двоичная система исчисления, состоящая лишь из 0 и 1.
Чаще всего нужно всего лишь поменять кодировку веб-страницы на кодировку utf8. Ведь она является наиболее распространенной во всем интернете.
Кодировка UTF-8
Наиболее распространенная среди стандартизированных и общепринятых текстовых кодировок. Расшифровывается как « восьмибитный формат преобразования Юникода » или « Unicode Transformation Format ».
Стандарт был разработан еще в 1992 году. В настоящее время он широко применяется не только во всемирной паутине, но и на прикладном уровне ( локальные машины и операционные системы ). Основным достоинством кодировки является ее совместимость с ASCII:
ASCII («American standard code for information interchange») еще одна (но более старая) кодировка представления текстовых данных. В ее таблице символов значения печатных и непечатных знаков заданы с помощью чисел в шестнадцатеричной системе исчисления.
При использовании UTF-8 для передачи данных в формате ASCII используются 7 первых битов. Последний ( восьмой ) служит для вывода « мусора » ( некорректно раскодированных данных ). Что при использовании кодировки для латинских символов существенно уменьшает объем текстовых данных.
Как уже говорилось, часто для корректного отображения текста достаточно лишь поменять кодировку документа. Рассмотрим, как это можно сделать в различных дисциплинах, применяемых для построения веб-пространства.
Как установить кодировку в HTML и PHP
Глобальные настройки кодировки
Описанные выше методы могут использоваться для отдельных веб-страниц или небольших сайтов. Но что делать, если вы имеете дело с ресурсом, состоящим из нескольких сотен страниц и десятка разделов? Давайте разберемся, как установить кодировку utf 8 для всего сайта.
Как и в предыдущем примере, в нем нужно заменить значение AddDefaultCharset на нужное. В нашем случае это utf-8 :
Изменение кодировки базы данных
Здесь нужно поменять значение нескольких полей на utf-8 :
И затем добавить строку skip-character-set-client-handshake :
Сначала узнаем, какие кодировки установлены по умолчанию в нашей базе данных. Для этого вводим запрос SQL :
Вот какой ответ мы должны получить:
Если какие-либо значения нас не удовлетворяют, то нужно их изменить. Воспользуемся для этого запросом к ядру сервера СУБД: