Навигация по сайту

Популярные статьи

SEO dla programistów: zalety HTML5 Semantics + Schema Microdata

  1. Elementy semantyczne HTML5:
  2. Jak korzystać z elementów semantycznych pomocy HTML5 w odniesieniu do SEO?
  3. Myślisz, że nikt nie używa elementów semantycznych? Pomyśl jeszcze raz.
  4. Schemat semantyczny Mikrodane
  5. Końcowe przemyślenia

Jest to pierwszy z serii blogów A-Team dotyczących najlepszych praktyk SEO.

Kiedy HTML5 pojawił się na scenie w latach 2011–2014, społeczność twórców stron internetowych nieco się oburzyła, że ​​jest „zbyt skomplikowana”, a niektóre jej części są niepotrzebne. W szczególności programiści drapali się po głowie o tak zwane elementy semantyczne HTML5 - w końcu, co było nie tak z dobrą starą konstrukcją <div id = „xxx”>? Przewińmy o kilka lat do przodu, a dzisiaj mamy wiele legalnych zastosowań semantycznych elementów HTML5, a programiści powinni zacząć wdrażać je we wszystkich nowych projektach.

Elementy semantyczne HTML5:

Treść < article > oznaczona jako „syndykowana” - musi być „kompletna” sama w sobie, ponieważ może być gromadzona arbitralnie i prezentowana w paszy <na bok > tj. „pasku bocznym”, tylko w celu obsługi głównej treści, peryferii treści. Uwaga: możemy teraz korzystać z H1 na bok bez konsekwencji dla SEO. < szczegóły > reprezentuje widżet ujawnienia, z którego użytkownik może uzyskać dodatkowe informacje lub kontrole < figcaption > podpis dla figury (patrz poniżej) < figury > treści oznaczone jako „syndykowane” przez siebie (np. zdjęcia, ilustracje, filmy itp. .) < footer > zawartość stopki strony < nagłówek > zawartość nagłówka strony < main > główna zawartość strony, z wyłączeniem elementów globalnych, takich jak nagłówek, stopka i nav < mark > autor chce, abyś skupił się na tej treści bez podkreślania jej , aby rozróżnić <em> lub <strong> < nav > linki nawigacyjne strony < sekcja > grupowanie pokrewnej zawartości < podsumowanie > definiuje widoczny nagłówek elementu <szczegóły>. Można kliknąć, aby wyświetlić / ukryć szczegóły < time > zawija czas za pomocą właściwości czasu do odczytu maszynowego < hgroup > grupa tagów nagłówka

Jak korzystać z elementów semantycznych pomocy HTML5 w odniesieniu do SEO?

Na wiele sposobów:

  • pomaga wyszukiwarkom i czytnikom maszyn zidentyfikować kluczowe części strony. W szczególności wyszukiwarka Google Hummingbird (w przeciwieństwie do wyszukiwarek Google Panda lub Google Penguin) została zaprojektowana, aby skupić się na konwersacyjnym znaczeniu treści na Twojej stronie. Korzystanie ze znaczników semantycznych HTML5 poprawi „zrozumienie” twoich stron internetowych przez Hummingbird.
  • Ponadto semantyczne elementy HTML5 pomogą niektórym odwiedzającym Twoją stronę ludzką dłużej wchodzić w interakcję z Twoją stroną (np. Tymi, którzy korzystają z czytników ekranu). Im dłużej odwiedzający witrynę pozostają na Twoich stronach, tym wyższy jest twój ranking strony.
  • I wreszcie, elementy semantyczne HTML, takie jak <article> i <figure>, pomagają w syndykowaniu / zmienianiu treści na różnych kanałach. Zachęcając do syndykacji, istnieje więcej „zewnętrznych” zaufanych linków do Twojej witryny. A bardziej zaufane linki do Twojej strony internetowej (bez względu na to, skąd pochodzą) są głównym czynnikiem wpływającym na pozycję strony.

Myślisz, że nikt nie używa elementów semantycznych? Pomyśl jeszcze raz.

