Как корректно, с учётом SEO, размещать на сайте H1, состоящий из нескольких текстовых контейнеров
Всем привет😘👋
Не забываем ставить 👍 и подписываемся на канал 🛎 — впереди много интересного🔥🥳
С вами Наталья Чистякова, UX/UI Веб-дизайнер, в этом видео рассказываю о, как минимум, двух способах профессионального, техничного и экологичного🤌 размещения на сайте заголовка H1 в ситуации, когда он представлен несколькими текстовыми контейнерами🙌💫
Много пользы, профессионального и человеческого общения на любые темы ждёт вас в нашем чате Pro.дизайн 👉 — вливайтесь, предлагайте свою тему и становитесь гостем или экспертом Эфира в рамках чата и не только, делитесь своим опытом публичного выступления в записи😻🤘
Итак, как и было заявлено, выкладываю ссылки на ресурсы, о которых упоминаю в видео, а также скрипт и стиль, которым реализуются рассматриваемые способы✔️
📌 Статья по доступному скрытию «Как прятать» от HTML Academy (см. в середине статьи) 👉
📌 Ещё статья о доступном скрытии и visually-hidden 👉
📌 Рекомендации Яндекса по оценке качества сайта (предложено ответом саппорта😉 👉 #view
📌 Справка Яндекса по вопросам скрытия текста 👉
📌 Справка Google по вопросам скрытия текста 👉
💻Расширения Хрома для проверки статуса SEO на сайте:
SEO Meta in 1Click 👉
SEO Tools 👉
🌐Сервис для проверки H1 онлайн бесплатно (их много, но например):
Majento👉
SiteAnalyzer 👉
🎯Собственно, способы:
Способ 1🍉 Присваиваем нашим текстовым контейнерам, которые должны по смыслу образовать заголовок H1, класс tegh1, размещаем следующий скрипт на странице и публикуемся ► проверяем наличие тега через любой из SEO-анализаторов (Seo Meta in 1 Click, SEO Tools и др., можно включая внешние сервисы)👌
/*не забудьте обернуть скрипт в теги script в начале и в конце кода*/
$(’.tegh1’).wrapAll(’[угловая скобка]h1[угловая скобка][угловая скобка]/h1[угловая скобка]’);
(Ютуб использовать угловую скобку не даёт — загуглите, как оформляется октрытый и закрытый тег✌)
Способ 2🍇 Создаём отдельный текстовый блок с H1 (не трогаем при этом наш фактурный заголовок), присваиваем ему класс visually-hidden и тег H1, публикуемся (никуда не убираем вновь созданный заголовок, и не убираем ему опасити) ► проверяем наличие тега через любой из SEO-анализаторов (Seo Meta in 1 Click, SEO Tools и др., можно включая внешние сервисы)👌
/*не забудьте обернуть код в теги style в начале и в конце кода*/
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
Можете использовать короткую версию паттерна:
.visually-hidden {
position: fixed;
transform: scale(0);
}
Если у вас есть вопросы лично ко мне:
► дизайн;
► типографика и композиция на сайте;
► анимация любого сценария и уровня сложности;
► подбор креативных идей;
► отправить свой проект на разбор;
► оформление документов для сайта (Политика конфиденциальности, Публичная оферта, РКН, согласие субъекта ПД);
► оформление отношений с заказчиками, разрешение спорных ситуаций, составление актов и претензий),
— пишите в ЛС, разберёмся в любой ситуации🤝
Мой ТГ —
ВК —
Инст (продукт Meta, в РФ признана экстремистской организацией) — /
DProfile —
Приятного и полезного просмотра👀🥡
#h1 #html #сайтынатильде #вебдизйнерчистякова #visuallyhidden #вёрсткасайта
1 view
1315
407
4 weeks ago 00:19:16 1
Правила точных решений. Метод Нельсона Манделы и медитация.
4 weeks ago 00:06:37 1
Это САМЫЙ важный день в году! / Как ПРОВЕСТИ день рождения правильно?
4 weeks ago 00:15:20 1
Используйте лосось правильно! Правила разделки, засолки рыбы и маринады от Шеф-повара из Японии
1 month ago 00:01:39 1
Универсальная швабра AQUAmatic MOP - как правильно использовать?
1 month ago 00:00:35 1
Складное ведро Green Fiber OPTIMA как правильно пользоваться?
2 months ago 00:54:24 1
Как правильно зарабатывать в SurfEarner от 50 000 ₽ в месяц
2 months ago 00:07:33 1
Как правильно загадывать желание в эту Вегу и время исполнения желаний
2 months ago 00:47:12 1
САМЫЙ ПРАВИЛЬНЫЙ ХОРРОР В МИРЕ | Voices of the Void
2 months ago 00:12:55 1
Как правильно использовать дрожжи (бига и пулиш)
2 months ago 00:14:01 2
Кому за 30 точно оценит /Решение проблем с болью в спине/
2 months ago 00:13:19 1
Как научиться правильно экономить и копить деньги - 33 совета накопить деньги и не тратить их
2 months ago 00:03:14 1
Микронаушники для сдачи экзаменов | как правильно использовать капсульный динамик
2 months ago 00:12:30 1
ПЕКУ ХЛЕБ РЖАНОЙ ТЕСТО НА ЗАКВАСКЕ/ТОЧНЫЙ РЕЦЕПТ НА ОДНУ БУХАНКУ/домашняя еда @obovsemsmarusya
2 months ago 00:02:51 1
Как и где правильно повесить найденную подкову
2 months ago 00:19:50 1
Когда заводить второго ребенка / Как растить двоих детей / Правильное родительство / Двое детей
2 months ago 00:00:35 1
Место, которое точно нужно посетить этой осенью / автор видео Роберта
2 months ago 00:28:32 1
БАТРАКОВ УНИЧТОЖАЕТ ЛИГУ | ВЫСТОЯЛИ В САНКТ-ПЕТЕРБУРГЕ | ГАЛАКТИОНОВ ВСЁ СДЕЛАЛ ПРАВИЛЬНО
2 months ago 00:02:24 1
Когда и как правильно сделать смену корма?
2 months ago 00:24:30 1
Жимба Данзанов: Ешь, как монах! Тибетская система правильного питания