Guest
Всем привет😘👋 Не забываем ставить 👍 и подписываемся на канал 🛎 — впереди много интересного🔥🥳 С вами Наталья Чистякова, 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 #вёрсткасайта
