SEO и доступность: технический SEO [Series Part 3]

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

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

Транскрипция видео

Привет, поклонники Moz. Добро пожаловать в последний выпуск Whiteboard Friday. Я Купер Холлмайер. Я занимаюсь поисковой оптимизацией с 2016 года, а сегодня работаю в крупном розничном магазине наружной рекламы, помогая воплотить в жизнь нашу техническую стратегию SEO. Большое спасибо за участие в этой серии статей о SEO и доступности.

Я надеюсь, что вы получили широкую перспективу и новые советы и приемы по созданию контента, который не только находит отклик у вашей аудитории, хорошо работает в поиске, но и доступен большему количеству людей. Сегодня мы поговорим о техническом SEO и доступности.

Техническое SEO и доступность

Давайте погрузимся в подробности. В прошлый раз мы говорили о рекомендациях по обеспечению доступности веб-контента, и вы, возможно, помните, что четыре принципа WCAG — понятные, работоспособные, понятные и надежные.

Воспринимаемый

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

Часто, когда мы проходим рекомендации по SEO или аудит SEO, я слышу много общих тем, например, тег заголовка встроен в изображение и поэтому поисковая система не может его видеть, или контент, который я ‘ m видно ботам, но не видно людям. Это проблемы с восприятием базового уровня. Я хочу, чтобы вы приняли это мышление и подумали, примените ли вы это также ко всей своей аудитории. Могут ли все ваши люди, которые надеются воспользоваться вашим сервисом, продуктом или опытом, воспринять все то, что вы предлагаете, на базовом уровне?

1. Стили

 Изображение рукописного списка изменений стиля, включая собственный текст, отсутствие добавления ключевых слов и цветовой контраст.

Некоторые вещи, о которых вы, возможно, думаете, будут похожи на то, что вы увидите в этом аудите, например: Все ли из мой текст на странице виден? Это активный текст? Является ли он встроенным в страницу, поэтому могу ли я выбрать его, скопировать и вставить, или он встроен в изображение и недоступен для вспомогательных технологий, браузеров или чего-то еще? Вы также можете подумать: контрастирует ли цвет с моим фоном и моим текстом, это правильный контраст?

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

2. Rich media

 Изображение рукописного списка улучшений мультимедиа.

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

Также наименование вещей понятными для человека именами по сравнению с «DSC1352.JPEG» поможет поисковым системам, а также вспомогательным технологиям увидеть это изображение и понять, что это такое. Контекст страницы, также важно, чтобы вы размещали изображения на страницах, которые добавляют ценность. Вы хотите просветить пользователя дополнительным контентом, чтобы дать ему немного больше ощущений или дать им больше контекста о том, о чем вы говорите. Добавляйте изображения для ценности, а не только для отображения в поиске изображений Google.

А как насчет видео? Так что видео немного другое. Видео содержит серию движущихся изображений. Поэтому каждый раз, когда я думаю о движении, я думаю: «Как я могу убедиться, что если пользователь хочет остановить это движение, он сможет?»

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

Затем убедитесь, что они различимы. То же самое между видео и аудио. Мы хотим убедиться, что передний план и задний план легко отличимы друг от друга. Если ваше видео кажется мутным, если ваш звук мутный, и мне нужно напрягать ухо или глаза, чтобы увидеть этот контент и понять, что происходит, вам нужно быть немного более четким, немного более четким на эти два различия.

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

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

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

3. Структура страницы

 Фотография нарисованных от руки изображений, сравнивающих различные структуры страниц.

Три и четыре относятся к структуре страницы и семантическому HTML. Так что это немного меньше о том, воспринимаемо ли это и отчасти ли это понятно.

Это своего рода выпас понятного, но это также должно быть немного о восприятии. Как вы понимаете, наличие группы H1 на странице может показаться поисковой системе очень запутанной, не так ли? Они такие, хорошо, на этой странице куча H1. Я не совсем уверен, о чем эта страница. Добавление структуры и каскадных заголовков для обозначения родительско-дочерних отношений поможет вашему контенту стать немного более восприимчивым. Будет легче понять, что происходит.

4. Семантический HTML

То же самое и с семантическим HTML. Мы склонны помещать в наш HTML-код много div-ов, интервалов и неидентифицируемых элементов. Но помечая их более подходящими способами, чтобы мы понимали их значение, понимали, что содержат эти теги, будь то навигация, формы или таблицы, предоставление этого дополнительного уровня информации и понятности позволит поисковым системам и вспомогательным технологиям чтобы иметь возможность анализировать эти вещи, чтобы позволить им воспринимать вещи, которые вы размещаете на своей странице, которые отличаются друг от друга и обеспечивают более богатый опыт.

Работоспособен

Итак, мы можем воспринимать контент. Но как убедиться в его работоспособности?

