Браузер мета: — HTML

Posted:

Июл 1, 2023

Comments:

Браузер мета: — HTML — Дока

— HTML — Дока

Кратко

Скопировано

В теге <meta> хранится краткое описание страницы, ключевые слова и другие данные, которые могут понадобиться браузерам и поисковым системам.

Таких метатегов может быть любое количество. Все они размещаются внутри тега <head>, желательно в самом начале.

Пример

Скопировано

<head>  <meta name="description" content="Краткое описание страницы">  <meta    name="keywords"    content="ключевое слово 1, ключевое слово 2, ключевое слово 3"  >  <meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
          <head>
  <meta name="description" content="Краткое описание страницы">
  <meta
    name="keywords"
    content="ключевое слово 1, ключевое слово 2, ключевое слово 3"
  >
  <meta name="viewport" content="width=device-width, initial-scale=1. 0">
</head>

Как понять

Скопировано

Теги <meta> содержат полезную для поисковиков и браузеров информацию. Информация в метатегах называется метаданными. Пользователь не видит их содержимое на странице.

Метатеги различаются набором атрибутов и их значений. Один тег содержит одно сообщение: например, описание страницы <meta name="description">, ключевые слова <meta name="keywords" content="...">, кодировку страницы <meta charset="UTF-8"> или другие метаданные.

Мы рекомендуем вставить как минимум метатеги description, viewport, charset. Они помогут оптимизировать сайт для браузера пользователя и поисковых систем.

В <meta> прописывается информация, которую нельзя указать в <base>, <link>, <script>, <style> или <title>.

Как пишется

Скопировано

Метатег, который задаёт кодировку страницы, не отличается по структуре от обычных:

<meta charset="...">
          <meta charset="...">

Остальные метатеги содержат атрибуты name или http-equiv, которые используются в паре с атрибутом content:

<meta name="..." content="..."><meta http-equiv="..." content="...">
          <meta name="..." content="...">
<meta http-equiv="..." content="...">

Первый атрибут задаёт параметр, который мы меняем, а второй — значение. Вот как будет выглядеть метатег, в котором прописываются ключевые слова на странице:

<meta  name="keywords"  content="ключевое слово 1, ключевое слово 2, ключевое слово 3">
          <meta
  name="keywords"
  content="ключевое слово 1, ключевое слово 2, ключевое слово 3"
>

Атрибуты

Скопировано

charset — задаёт кодировку страницы. Мы рекомендуем писать здесь UTF-8 — это самый распространённый вариант.

<meta charset="UTF-8">
          <meta charset="UTF-8">

http-equiv — атрибут, который может изменять поведение страницы или серверов. Используется в паре с content. У него есть несколько значений:
- "default-style" — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента <link>, который связан с таблицей CSS-стилей, или заголовок элемента <style>, который содержит таблицу CSS-стилей.
- "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.

<meta http-equiv="refresh" content="3">
          <meta http-equiv="refresh" content="3">

name — имя мета-тега, которое также определяет его значение. Используется в паре с content. Можно задать следующие значения:
- "keywords" — ключевые слова, которые помогают поисковикам находить страницу в интернете. По сути, это самые важные слова из содержания страницы.

<meta name="keywords" content="Рецепт, печенье, готовим дома">
          <meta name="keywords" content="Рецепт, печенье, готовим дома">

"viewport" — задаёт параметры окна просмотра в браузере. Страницу можно сделать адаптивной, подогнав ширину окна под размеры устройства. В примере ниже width указывает ширину окна просмотра, а initial-scale — коэффициент масштабирования страницы при первом открытии:

<meta  name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
          <meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=2. 0, user-scalable=yes"
>

"description" — краткое описание страницы, которое видит пользователь, когда находит сайт в поисковике. Например: «Рассказываем, как нарезать картошку тонкими ломтиками» для сайта о кулинарии. Это описание помогает поисковикам найти страницу, а пользователю — узнать, о чём она. Так что не забывайте указывать "description".

<meta  name="description"  content="Рассказываем, как нарезать картошку тонкими ломтиками">
          <meta
  name="description"
  content="Рассказываем, как нарезать картошку тонкими ломтиками"
>

"author" — имя автора страницы.

<meta name="author" content="Иван Петров">
          <meta name="author" content="Иван Петров">

