HTML5 SEO czy mit?

1. ! DOCTYPE
2. Nowe przyjazne człowiekowi tagi
3. Brak JavaScript (w niektórych przypadkach)
4. Nowe typy wejściowe
5. Lokalny magazyn
6. Dolna linia

HTML5 już od jakiegoś czasu jest modne i dopiero zaczynamy się do tego przyzwyczajać. Ale czy istnieje SEO HTML5? Chodzi mi o to, czy ostatnia wersja HTML jest tak zaawansowana pod względem SEO, że możemy ją traktować jako oddzielną dziedzinę SEO? Ten post przyjrzy się bliżej ostatniej iteracji HTML i rzuci trochę światła na stronę HTML5 SEO. Naprawdę wziąłem dodatkowy krok i zrobiłem kurs z podstaw HTML5 z Envato, aby naprawdę zrozumieć korzyści, jakie przynosi on do tabeli SEO. Dzięki temu będziesz w stanie podjąć świadomą decyzję, czy Twoja strona potrzebuje HTML5 w tej chwili, czy też możesz to zrobić łatwo i zobaczyć, co stanie się dalej.

! DOCTYPE

Pierwsza linia każdego dokumentu HTMl5 pokazuje, o co w tym wszystkim chodzi. HTML5 czyni twój plik bardziej lekkim i semantycznym (zrozumiałym). Jeśli więc używasz HTML5 w swojej witrynie, możesz po prostu uruchomić plik w następującej linii:

A to zamiast:

To ogromna ulga! Nie uważasz?

W rzeczywistości nie ma bezpośredniej poprawy SEO, ale ponieważ mniej kodu zazwyczaj oznacza szybsze ładowanie witryny, ma to pewien wpływ na SEO na stronie. Szybkość witryny staje się coraz ważniejszym czynnikiem w Google algo.

Nowe przyjazne człowiekowi tagi

Takie znaczniki są również nazywane znacznikami semantycznymi, ponieważ w pewnym sensie dają wyobrażenie o tym, o co w nich chodzi. Na przykład, jeśli używasz tagów <div> </div>, tak naprawdę nie wiesz, co będzie w nich zawarte. Może to być cokolwiek: nagłówek, stopka, pasek boczny, nazwij go. Nowe znaczniki HTML5 zapewniają większą strukturę i zrozumienie tej struktury zarówno dla ludzi, jak i dla wyszukiwarek. Nowe znaczniki semantyczne HTML5 to:

• <header>
• <nawigacja>
• <aside> (możesz go użyć dla pasków bocznych)
• <footer>

Jak widzisz, możesz łatwo dowiedzieć się, który znacznik jest używany w nagłówku, stopce itp. Jedynym problemem jest znacznik <aside>, ponieważ nie jest on dla mnie zbyt semantyczny. Sądzę, że mogliby to po prostu nazwać <sidebar>. Co myślisz?

Wygląda na to, że upraszczają one życie wyszukiwarek, ponieważ znaczniki struktury wyraźnie potwierdzają, w jakiej części witryny znajduje się łącze. Nie oznacza to, że nie rozumieją go bez HTML5, ale struktura witryny nie stanowi problemu dla nowych tagów.

Brak JavaScript (w niektórych przypadkach)

Jest rzeczą oczywistą, że używanie JavaScrip na twojej stronie jest w wielu przypadkach kwestią SEO, ponieważ główne wyszukiwarki mają trudności ze zrozumieniem treści dostarczanych przy pomocy JavaScrip. Z pomocą HTML5 możesz tworzyć liczniki i paski postępu bez żadnych skryptów innych firm. Po prostu użyj tych tagów:

• <meter> </meter>
• <progress> </progress>

Możesz spojrzeć na obraz, aby lepiej zrozumieć, jak działają te tagi i co pokazują w przeglądarce.

Naprawdę nie widzę żadnych korzyści poza faktem, że nie powinieneś używać (lub używać mniej) JavaScript w swojej witrynie, co jest zawsze dobrą wiadomością.

Nowe typy wejściowe

