Как корректно, с учётом 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 просмотр
987
295
1 месяц назад 00:35:24 1
Как правильно выбирать косметику?
1 месяц назад 00:24:30 1
Жимба Данзанов: Ешь, как монах! Тибетская система правильного питания
1 месяц назад 00:15:39 1
ПРОГОНЯЕМ КЛЕЩА С НАШИХ РАСТЕНИЙ! ЭТИ СРЕДСТВА ТОЧНО ПОМОГУТ!
1 месяц назад 00:55:44 1
Что такое энергетическая конституция? И как правильно болеть?
1 месяц назад 00:09:13 1
Как правильно приготовиться к Причастию и причаститься с ПОЛЬЗОЙ для души? Свящ. Валерий Сосковец
1 месяц назад 00:59:26 1
“Правильный“ кофе! Секрет приготовления эспрессо. Как узнать, ЧТО вам приготовили???
1 месяц назад 00:00:36 1
Вы знаете какой правильный ответ ?
1 месяц назад 00:05:26 1
Как правильно подключить ДХО, диодные ленты, диоды на автомобиле.
1 месяц назад 00:01:31 1
Алина Витухновская - Правильный тиран
1 месяц назад 00:04:01 1
Настройки Telegram-бота
1 месяц назад 00:14:31 1
Адвентисты или Свидетели Иеговы? Какая церковь правильная?
1 месяц назад 00:31:04 1
ВРЕД от Рэйки. Когда практика Рейки несёт опасность. Предупреждение. Правильная Инициация Рейки 1
1 месяц назад 00:10:10 1
Без нее невозможен прогресс. Как делать правильно.
1 месяц назад 00:15:31 1
Как правильно посадить кактус ? Кактус уход.
1 месяц назад 00:14:40 1
ХОРОШИЙ или ПЛОХОЙ холестерин: как питаться правильно? Как снизить ВЫСОКИЙ холестерин БЕЗ ТАБЛЕТОК?
1 месяц назад 01:25:08 1
Философия смерти. Как жить эту жизнь правильно. Доктор наук Андрей Макаров
1 месяц назад 00:00:24 1
Работа по сменам, как правильно отдыхать? #hr #кадры #трудовоеправо
1 месяц назад 01:18:00 1
Как правильно СПОРИТЬ С МУЖЕМ. Жены священников раскрывают секреты (Зайцева, Мошура, Волкова)
1 месяц назад 00:01:00 1
СПОРИМ ТЫ НЕ ЗНАЛ?! | КАК УБРАТЬ ЛЮБЫЕ ЦАРАПИНЫ | ТАКОГО ТЫ ТОЧНО НЕ ЗНАЛ
1 месяц назад 00:16:27 1
Самый правильный способ прививки за кору. СМОЖЕТ КАЖДЫЙ САДОВОД!
1 месяц назад 00:07:32 1
Как точно отличить ОРИГИНАЛЬНЫЕ CONVERSE от подделки?!
1 месяц назад 01:15:30 1
Очень хороший и добрый фильм вам точно понравится | Приключения | Фильм | Хадсон
1 месяц назад 00:13:25 5
Как ПРАВИЛЬНО продавать песни! Пошаговый план.
1 месяц назад 00:16:24 1
Вкусный домашний холодец без секретов! Как правильно сварить прозрачный холодец