content — основное содержимое метатега, которое используется только с http-equiv и name.

Подсказки

Скопировано

💡 Чтобы избежать ошибок кодировки, необходимо уместить метатег с атрибутом charset в первых 1024 байтах документа. Для этого старайтесь указывать его в самом начале тега <head>.

💡 Атрибуты http-equiv и name выполняют похожие функции, поэтому их нельзя использовать одновременно.

💡 С помощью атрибута http-equiv="refresh" можно сделать так, чтобы страница отправляла пользователя на другую страницу через определённое количество секунд. Например, отправим пользователя на главную Яндекса через 15 секунд:

<meta http-equiv="refresh" content="15;url=https://www.yandex.ru">
          <meta http-equiv="refresh" content="15;url=https://www.yandex.ru">

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 В <meta>, помимо стандартных метаданных, передаются всякие специальные. Например, есть такой браузер, как Safari: он очень любит подстраивать номера телефонов в какой-то удобный для себя вид. Чтобы отключить это своеволие, нужен отдельный метатег:

<meta name="format-detection" content="telephone=no">
          <meta name="format-detection" content="telephone=no">

🛠 С помощью метатегов можно задавать поведение мобильной версии сайта. Например, можно прописать, на сколько на мобайле можно увеличить масштаб и насколько уменьшить относительно стандарта.

🛠 Через метатеги задаётся и Open Graph-разметка: заголовок, картинка и описание для репоста в соцсетях.

Алёна Батицкая советует

Скопировано

🛠 Если не задать описание для страницы при помощи <meta name="description" content="...">, то поисковые системы при добавлении сайта в свою базу возьмут первый попавшийся текст со страницы и составят из него так называемый сниппет — текст под заголовком сайта в поисковой выдаче.

Если хочется контролировать, что именно увидит пользователь в поиске — всегда заполняйте description.

🛠 Есть отдельная категория метаразметки — OG-разметка. OG расшифровывается как open graph. Такая разметка нужна для того, чтобы при вставке ссылки на ваш сайт в соцсетях в превью отображалась красивая карточка.

Стандартный набор метатегов для красивой карточки в Facebook:

<meta property="og:title" content="Лучший сайт в интернете"><meta  property="og:description"  content="Посетите лучший сайт в интернете и познайте тщетность бытия"><meta property="og:image" content="http://best-site/thumbnail.jpg"><meta property="og:url" content="http://best-site/index.htm">
          <meta property="og:title" content="Лучший сайт в интернете">
<meta
  property="og:description"
  content="Посетите лучший сайт в интернете и познайте тщетность бытия"
>
<meta property="og:image" content="http://best-site/thumbnail.jpg">
<meta property="og:url" content="http://best-site/index. htm">

Большинство соцсетей используют информацию, указанную в тегах из примера выше, для генерации превью ссылок.

Как правильно оптимизировать мета-теги для сайта

#Оптимизация сайта
#Мета-теги

#90

Ноябрь’18

Мета теги — это специальные HTML-теги, расположенные в теге <head> страницы. Они предоставляют структурированные метаданные о веб-странице и рассчитаны для браузеров и роботов.

Какие мета-теги важны для SEO

Существует множество мета-тегов, но для оптимизации сайта важное значение имеют следующие:

<meta name=»description»> — предназначен для краткого описания документа. Содержание данного тега часто выводится в результатах поиска Google. Яндекс в свою очередь сообщает, что также может использовать его в сниппетах, а некачественное содержание (например, переспам ключевыми словами или описание, не соответствующее контенту страницы) может стать причиной удаления страницы из результатов поиска. Поэтому важно знать, как правильно заполнять description.

<meta name=»keywords»> — содержит ключевые слова. Google не учитывает содержание данного тега, однако Яндекс в своей справке сообщает, что может его учитывать при ранжировании.

<meta name=»robots»> — сообщает поисковым роботам правила индексации страницы. Для данного тега важно знать значение следующих атрибутов: noindex/index — указание роботу интексировать/неиндексировать данную страницу; nofollow/follow — не переходить/переходить по ссылкам на странице. Подробнее о способах закрытия сайта от индексации.

<meta name=»viewport»> — используется для указания браузеру информации о том, как открывать страницу на мобильном устройстве. Наличие данного тега является одним из условий оптимизации для мобильных устройств.