HTML5 oferuje również kilka naprawdę fajnych funkcji, które pozwalają na dodanie wbudowanej walidacji do formularzy kontaktowych. Miałeś wcześniej korzystać z JavaScript, ale nie teraz, ponieważ możesz po prostu przećwiczyć, co oferuje HTML5. Oto lista tych nowych typów danych wejściowych:

• e-mail. Możesz użyć go w formularzach HTML w następujący sposób: <input type = "email">
• zasięg. Można go używać w formularzach HTML w następujący sposób: <typ wejścia = „zakres”>
• kolor. Możesz użyć go w formularzach HTML w następujący sposób: <typ wejścia = "kolor">. Zasadniczo pokazuje tylko próbnik kolorów.
• numer. Można go używać w formularzach HTML w następujący sposób: <typ wejścia = "liczba">. Wyświetla menu rozwijane do wybierania numerów.
• data. Można go używać w formularzach HTML w następujący sposób: <typ wejścia = "data">. Ten typ danych wejściowych umożliwia wyświetlenie rozwijanego kalendarza tylko za pomocą HTML.
• url. Możesz użyć go w formularzach HTML w następujący sposób: <input type = "url">.
• tel. Możesz użyć go w formularzach HTML w następujący sposób: <input type = "tel">.
• Szukaj. Można go używać w formularzach HTML w następujący sposób: <typ wejścia = "szukaj">.
• datetime. Umożliwia wyświetlanie informacji o czasie w następującym formacie: rrrr-mm-dd GG: MM. Zobacz zrzut ekranu poniżej.

Chociaż posiadanie tego rodzaju wbudowanej walidacji jest niewątpliwie krokiem we właściwym kierunku, nie powinieneś być zbyt przesadny, ponieważ sprawdzanie poprawności nowych tagów HTML5 nie jest tak wiarygodne, jak byśmy chcieli. Możesz go użyć, gdy po prostu potrzebujesz prostej walidacji w stopniu, który nie powiedzie się w poważnych okolicznościach, takich jak utrata danych lub coś podobnego.

Ponownie, nie ma bezpośredniego wpływu na SEO na stronie, ale możliwość korzystania z mniejszej ilości JavaScript na pewno pokaże korzyści.

Lokalny magazyn

Wierzę, że ta funkcja wejdzie w grę w przypadku SEO, gdy pozostawisz obszerne komentarze na odpowiednich blogach. Zasadą jest, że stworzenie takiego komentarza zajmie trochę czasu. Wymyślenie naprawdę przyzwoitego komentarza może zająć mi pół godziny. Po kliknięciu przycisku „Wyślij” pojawi się następujący komunikat: „Twoja sesja wygasła!” To mi się często zdarza. Funkcja lokalnego przechowywania pozwala lokalnie przechowywać znaczne ilości informacji, aby Twój komentarz (w tym konkretnym przypadku) nie wygasł.

Być może nie jest to jedyny przypadek, w którym można korzystać z lokalnej pamięci masowej, ale to jedyna rzecz, o której mogę myśleć. Czy wiesz, gdzie jeszcze można go użyć?

Ten jedyny przypadek użycia, jaki widzę w przypadku tej funkcji, to bezpieczne komentowanie blogów, jak opisano powyżej. To bardziej użyteczność i korzyść dla UX niż dla SEO.

Dolna linia

Ogólnie rzecz biorąc, korzyści płynące z używania HTML5 są naprawdę trudne do zauważenia. Przynajmniej pod względem bezpośredniego wpływu, ale z pewnością ma w zanadrzu sztuczkę, która pomoże SEO. W czasie pisania tego tekstu nie ma potrzeby ponownego projektowania witryny tylko dlatego, że nie jest ona wykonana za pomocą HTMl5, ponieważ twoje rankingi nie cierpią z powodu samego faktu, że nie używasz HTML5.

Możesz użyć Mogę uzyć aby sprawdzić, jakich funkcji możesz używać w określonych przeglądarkach. Jest to więc rodzaj kompatybilności z przeglądarką.

Treść posta na blogu opiera się zarówno na moich badaniach, jak i na osobistym doświadczeniu, które otrzymałem dzięki pracy przy pomocy technicznej. Co sądzisz o moich wnioskach dotyczących HTML5 i SEO?

Kredyt zdjęciowy: „Kowboj” Ben Alman przez fotopin cc