<
  • Главная
Статьи

HTML5 jest doskonały dla dostępności i SEO

  1. Szybki Nagivation dla tego artykułu Potencjał HTML5 w zakresie SEO i dostępności Obsługa przeglądarki...
  2. SEO
  3. Dlaczego SEO śledzą HTML5?
  4. SEO Mit 1: Rankingi
  5. Zabawne fakty
  6. Zakłady na tagi
  7. Bogata treść
  8. Mit 2: HTML5 i wideo SEO (VSEO)
  9. Bogate fragmenty: mikrodane HTML5
  10. Mit 3: wielka debata h1
  11. Wniosek:
  12. Dostępność
  13. Korzystanie z semantycznego HTML poprawia dostępność
  14. Niepełnosprawność - kilka statystyk
  15. Normy i standardy
  16. 3 Szybkie testy dostępności, które możesz wykonać a11yproject.com w mniej niż 10 minut
  17. Wskazówki dotyczące testowania:
  18. HTML5 - Audio, wideo i dostępność
  19. Konkretne przykłady
  20. Element rysunku dla obrazów

Szybki Nagivation dla tego artykułu

Potencjał HTML5 w zakresie SEO i dostępności
Obsługa przeglądarki
Dlaczego SEO pilnuje HTML5
Mity SEO dotyczące HTML5
Dostępność
Normy
3 szybkie sprawdzanie dostępności
Formularze
Konkretne przykłady

Potencjał HTML5 widziany oczami specjalistów ds. SEO i dostępności

  • Ulepszony UX
  • Nowe tagi do klasyfikacji treści
  • Świetna alternatywa dla Flash i Silverlight
  • Mocno używany w aplikacjach i grach
  • Poprawione indeksowanie i indeksowanie
  • Ulepszone formularze
  • Używane w aplikacjach i grach

Aktualizacja obsługi przeglądarki dzięki HTML5accessibility.com

68/100   +   94,5 / 100   91/100   37/100 68/100 + 94,5 / 100 91/100 37/100 ?? / 100

SEO

Kiedy wątpię w Google. Więc jeśli Google SEO, otrzymasz następującą definicję:

Optymalizacja wyszukiwarek ( SEO ) to proces wpływający na widoczność strony internetowej lub strony internetowej w wynikach wyszukiwania „naturalnych” lub nieopłacanych („organicznych”) wyszukiwarki.

Istnieją 3 filary SEO: techniczne, treści, linki.

Dlaczego SEO śledzą HTML5?

  • Świetnie nadaje się do witryn multimedialnych
  • Nadmiar kodu może być kontrolowany
  • Pomaga zrozumieć treść
  • Pomaga uczynić Ajax przyjaznym dla SEO

Nie ma dowodów na to, że HTML5 wpływa na SEO, ale ma ogromny potencjał do zmiany sposobu indeksowania wyszukiwarek i zrozumienia treści.

SEO Mit 1: Rankingi

Wyszukiwarki nie podchodzą do wpływu HTML5 na rankingi wyszukiwarek. Jednak wyszukiwarki idą drogą semantyczną, więc elementy semantyczne ułatwiają robotom zrozumienie intencji każdego elementu.

Zabawne fakty

Eksperci SEO nienawidzą niczego więcej niż strony Flash. Ok, może nienawidzą strony paralaksy, która nie używa API historii.

  • Rich Media: świetna obsługa ALT dla elementów audio i wideo
  • Rozkwit kodu: możemy użyć prostszego dokumentu HTML z HTML5
  • Treść: znaczniki semantyczne pomagają robotom indeksującym uzyskać to, co robią bloki kodu na stronie
  • Ajax: zmiana adresu URL w pasku adresu bez odświeżania go za pomocą API historii

Zakłady na tagi

Oto niektóre znaczniki, które mogą okazać się kluczowe dla sukcesu SEO witryny

<article> dla niezależnego bloku treści.

< sekcja> dla podsekcji bloku treści.

< header>, aby określić nagłówek strony lub sekcję nagłówka samodzielnego bloku treści.

< footer> dla całego dokumentu HTML lub stopki <article>.

< nav > do nawigacji na stronie głównej, poprzednich / kolejnych linków do artykułów, stronicowania.