Facebook promuje teraz wyróżniony „Instant Articles” (zobacz: https://developers.facebook.com/docs/instant-articles/reference ), które według nich będzie nowym kanałem dla wydawców do tworzenia szybkich, interaktywnych artykułów, które pojawiają się na aplikacji mobilnej Facebooka. Facebook wyraźnie wkracza tutaj na HTML5. Aby utworzyć natychmiastowy artykuł, wystarczy naprawdę sformatować swoje strony internetowe zgodnie z wytycznymi HTML5, a one pozwolą Ci publikować / promować takie interaktywne artykuły, które będą optymalnie odpowiadać na ich kanał mobilny. W skrócie, jest to idealny sposób na ponowne wykorzystanie istniejącej treści internetowej. I jeszcze bardziej zaufane linki do Twojej witryny (bez względu na to, skąd pochodzą) zwiększają twój ranking strony.

Poniżej znajduje się krótka próbka tego, jak wygląda formatowanie. Zwróć uwagę na użycie elementu HTML5 <artykuł>, który jest wyraźnie używany tutaj do syndykacji.

<! doctype html> <html lang = "en" prefix = "op: http://media.facebook.com/op#"> <head> <meta charset = "utf-8"> <link rel = "canonical "href =" http://example.com/article.html "> <meta property =" op: markup_version "content =" v1.0 "> </head> <body> <article> <header> <! - - Tytuł i napisy wyświetlane w Twoim artykule Instant -> <h1> Tytuł artykułu </h1> <h2> Podtytuł artykułu </h2> <! - Data i godzina publikacji artykułu -> <time class = "op-opublikowane" datetime = "2014-11-11T04: 44: 16Z"> 11 listopada, 16:44 </time> <! - Data i godzina ostatniej aktualizacji artykułu -> < time class = "op-modified" dateTime = "2014-12-11T04: 44: 16Z"> 11 grudnia, 16:44 </time> <! - Autorzy twojego artykułu -> <adres> <a rel = "facebook" href = "http://facebook.com/brandon.diamond"> Brandon Diamond </a> Brandon jest zapalonym łowcą zombie. </address> <address> <a> TR Vishwanath </a> Vish to uczony i dżentelmen. </address> <! - Obraz okładki wyświetlany w Twoim artykule -> <figure> <img src = "http://mojadomena.com/path/to/img.jpg" /> <figcaption> Ten obraz jest niesamowite </figcaption> </figure> <! - Kicker dla twojego artykułu -> <h3 class = "op-kicker"> To jest kicker </h3> </header> <! tutaj -> <! - Tekst treści dla twojego artykułu -> <p> Treść artykułu </p> <! - Film w twoim artykule -> <figure> <video> <source src = "http: //mydomain.com/path/to/video.mp4 "type =" video / mp4 "/> </video> </figure> <! - Reklama w Twoim artykule -> <figure class =" op- ad "> <iframe src =" https://www.adserver.com/ss;adtype=banner320x50 "height =" 60 "width =" 320 "> </iframe> </figure> <! - kod Analytics dla Twój artykuł -> <figure class = "op-tracker"> <iframe src = "" hidden> </iframe> </figure> <footer> <! - Kredyty dla twojego artykułu -> <aside> Podziękowania < / aside> <! - Informacje o prawach autorskich do Twojego artykułu -> <small> Nota prawna </small> </footer> </article> </body> </html>

Schemat semantyczny Mikrodane

Podczas gdy programiści dyskutowali na temat korzyści / wad HTML5, pod radarem i bez fanfar, www.schema.org (inicjatywa finansowana przez Google, Microsoft, Yahoo i Yandex) opublikowała wiele udokumentowanych schematów dla prawie każdy możliwy rodzaj treści: produkty, wydarzenia, organizacje, lokalne firmy, filmy i recenzje książek itp. (patrz www.schema.org ). Praktycznie z dnia na dzień stało się to de facto standardem znaczników treści.

Dlaczego powinieneś zadać sobie trud formatowania treści internetowych za pomocą schematu Microdata? Prosty przypadek dotyczy sposobu, w jaki Google formatuje stronę, gdy pojawia się na stronie wyników wyszukiwania (SERP) - aka „fragmenty bogate” (patrz rysunek poniżej). Wykazano dość demonstracyjnie, że te strony internetowe, które są „sformatowane” przy użyciu specyficznych atrybutów mikrodanych schematu, uzyskują więcej współczynników klikalności (CTR), gdy są renderowane w SERP przeciwko ich konkurencji, która nie ma takiego formatowania. Nie trzeba dodawać, że posiadanie wysokiego CTR to kolejny główny motor rankingu stron.

Podstawowe atrybuty używane w formatowaniu „fragmentów bogatych” zależą od typu schematu - przykład: lista filmów „fragment bogaty” wyświetlałaby recenzje, lokalizacje i godziny seansów. „Fragment kodu” produktu oznaczałby recenzje, ceny i dostępność. I tak dalej.

Poniżej znajduje się prosty przykład użycia mikrodanych schematu podczas formatowania treści HTML:

<body>… <article> <div itemscope itemtype = "http://schema.org/Product"> <h1 itemprop = "name"> Ocet balsamiczny Premium Dark Chocolate </h1> <p itemprop = "description"> Dark Ocet czekoladowy balsamiczny z Modeny we Włoszech jest bogaty, gęsty i ma złożoność trzech różnych czekolad. </p> <p itemscope itemtype = "http://schema.org/AggregateRating"> Średnia ocena: <img src = " 4stars.png "alt =" 4 gwiazdki 5 "> (<span itemprop =" ratingCount "> 120 </span> głosów) <meta itemprop =" ratingValue "content =" 4 "/> <meta itemprop =" bestRating " content = "5" /> </p> </div> </article>… </body>

Należy zauważyć, że zamiast formatowania stylu mikrodanych schematu można opcjonalnie użyć formatowania RDFa Lite (oba mogą używać tych samych schematów www.schema.org). Google twierdzi, że obsługują oba style formatowania. Widzieć: https://www.w3.org/TR/xhtml-rdfa-primer/

W przypadku, gdy nie było to całkowicie jasne: możesz i powinieneś łączyć semantykę HTML5 i mikrodane schematu razem na tej samej stronie!

Poniżej znajduje się link do narzędzia Google Structured Data Markup Helper, które pomaga zobaczyć, jak działa z bieżącą treścią, do której można uzyskać dostęp: https://www.google.com/webmasters/markup-helper/

Końcowe przemyślenia

Zakładając, że nasze projekty internetowe używają MVC lub innego wariantu, pozostaje pytanie, jak najlepiej renderować zawartość w warstwie prezentacji. Wydaje mi się, że idealnie, aplikacja obsługująca (np. Kontroler) wyprowadziłaby ładunek, który dostarczyłby jednoznacznych wskazówek w ładunku odpowiedzi, co do konkretnego schematu treści jest renderowany. Zrobione w ten sposób frameworki nie muszą robić nic więcej, jak tylko przekształcać wskazówki w HTML5 i / lub Schema Microdata bez konieczności skomplikowanego wyszukiwania.

Biorąc to pod uwagę, wydaje mi się, że mamy tutaj okazję, aby stworzyć takie pożądane przez SEO zachowanie treści, przyjmując www.schema.org dla całej znanej nam treści. Niektóre oczywiste przykłady to Eloqua Landing Pages i e - maile (np. Www.schema.org/event, www.schema.org/InviteAction, www.schema.org/RsvpAction, schema.org/EmailMessage) lub Commerce Product Pages (np. Www .schema.org / product, www.schema.org/offer, www.schema.org/Review) lub Witryny Marketing usług w chmurze , FAQ, przepis lub strony firm lokalnych (np. schema.org/NewsArticle, schema.org/Question , schema.org/Recipe, schema.org/LocalBusiness). Nie trzeba dodawać, że w naszym ekosystemie Red Stack istnieje wiele innych możliwości, które pozwalają nam zwiększyć wartość dla naszych klientów zorientowanych na SEO (czyli prawie wszystkich naszych klientów).

Myślisz, że nikt nie używa elementów semantycznych?
W szczególności programiści drapali się po głowie o tak zwane elementy semantyczne HTML5 - w końcu, co było nie tak z dobrą starą konstrukcją <div id = „xxx”>?
Myślisz, że nikt nie używa elementów semantycznych?
Dlaczego powinieneś zadać sobie trud formatowania treści internetowych za pomocą schematu Microdata?