title — его содержание используется в качестве названия страницы в окне браузера и заголовка сниппета в результатах поиска. С технической точки зрения title не относится к мета-тегам, но он имеет аналогичный принцип работы и важное значение в определении релевантности страницы.

Как правильно составлять мета-теги

Когда говорят об оптимизации мета-тегов, чаще всего подразумевается правильное заполнение title, description и keywords, так как они учитываются в определении релевантности документа и вносят вклад в ранжирование.

С подробными рекомендациями по написанию мета-тегов вы можете ознакомиться в статьях:

правила заполнения title;

правила заполнения description;

правила заполнения keywords.

Похожее

Оптимизация сайта
Мета-теги

Проверка мета-тегов

Оптимизация сайта
Мета-теги

Как заполнять мета-тег description

Оптимизация сайта
Мета-теги

#91

Проверка мета-тегов

Ноябрь’18

27354

Оптимизация сайта
Мета-теги

#49

Как заполнять мета-тег description

Ноябрь’17

5283

Оптимизация сайта
Мета-теги

#48

Как заполнять мета-тег keywords

Ноябрь’17

7596

Оптимизация сайта
Мета-теги

#39

Тег title: как заполнять и в чем отличия

Ноябрь’17

6459

Issues · OSSystems/meta-browser · GitHub

Новый выпуск

Есть вопрос по этому проекту? Зарегистрируйте бесплатную учетную запись GitHub, чтобы открыть задачу и связаться с ее сопровождающими и сообществом.

Зарегистрируйтесь на GitHub

Нажимая «Зарегистрироваться на GitHub», вы соглашаетесь с нашими условиями обслуживания и
Заявление о конфиденциальности. Время от времени мы будем отправлять вам электронные письма, связанные с учетной записью.

Уже на GitHub?
Войти
на ваш счет

хром: обновление до 112.0.5615.49

#704
открыт 5 апр. 2023 г. автором
Макс Иленфельдт

[Запрос функции] поддержка widevine на aarch64

#702
открыт 12 марта 2023 г. автором
redfast00

Аппаратное ускорение на stm32mp1

#699
открыт 7 марта 2023 г. автором
седлалу2

firefox на riscv

#689
открыт 24 января 2023 г. автором
kush930

Проблема с Firefox и DISPLAY

#686
открыт 21 декабря 2022 г. автором
JovanBosic

Невозможно добавить пакет chromium-ozone-wayland в версию Krikstone

#684
открыт 7 декабря 2022 г. автором
Ravikasyap

Проверка орфографии активирована по умолчанию

#681
открыт 24 ноября 2022 г. автором
выключение-ч-сейчас

хром x11 105.0.5195.102 не может быть запущен на stm32

#671
открыт 25 октября 2022 г. автором
нандра

firefox 102.3.0esr

#667
открыт 7 октября 2022 г. автором
bmx666

Ошибки сборки Chromium Cross Compilation — meta-clang и gn-native

#665
открыт 22 сентября 2022 г. автором
виджайнкамбл86

Chromium VAAPI в wayland и драйвер Intel не работает

#661
открыт 2 сентября 2022 г. автором
gustavqmatic

третья сторона/swiftshader/include/vulkan/vulkan.h:41:10: фатальная ошибка: файл «wayland-client.h» не найден

#659
открыт 31 августа 2022 г. автором
rwmacleod

chromium-ozone-wayland: оценить, нужно ли читать 0001-ozone-add-va-api-support-to-wayland.patch

#657
открыт 26 августа 2022 г. автором
ракуко

Поддержка минидампа хрома

#655
открыт 26 августа 2022 г. автором
N1ckx

arm 32bit: сбой настройки

#652
открыт 23 августа 2022 г. автором
MastaG

Без ответвления Киркстоун для Firefox

#651
открыт 11 августа 2022 г. автором
dimonic

Readme говорит, что мне нужна мета-ржавчина, но для киркстоуна нет слоя ржавчины
ошибка

#650
открыт 11 августа 2022 г. автором
димонический

хром 103 не собирается для imx8qm

#649
открыт 3 августа 2022 г. автором
Амбриса

хром-озон-wayland 101 выпуск SVG