<na bok> dotyczy treści, ale nie jest częścią głównego dokumentu.

< video>, aby zapewnić kompatybilny z różnymi przeglądarkami sposób wyświetlania wideo.

Semantyczny HTML mówi głośniej niż tysiąc div. Znaczniki semantyczne przemawiają do oprogramowania, dzięki czemu webmasterzy mogą rozmawiać z wyszukiwarkami

Bogata treść

Audio: <audio> oznacza, że ​​ostatecznie nie będziemy już musieli polegać na wtyczkach innych firm w celu renderowania dźwięku.

Image: <figure> i <figurecaption> pozwalają SEO lepiej objaśniać obrazy wyszukiwarce i użytkownikom.

Wideo: <video> określa standardowy sposób osadzania wideo na stronie internetowej. SEO mogą informować wyszukiwarki o treściach związanych z filmem, takich jak <captions> i <subtitles>.

Mit 2: HTML5 i wideo SEO (VSEO)

HTML5 pozwala na używanie etykiet, podpisów i napisów do treści wideo.

Bogate fragmenty: mikrodane HTML5

Google obsługuje Rich Snippets dla innych typów danych, w tym produktów, przepisów, recenzji, wydarzeń i informacji o aplikacji.

Wcześniej otrzymywałeś ten typ znaczników zwykłym kodem HTML:

<div> Nazywam się Bob Smith, ale ludzie nazywają mnie Smithy. Oto moja strona główna: <a href = "http://www.example.com"> www.example.com </a> Mieszkam w Albuquerque, NM i pracuję jako inżynier w ACME Corp. </div>

Tak wygląda HTML5:

<div itemscope itemtype = "http://schema.org/Person"> Mam na imię <span itemprop = "nazwa"> Bob Smith </span>, ale ludzie nazywają mnie <span itemprop = "nickname>> Smithy </ span >. Oto moja strona główna: <a href = "http://www.example.com" itemprop = "url"> www.example.com </a> Mieszkam w Albuquerque, NM i pracuję jako <span itemprop = „title”> inżynier </span> w <span itemprop = "affiliation"> ACME Corp </span>. </div>

HTML5 obsługuje mikrodane geolokalizacyjne, gdy zawartość oparta na lokalizacji jest znaczona semantycznie, co jest idealne dla mobilnego i lokalnego SEO.

Mit 3: wielka debata h1

1. Możesz użyć wielu tagów H1 bez zabijania SEO

2.RULE OF THUMB: Jedna H1 na sekcję

3. RULE OF DUMB: Eksperci SEO często zalecają jedną H1, ponieważ klienci nigdy nie implementują hierarchii treści poprawnie.

Tutaj SEO i dostępność mogą się różnić w opiniach: menu nawigacyjne i stopki nie powinny być częścią hierarchii treści jako znaczniki H, ponieważ często nie dodają niczego, co pomaga zrozumieć ogólny temat strony.

Wniosek:

Często, jeśli zajmiesz się techniczną listą kontrolną SEO, udało Ci się również pokryć 70% technicznej listy kontrolnej dostępności.

Dostępność

Kompleksowa definicja dostępności

Dostępność dla sieci oznacza upewnienie się, że nasze strony internetowe i aplikacje są dostępne dla wszystkich, w tym dla osób niepełnosprawnych. Strona internetowa jest dostępna, gdy jest kompatybilna z technologiami adaptacyjnymi (oprogramowaniem).

Cztery kluczowe obszary, do których ma dostęp dostępność osób niepełnosprawnych, to:

  • Przesłuchanie
  • Ruchliwość
  • Poznawczy
  • Wizualny

Korzystanie z semantycznego HTML poprawia dostępność

Semantyczny HTML oznacza, że ​​tagi HTML na stronie powinny opisywać treść w sposób, który ma związek z jej znaczeniem, a nie z jej prezentacją.

Ajax - HTML5 umożliwia odświeżenie strony bez przeładowywania zawartości, która z kolei pozwala użytkownikowi kontynuować przeglądanie bez ponownego uruchamiania.

HTML5 pomaga zachować zgodność z modelem W3C POUR:

P = Dostrzegalne

O = Operable

U = zrozumiałe

R = solidny

Niepełnosprawność - kilka statystyk

