Element HTML5 TIME w mikroformatach
Rozwiązując problemy z danymi strukturalnymi strony w narzędziu Google Structured Data Tool zauważyłem pewien niuans, który może pomoże niektórym zrozumieć problemy z datami w mikroformatach.
Czym są mikroformaty
Dla przypomnienia — mikroformaty są jednym ze sposobów oznaczania danych na stronach HTML, które pomagają różnym automatom (np. robotom indeksującym wyszukiwarki) lepiej zrozumieć charakter danych na stronie i wykorzystać tę wiedzę do sprawniejszego działania, lub poprawienia doświadczeń użytkownika. Przykładowo, mikroformat hCalendar obsłużony przez przeglądarkę może ułatwić dodanie opisywanego wydarzenia do kalendarza czytelnika jednym kliknięciem, a hReview wyświetlić gwiazdki przy Twojej recenzji już w wynikach wyszukiwania Google. Mikroformaty bazują na atrybucie class elementów HTML. Opis konwencji znajduje się na stronie Microformats.org.
Mikroformaty są prawdopodobnie wciąż najczęściej występującym rodzajem danych strukturalnych w internecie. Jeśli korzystasz z gotowych szablonów, np. na platformie WordPress, są duże szanse że ich autorzy oznaczyli klasy zgodnie z tą konwencją. Pozostałe dwa popularne podejścia to Microdata i RDF. Jeśli nie wiesz, który z tych trzech wybrać, wybierz Microdata — jest dobrze przemyślany, równoważy elegancki podejście z prostotą implementacji, obecnie wspierają go firmy jak Google, Microsoft czy Yahoo, ma też świetną dokumentację z przykładami na stronie schema.org. Możesz też zastosować więcej niż jedną konwencję —. Ze względu na podobną popularność, masz dzięki temu szansę, że większa ilość narzędzi zrozumie dane strukturalne Twojej strony.
Data i czas w mikroformatach
Powszechnie występujących na blogach mikroformatem jest hEntry opisujący element kanału Atom, a więc standardu dla kanałów informacyjnych (następcy RSS, który idealnie pasuje do opisywania struktury blogów). Mikroformat ten jest jako jeden z wielu rozpoznawany przez Google. Możemy sprawdzić jak nasza strona jest widziana przez pryzmat mikroformatów w narzędziu Google Structured Data Tool.
Jednym z bardzo problematycznych typów danych z którymi informatyka ma do czynienia, jest data i czas. Powodów jest wiele, choćby różne kalendarze, strefy czasowe, setki sposobów zapisu dat zależne od kraju, różne wymagania odnośnie precyzji (czasem wystarczy dzień, a czasem potrzebna jest mikrosekunda żeby określić czas). Standard HTML5 wprowadził element <time>, który pomaga autorom treści określić precyzyjnie punkt w czasie, oddzielić te informację od tego co jest prezentowane użytkownikowi i użyć precyzji, którą uważa za wystarczającą. Przykładem może być np. tag Zapraszamy <time datetime="2014-06-27T20:00+00:00">w piątek wieczorem</time>, gdzie użytkownik dostaje informację w formie nieprecyzyjnej, natomiast automaty mogą zrozumieć o jaki punkt w czasie chodzi.
Rozpoznawanie daty w mikroformatach przez Google
Preferowaną przez Google formą oznaczania danych jest Microdata. Jeśli jednak używasz mikroformatów, również zostaną one zrozumiane, pod warunkiem że zadbasz o ich prawidłowe użycie.
Możesz np. trafić na problem, który wskazuje że w elemencie hatom > hentry brakuje daty aktualizacji (rys. 1).
Rys. 1. Mikroformat hEntry: brak daty (lub format daty nierozpoznany)
Oznacza to, że nie znaleziono prawidłowo sformatowanej daty w użytym mikroformacie. Rozpatrzmy przykładowy wpis typu hEntry (skrypt 1).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="hentry"> <h1 class="entry-title">Title</h1> <div class="entry-content"> <p>Content line 1</p> <p>Content line 2</p> <p class="entry-summary">Summary</p> </div> <span class="date published"><time datetime="2014-07-01">2066-06-06</time></span> <span class="date updated"><time datetime="2014-07-02">2066-06-07</time></span> <div class="vcard"> <span class="fn">buli</span> </div> </div> |
Jak myślisz, jaka data zostanie użyta podczas indeksowania tej strony? Spójrzmy na wynik analizy narzędziem Google Structured Data Tool (rys. 2).
Rys. 2. Data w hAtom rozpoznana na podstawie wartości tagu time
Domyślam się, że podawanie dwóch sprzecznych dat w tagu time nie ma sensu, ale wniosek jest inny — w przypadku tagu time używana jest jego zawartość, a nie wartośc z atrybutu datetime. Dlatego, jeśli wyświetlasz użytkownikowi datę w przyjaznym formacie (np. “1-go kwietnia”) nierozpoznawanym przez wyszukiwarkę, najprawdopodobniej nie będzie ona rozpoznana.
Analogiczne zachowanie będzie miało miejsce, jeśli atrybuty mikroformatów nadamy bezpośrednio elementowi time zamiast span:
<time class="date updated" datetime="2014-07-02">2066-06-07</time>
Nowsza wersja mikroformatu hEntry: h-entry
W drugiej wersji specyfikacji Microformats 2 mikroformat hEntry został zastapiony przez h-entry. H-entry już w przykładzie sugeruje użycie elementu time HTML5, a w FAQ dodaje The dt-published property should be a
. Sprawdźmy więc jak odczytana zostanie strona z mikroformatem w wersji 2:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="h-entry"> <h1 class="p-name">Title</h1> <div class="p-content"> <p>Content line 1</p> <p>Content line 2</p> <p class="p-summary">Summary</p> </div> <span class="dt-published"><time datetime="2014-07-01">2066-06-06</time></span> <span class="dt-updated"><time datetime="2014-07-02">2066-06-07</time></span> <div class="p-author h-card"> buli </div> </div> |
Efekt przedstawia rys. 3. Jak widać, mikroformat po prostu nie jest w chwili obecnej brany pod uwagę przez wyszukiwarkę Google.
Rys. 3. Użycie mikroformatu h-entry zamiast hEntry
Rozwiązanie problemu
Jeśli chcesz użyć mikroformatów, traktuj element time jak każdy inny w którym to wartość tagu, a nie atrybut datetime ma znaczenie. Jeśli chcesz pokazać użytkownikowi datę w formacie który nie będzie rozpoznany przez roboty (np. piątek, 27 czerwca), ukryj mikroformat z datą przy pomocy CSS, a datę wyświetl użytkownikowi niezależnie. To, czy element wchodzący w skład danych strukturalnych jest wizualnie ukryty czy nie nie ma znaczenia.
Alternatywną opcją może być zmiana mikroformatów na standard, który zdaje się wygrywać w wyścigu – Microdata.
No i najważniejsze — przetestuj zmiany. Narzędzie Google Structured Data Tool pozwala to zrobić jednym kliknięciem. Powodzenia 🙂