Всем привет😘👋 Не забываем ставить 👍 и подписываемся на канал 🛎 — впереди много интересного🔥🥳 С вами Наталья Чистякова, UX/UI Веб-дизайнер, в этом видео рассказываю о, как минимум, двух способах профессионального, техничного и экологичного🤌 размещения на сайте заголовка H1 в ситуации, когда он представлен несколькими текстовыми контейнерами🙌💫 : 02:05 — несколько слов о роли H1 05:20 — случаи необходимого скрытия текста при разработке 07:14 — список «неоптимальных» решений по размещению нашего фактурного H1 10:20 — предлагаемые способы → скрипт и wrapAll и паттерн visually-hidden 13:40 —краткий обзор Справок Яндекса и Гугл по «скрытому тексту» 17:22 — ответ Поддержки Яндекса + почему я применяю visually-hidden 20:34 — реализуем наши способы на Тильде и проверяем в SEO-расширениях 24:03 — проверка наших способов по внешних сервисах 27:23 — visually-hidden на сайте Apple.com 28:18 — подводим итог разговора Много пользы, профессионального и человеческого общения на любые темы ждёт вас в нашем чате Pro.дизайн 👉
— вливайтесь, предлагайте свою тему и становитесь гостем или экспертом Эфира в рамках чата и не только, делитесь своим опытом публичного выступления в записи😻🤘 Итак, как и было заявлено, выкладываю ссылки на ресурсы, о которых упоминаю в видео, а также скрипт и стиль, которым реализуются рассматриваемые способы✔️ 📌 Статья по доступному скрытию «Как прятать» от HTML Academy (см. в середине статьи) 👉
📌 Ещё статья о доступном скрытии и visually-hidden 👉
📌 Рекомендации Яндекса по оценке качества сайта (предложено ответом саппорта😉 👉
📌 Справка Яндекса по вопросам скрытия текста 👉
📌 Справка 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); } Если у вас есть вопросы лично ко мне: ► дизайн; ► типографика и композиция на сайте; ► анимация любого сценария и уровня сложности; ► подбор креативных идей; ► отправить свой проект на разбор; ► оформление документов для сайта (Политика конфиденциальности, Публичная оферта, РКН, согласие субъекта ПД); ► оформление отношений с заказчиками, разрешение спорных ситуаций, составление актов и претензий), — пишите в ЛС, разберёмся в любой ситуации🤝 Мой ТГ —
ВК —
https://vk.com/chistyakovan Инст (продукт Meta, в РФ признана экстремистской организацией) —
https://instagram.com / chistyakova.website DProfile —
Приятного и полезного просмотра👀🥡 #h1 #html #сайтынатильде #вебдизйнерчистякова #visuallyhidden #вёрсткасайта