Od 110 do 190 milionów dorosłych ma poważne trudności w funkcjonowaniu. To około 15% światowej populacji.

Ponieważ ta rozmowa jest prezentowana w Kanadzie, przekłada się to na ignorowanie 13,7% dorosłej populacji kraju.

Normy i standardy

Światowy standard - WCAG 2.0 (Wytyczne dotyczące treści w sieci)

W Quebecu obowiązują 3 standardy:

  • SGQRI-008-01
  • SGQRI-008-02
  • SGQRI-008-03

Ontario ma prawo dostępności oparte na cechach firm. Jeśli masz 50 lub więcej pracowników, musi być dostępna nowa strona internetowa firmy lub odświeżenie / przeprojektowanie witryny.

  • Poziom A - wprowadzony w życie w styczniu 2014 r
  • Poziom AA - termin na styczeń 2021 r
  • Poziom AAA

3 Szybkie testy dostępności, które możesz wykonać a11yproject.com w mniej niż 10 minut

Szybki test: sprawdź zrozumienie Poziom - Korzystając z nich przybory możesz sprawdzić poziom czytania swojej pisemnej treści.

Szybki test: Sprawdź kontrast za pomocą urządzenia mobilnego - Korzystając ze zwykłego urządzenia mobilnego, możesz sprawdzić czytelność swojej witryny.

Szybki test: nawiguj za pomocą klawiatury - Szybki 5-sekundowy test dostępności, który możesz teraz uruchomić w swoich witrynach.

Wskazówki dotyczące testowania:

  • Przetestuj stronę na swojej stronie, która zawiera wszystkie rodzaje treści, aby zobaczyć, jak działają komponenty (menu nawigacyjne, główna grafika, główna treść, bloki informacji, formularz kontaktowy).
  • Jest bardzo dobrze Repozytorium Github dla wszystkich rzeczy HTML5 i dostępności przez grupę Paciello.

Formularze mogą powodować problemy dla osób korzystających z czytników ekranu, jeśli nie masz pewności, że mają dostęp do wszystkich informacji potrzebnych do wypełnienia formularza.

W przypadku wymaganego atrybutu przeglądarka sprawdzi pole i poda komunikat o błędzie, jeśli nie zostanie wypełniony. Czytniki ekranu interpretują je i informują użytkownika, że ​​pole jest wymagane, gdy jest początkowo napotkane.

Typy wejść dają wskazówki dla przeglądarki dotyczące typu układu klawiatury do wyświetlania na klawiaturach ekranowych.

HTML5 - Audio, wideo i dostępność

HTML5 pozwala przeglądarkom natywnie odtwarzać pliki audio i wideo. Jedną z największych zalet dostępności w przypadku korzystania z tych elementów jest to, że ponieważ przeglądarka udostępnia formanty, są one znacznie bardziej dostępne.

Konkretne przykłady

Uproszczony typ dokumentu:

<! DOCTYPE html>

Element rysunku dla obrazów

Nie ma łatwego ani semantycznego sposobu na powiązanie podpisu, zapakowanego w znacznik akapitu, z samym elementem obrazu. HTML5 naprawia to za pomocą elementu <figure>. W połączeniu z elementem <figcaption> możemy teraz semantycznie powiązać podpisy z ich odpowiednikami graficznymi.

[codepen_embed height = ”268 ″ theme_id =” 0 ″ slug_hash = ”LNWGeG” default_tab = ”html” user = ”mjessier”] Zobacz pióro LNWGeG Myriam Jessier ( @mjessier ) na CodePen . [/ codepen_embed]

Formularze pozwalają na nowy wymagany atrybut, który oczywiście określa, czy dane wejście jest wymagane. W zależności od preferencji kodowania możesz zadeklarować ten atrybut na dwa sposoby:

<input name = "someInput" required = "" type = "text" />

Lub z bardziej ustrukturyzowanym podejściem.

<input name = "someInput" required = "required =" "type =" text "/>

Za pomocą tego kodu oraz w przeglądarkach obsługujących ten atrybut nie można przesłać formularza, jeśli wejście „someInput” jest puste.

Przykład po prawej stronie można znaleźć na Github .

Dlaczego SEO śledzą HTML5?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

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

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью