ИТ Блог. Администрирование серверов на основе Linux (Ubuntu, Debian, CentOS, openSUSE)
В этой статье мы покажем вам, как работать с метатегами в HTML5.
Прежде всего, вы должны понять, что такое метатег.
Мета-теги – это некоторые скрытые части вашей страницы HTML5, которые имеют функцию информирования браузера о метаданных. Они очень важны для вашего веб-браузера.
Благодаря этому вы можете просто показать браузеру, как поступать и как правильно отображать вашу веб-страницу, а также для поисковых систем, как Google.
Таким образом, вы можете просто показать поисковым системам, как индексировать и как правильно описывать ваш сайт.
В HTML доступны сотни и сотни метатегов, с которыми мы можем работать.
В этой статье, как и в видео, мы поговорим о шести наиболее важных метатегах. Это описание, ключевое слово, область просмотра, роботы, заголовок и обновление.
Большая часть свежих метаданных скрыта. Итак, важно помнить, что все метатеги должны быть вставлены в заголовок вашего HTML-файла.
Итак, все метатеги должны находиться внутри раздела заголовка, то есть внутри тегов <head><head>.
Прежде всего, давайте разберемся с метатегом title. Итак, метатег title – это просто заголовок страницы, который будет отображаться на вкладке веб-браузера.
Но, если на вашей странице не задан заголовок, вы можете увидеть на вкладке имя файла, с которым имеете дело. Поскольку это локальный файл, вы можете увидеть имя файла на вкладке вместо заголовка.
Но если бы это был удаленный файл, вы бы увидели его URL. Если на вашей странице не задан заголовок, вы можете увидеть на вкладке имя файла, с которым имеете дело.
Поскольку это локальный файл, вы можете увидеть имя файла на вкладке вместо заголовка. Если бы это был удаленный файл, вы бы увидели его URL.
Итак, давайте посмотрим, как задать заголовок веб-странице.
Мета-тег заголовка немного отличается от других метатегов. Вместо метатега вы должны использовать тег Title, это <title></title>. Итак, это немного отличается от других метатегов.
Чтобы установить заголовок, нам просто нужно поместить заголовок страницы внутри этого тега, как в примере кода ниже:
<title>Борис, пес!</title>
Итак, теперь, после сохранения файла, у вас будет установлен заголовок страницы на вкладке, как в примере ниже:
Вы должны помнить, что заголовок страницы должен быть ограничен.
Идеальное количество символов – от 30 до 35. Только не переусердствуйте.
Но, если вам это нужно, мы также рекомендуем название меньшего размера.
У большинства людей в браузере открыто много вкладок. Итак, чем меньше ваш заголовок, тем лучше его прочитают.
Для Google рекомендуется не перекрывать 30 или 35 символов в заголовке.
Meta Тег Description является одним из наиболее важных для веб-сайта.
Для вас просто необходимо показать поисковым системам, таким как Google, как индексировать и как описывать свой веб-сайт. Итак, тег Meta Description должен содержать описание вашей веб-страницы.
Например, если вы говорите о своей собаке, у вас должно быть краткое описание вашей собаки. Как в примере кода ниже:
<meta name="description" content="Веб-страница о Борисе, собаке!">
Но помните, мета-описание не может быть таким длинным. Затем он должен быть ограничен 150 или 160 символами.
Итак, давайте посмотрим, как ведет себя описание метатега в Google. Например, на следующем изображении вы можете увидеть результаты поиска Google.
Синяя часть – это тег заголовка, содержимое тега заголовка. Ниже мы видим описание, которое является метаописанием. Если кто-то просто поместит описание более 150 символов, вы увидите в конце трехточечное.
Допустим, у вас нет мета-описания. В этом случае Google просто извлечет содержимое вашей веб-страницы и поместит его описание в результаты поиска.
Но на самом деле это не очень хорошо, поскольку Google отдает приоритет страницам с правильно установленными метаописаниями.
Имея правильное и точное метаописание, вы просто сообщаете Google или поисковым системам, что ваша страница соответствует тому ключевому слову, которое вы ищете. Другими словами, отличное мета-описание сильно влияет на ваше SEO. А сайты с отличным SEO привлекают много посетителей.
Чтобы проверить свой метатег, мы можем порекомендовать Firefox. Это отличный браузер с отличным управлением метатегами.
Итак, теперь давайте использовать браузер Firefox. Он лучше контролирует метатеги.
Прежде всего, мы должны иметь в виду, что метатеги скрыты, но есть способ их проверить.
В браузере Firefox вы можете щелкнуть правой кнопкой мыши. После этого нажмите «просмотреть информацию о странице».
Итак, теперь, используя тот же образец видео, вы можете видеть, что там ничего не отображается. Это потому, что эта страница в настоящее время имеет только заголовок, который на самом деле не является метатегом. Это часть метатега, но не стандартный метатег. Так что здесь будет пустое место.
Но если вы сделаете первый тег: метатег описания, вы увидите, как выглядит метатег.
Сначала вы можете увидеть атрибут name, в который вы можете поместить имя метатега, в данном случае метатег description. А затем вы можете увидеть содержимое, которое является содержимым метатега.
Каждый метатег должен иметь эти два атрибута: имя и содержимое.
Теперь давайте посмотрим на метатег ключевые слова. С помощью мета-ключевых слов мы сообщаем поисковым системам, о каких ключевых словах эта страница.
Помните, что «ключевые слова» употребляются во множественном числе. Таким образом, ключевые слова метатега выглядят точно так же, как и описание. У нас должны быть атрибуты name и content. Как в примере ниже:
<meta name="keywords" content="">
В атрибуте содержимого мы должны поместить ключевое слово через запятую.
В нашем примере ниже у нас есть имя «ключевые слова», всегда во множественном числе. И содержание: «собака», «Борис», так зовут собаку, «Йоркшир», «Домашние животные».
<meta name="keywords" content="собака, Борис, Йоркшир, Домашние животные">
В метатеге ключевых слов мы рекомендуем использовать не более десяти ключевых слов. Это важный способ сообщить поисковым системам, о каких ключевых словах относится ваша страница. Таким образом, вы можете использовать что угодно под десятью ключевыми словами, можно использовать одно, два, три, это не проблема.
Прежде чем мы поговорим о метатеге robots, давайте разберемся с роботами поисковых систем. Роботы – это большой сервер, который посещает и сканирует каждую страницу в Интернете. Это называется «индексацией». Он копирует содержимое, текстовое содержимое страницы. Он копирует изображения, а также метатеги. Ваш заголовок, описание и другие метатеги.
Таким образом, в метатеге robots вы можете разрешить поисковым системам индексировать эту страницу или нет.
Есть много веб-страниц с важной информацией, частной информацией, которую вы просто не хотите, чтобы роботы, поисковые системы, индексировали.
Таким образом, с помощью этого метатега вы можете просто запретить или заблокировать их, не позволяя им выполнять поиск и индексировать ваш контент в Интернете.
Итак, в примере кода ниже вы можете увидеть, как выглядит метатег «robots».
<meta name="robots" content="index, follow">
В приведенном выше примере это образец метатега robots с индексом содержания и последующим. Используя запятую индекса содержания, вы говорите с поисковой системой: «пожалуйста, проиндексируйте нашу страницу и, пожалуйста, следуйте нашим ссылкам». В этом метатеге есть еще несколько вариантов, которые вы можете использовать. Использование index и follow – это рекомендуемая конфигурация для тех, кто хочет, чтобы ваш сайт был проиндексирован.
Допустим, у вас есть страница с личной информацией, и вы не хотите, чтобы она отображалась в поисковых системах. Итак, если вы не хотите, чтобы ваш сайт индексировался, вы должны просто изменить метатег на noindex.
<meta name="robots" content="noindex, nofollow">
Используя атрибут noindex, вы просто общаетесь с поисковыми системами, пожалуйста, не индексируйте мою веб-страницу. Мы не хотим, чтобы эта страница отображалась в Google.
Если бы у вас была одна или несколько ссылок, Google перешел бы по этим ссылкам. Он ползет по всем этим ссылкам.
Вы можете просто указать nofollow, чтобы сообщить Google: не переходите по ссылкам на этой веб-странице, даже если ссылки внутренние, на тот же веб-сайт или даже если ссылки внешние, на другие веб-сайты.
Поэтому мы рекомендуем всегда использовать index и следовать стандартной конфигурации, чтобы ваш сайт был проиндексирован Google.
Окно просмотра мета – тег будет настроить свой веб – сайт для мобильных телефонов. Он известен как Responsive Meta Tag, потому что с его помощью вы можете активировать адаптивный макет на своей веб-странице.
В приведенном ниже примере веб-страница является веб-страницей по умолчанию без каких-либо изменений без метатега области просмотра.
Но если мы просто создадим метатег, вы увидите разницу.
Итак, метатег области просмотра состоит из двух элементов. В первую очередь ширина и начальный масштаб. Мы должны использовать ширину как «ширину устройства», как в примере, и начальный масштаб равен 1.0. Как код ниже:
<meta name="viewport" content="width=device-width, initial-scale=1">
В Firefox, а также в Google Chrome и некоторых других браузерах есть способ имитации мобильного телефона. В Firefox и Chrome вы можете нажать ctrl + shift + i, чтобы увидеть эти параметры. Таким образом, вы можете видеть веб-страницу точно так же, как на мобильном телефоне или в другом размере.
Теперь в мобильном симуляторе мы можем просто выбрать модель мобильного. В приведенном ниже примере мы будем тестировать мобильный телефон iPhone X.
Например, попробуйте изменить начальную шкалу с одного на два. Сохраните страницу и перезагрузите ее, нажав F5.
После этого, как вы можете видеть на изображении, страница будет увеличена в большом масштабе. По умолчанию лучшая конфигурация – 1.0.
Теперь, если вы удалите этот метатег, вы увидите, как на изображении ниже, как он будет выглядеть без метатега области просмотра.
Как видите, метатег области просмотра очень важен, чтобы ваш сайт хорошо отображался на мобильных устройствах.
Тег обновления мета может использоваться в основном по двум причинам. Первый – время от времени обновлять вашу веб-страницу, а второй – выполнять перенаправление на другую страницу.
В приведенном ниже коде вы можете увидеть, как это выглядит.
<meta http-Equiv="refresh" content="2">
Как видите, этот тег немного отличается от других. Итак, в этом метатеге мы использовали «http-Equiv» вместо «name». Http-Equiv означает имитацию заголовка ответа на стороне сервера. Это стандарт для мета-тегов мета-обновления и мета-контента.
Итак, если вы используете метатег обновления с содержимым «2», это означает, что страница будет автоматически перезагружаться каждые две секунды. Если вы установите здесь, скажем, «20», страница будет перезагружаться каждые 20 секунд, а не 2.
Еще одна важная конфигурация этого метатега – размещение URL-адреса. Итак, попробуйте установить время обновления 20 секунд и URL, равный «https://andreyex.ru».
<мета http-Equiv="refresh" content="20; URL: https://andreyex.ru">
Если вы это сделаете, это означает, что через 20 секунд страница перезагрузится на этот набор URL. Если хотите, можете попробовать с другим количеством секунд.
Теперь мы узнали, как настраиваются метатеги на веб-сайте. С этим контентом вы можете сделать свою HTML-страницу с наиболее важным метатегом.
Если у вас есть вопросы, напишите нам, оставьте комментарий своим вопросом.
(1 оценок, среднее: 5,00 из 5)
Загрузка...