1. Карты сайта в формате HTML

 Фотография примера нарисованной вручную карты сайта в формате HTML.

Несколько рекомендаций по поисковой оптимизации, которые я часто вижу, люди делают: создают карту сайта в формате HTML и помещают на вашу страницу хлебные крошки. Часто это может вас отпугнуть. Мы знаем, что карта сайта HTML очень важна для SEO, для обнаружения этих страниц в глубине иерархии нашего веб-сайта.

Мы знаем, что хлебные крошки также не менее важны для обнаружения. Оба эти элемента помогают пользователям со вспомогательными технологиями лучше ориентироваться на веб-сайте. Карта сайта HTML учитывает ситуации, когда ваше меню не включает все страницы вашего веб-сайта, если оно сбивает с толку, или вы используете JavaScript или другую технологию, недоступную для моего технического стека.

2. Панировочные сухари

 Фотография примера нарисованных от руки хлебных крошек.

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

3. Разработайте сначала клавиатуру

 Фотография нарисованного вручную компьютера и клавиатуры.

Затем, не связанное с SEO, но тем не менее важное и связанное с ним, сначала разработайте свой веб-сайт и познакомьтесь с клавиатурой. Не у всех есть мышь или возможность использовать мышь из-за нарушения движений, нарушения или из-за отсутствия технологий или оборудования. Так что сначала убедитесь, что вы разработали клавиатуру, и вы собираетесь как бы инкапсулировать больше тех людей, которых вы хотите заключить в свою аудиторию.

Понятно

1. Язык

 Фотография рукописного HTML-кода с указанием LANG =

Понятно. Итак, в международном SEO, когда мы имеем дело с разными странами и разными языками, мы говорим о том, насколько важно использовать HTML на нашей странице для обозначения языка страницы. Это помогает поисковым системам предоставлять правильные результаты в нужном, может быть, национальном или международном контексте. Это также помогает программам чтения с экрана читать ваш контент вслух на нужном языке.

2. Навигационный макет

 Фото примеров веб-страниц, нарисованных от руки.

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

3. Межстраничные объявления

 Фотография нарисованной вручную страницы с

межстраничными объявлениями, никому не нравятся эти всплывающие окна на нашем лице, которые не позволяют нам просматривать остальную часть веб-сайта. Google их тоже не любит. Но особенно для людей со вспомогательными технологиями, если мы не будем правильно обрабатывать эти всплывающие окна, мы окажемся в ситуации, когда пользователи могут оказаться в ловушке клавиатуры и не смогут выбраться из межстраничного объявления. , или они не понимают, что на странице даже размещено межстраничное объявление. Поэтому важно проявлять осторожность при использовании межстраничных объявлений.

Надежный

И последнее, но не менее важное: надежность. Как убедиться, что контент, который мы размещаем на странице, совместим с большим количеством устройств и сценариев?

1. Проверка

 Фотография нарисованного вручную примера проверки JSON + LD.

Простое использование правильного HTML — отличный способ сделать это. Вы можете использовать валидатор и просматривать свой HTML, CSS и JSON-LD. Создавая правильный код, особенно когда вы используете семантический HTML, а также придаете значение этому коду, у вас будет намного лучший опыт, и все, что ваше построение, станет более удобоваримым.

2. Адаптивный

 Фотография нарисованного от руки изображения веб-страниц с изменением размера для мобильных, средних и больших экранов.

Адаптируется ли ваш веб-сайт? Вы уже должны это делать. Но если это не так, убедитесь, что он работает на мобильном устройстве, настольном компьютере и планшете, а макет остается прежним, просто возможно, его размер или изображение изменится по-другому.

3. Интерактивный

 Фотография нарисованной от руки веб-страницы со стрелками для обозначения различных доступных взаимодействий.

Убедитесь, что с ней можно взаимодействовать. Если пользователь хочет иметь возможность увеличивать масштаб, потому что у него нарушение зрения или он хочет иметь возможность изменять цвета, позволяет ли им это сделать ваша технология на вашем веб-сайте? Должно. Если вы сделаете эти три вещи снизу, я думаю, что это сделает много тяжелой работы, и вам придется делать гораздо меньше работы, потому что вы как бы встроили в структуру, фундамент, чтобы быть доступным .

Это технический SEO и доступность. Если у вас есть дополнительные вопросы или вам нужны инструменты для проверки, их можно найти справа здесь, или вы можете связаться со мной в Twitter @cooperhollmaier, чтобы получить дополнительные советы. Но большое вам спасибо за то, что вы слушали Whiteboard Friday и за доступность вместе с SEO. Я надеюсь, что вы примете это, и в будущем вы станете все более и более открытыми в том, как вы занимаетесь SEO.

Комментарии запрещены.