#647
открыт 20 июля 2022 г. автором
ambrice

chromium-ozone-wayland не обнаруживает указатель с сенсорным экраном

#645
открыт 19 июля 2022 г. автором
apbr

Сообщение драйвера EGL (ошибка) eglCreateContext: dri2_create_context

#644
открыт 27 июня 2022 г. автором
MastaG

Недостаточно памяти: убить процесс 1750 (хром-бункер) 595 очков или пожертвовать ребенком

#643
открыт 14 июня 2022 г. автором
TejasAbhang4042

chromium-ozone-wayland: не удалось запустить Chromium 101.0.4951.54 на raspberrypi4-64

#642
открыт 6 июня 2022 г. автором
Санчо

хром: VAAPI не работает под влиянием/путешествием с графическими процессорами AMD

#641
открыт 30 мая 2022 г.
jstkdng

Как добавить хром или firefox в yocto dunfell

#640
открыт 25 мая 2022 г.
Эдуардокорралмуноз

Совет!
Обновлено за последние три дня: обновлено:>2023-04-25.

Как начать работу с браузером Meta’s Quest

Firefox Reality когда-то был стандартным иммерсивным веб-браузером, особенно на автономных гарнитурах, включая более ранние модели Oculus. Однако веб-браузер был удален Mozilla. С тех пор Meta разработала собственный иммерсивный веб-браузер для использования в своих гарнитурах Quest.

Большинство функций работают очень похоже на браузеры, к которым вы привыкли на настольных и мобильных устройствах. И многие функции говорят вам, что они из себя представляют, когда вы указываете на них с помощью контроллера. Однако из-за того, что они предназначены для виртуальной реальности (VR), некоторые функции немного сложно найти, если вы не знаете, что они из себя представляют.

Открытие браузера Quest

Из дома выберите значок сетки на панели инструментов, чтобы открыть список загруженных приложений. Браузер Meta Quest установлен по умолчанию, поэтому он готов к использованию, даже если вы впервые надеваете гарнитуру.

Расположение плитки в сетке вашего приложения может различаться, но плитка браузера Meta Quest светло-фиолетового цвета с контуром окруженной кольцами планеты. Когда вы указываете на него своим контроллером, имя должно появиться на плитке. Нажмите на спусковой крючок, чтобы открыть его.

Перемещение окна браузера

Сначала окно браузера закрепляется в верхней части панели инструментов. Если вы хотите передвигаться, измените свое положение, а затем удерживайте обе кнопки с логотипом Oculus (или кнопки с логотипом Meta, в зависимости от того, насколько новой является ваша гарнитура), и панель инструментов и окно браузера переместятся в ваш новый центр.

Однако вы также можете отсоединить окно браузера от панели инструментов. Для этого наведите контроллер на белую линию между окном браузера и панелью инструментов, нажмите на курок и отодвиньте окно браузера от панели инструментов.

Вы можете переместить экран браузера прямо вверх или в сторону. Вы также можете отодвинуть окно браузера еще дальше назад, оттолкнув его от себя, удерживая белую полосу.

Изменение размера окна браузера

Когда окно браузера перемещается от вас, оно приобретает красивый изогнутый вид, который может быть более удобным для некоторых приложений. Это особенно верно, когда вы увеличиваете экран.

Когда окно браузера отделено от панели инструментов, по углам появляются белые скобки. Выберите любую из этих скобок и перетащите ее к центру окна браузера, чтобы уменьшить ее, или перетащите ее от центра окна браузера, чтобы расширить ее.

Найдите подходящий размер. Окно браузера имеет максимальный размер, но этот максимальный размер настолько велик, что вы не можете видеть весь экран, не двигая головой.

Это удобно для погружения в 2D-контент через гарнитуру. Но помните, иммерсивные веб-приложения, такие как 360 видео, обычно имеют специальную кнопку VR, которая переносит вас в сцену, а не смотрит в окно.

Другие команды выбора

Есть несколько других уникальных команд, которые вы можете выполнять в браузере Meta Quest. Они всегда находятся в одном и том же месте, независимо от того, где находится окно вашего браузера в вашем полном представлении, и независимо от того, насколько оно велико.

Значок микрофона справа от строки поиска предназначен для включения голосового ввода.

This entry was posted in Популярное

Posted:

Comments: