rel=tag mikroformat dla tagów

 

rel tag mikroformat opis

Atrybut rel z wartością „tag” umieszczony w linku pozwalana na oznaczenie go jako tagu, który kieruje do zbioru treści powiązanych tematycznie z nazwą. Wszystko wyjaśnia krótki przykład poniżej:


<h2>Tagi:</h2>
<a href="http://kissdesign.pl/tag/webdesign" rel="tag">webdesign</a>
<a href="http://kissdesign.pl/tag/seo" rel="tag">seo</a>

Zastosowanie rel=”tag”

Łatwo domyślić się, że naturalnym zastosowaniem tego mikroformatu jest umieszczenie go w linkach chmury tagów. I wszędzie, gdzie tylko umieszcza się linki tagów ;]

Ale po co mi to?

Cel stosowania mikroformatów jest jeden – wykorzystanie możliwości jakie daje semantyczna sieć. Dzięki temu automaty takie jak boty wyszukiwarek (synonim dla Google) mogą łatwiej sklasyfikować treść opisaną mikroformatem i ją „zrozumieć”. To daje większe szanse na wyższą pozycję w rankingu wyszukiwarki przy słowach kluczowych odpowiadających tagom.

Używasz mikroformatów na swoich stronach? Uważasz, że są potrzebne czy to „sztuka dla sztuki”? Skomentuj!

 
 

hCalendar – umów się w XHTML-u

 

Warning: DOMDocument::loadHTML() [domdocument.loadhtml]: Unexpected end tag : p in Entity, line: 69 in /home/noir/domains/kissdesign.pl/public_html/wp-content/themes/kissdesign/netninja_wp.php on line 134

hCalendar - mikroformat przykładyCiąg dalszy cyklu o najpopularniejszych mikroformatach. Dotychczas poznałeś format hCard, teraz czas na hCalendar.

hCalendar – hIstoria

Format hCalendar powstał, aby wyszukiwanie informacji o wydarzeniach było jeszcze prostsze. Algorytmy wyszukiwarek będą mogły z dużym prawdopodobieństwem odpowiedzieć np. na zapytanie kiedy i gdzie odbywa się koncert Madonny? To nie wszystko! Dzięki hCalendar wymiana danych o wydarzeniach będzie jeszcze prostsza. Zaznaczenie myszą fragmentu strony opartej o hCalendar, kliknięcie prawym przyciskiem i zapisz wydarzenie w komórce to jeszcze przyszłość. Jak daleka? Zobaczymy!

hCalendar – opis mikroformatu

Użycie mikroformatu jest naprawdę proste. Wystarczy użyć odpowiednich klas CSS do opisania danych. Nazwy klas są naprawdę intuicyjne. Zobacz na ten przykład użycia hCalendar:


<div class="vevent">
   <abbr title="2010-09-06T08:0000" class="dtstart">6 Września 2010,  8:00</abbr> : 
   <abbr title="2010-09-08T22:00" class="dtend">8 Września 2010,  22:00</abbr> :  
   <span class="summary">Konferencja hCalendar2010</span> w 
   <span class="location">Poznań, Plac Wolności 4</span>
   <div class="description">Konferencja wokół zagadnień semantycznego Internetu. Przedstawienie mikroformatów takich jak hCard, hCalendar.</div>
   <div class="tags">Tagi: 
   <a href="http://eventful.com/events/tags/konferencja" rel="tag">konferencja</a>
   <a href="http://eventful.com/events/tags/web%20design" rel="tag"> web design</a>
   </div>
</div>

Oczywiście nie musisz pamiętać wszystkich pól i klas. Skorzystaj z generatora on-line hCalendar.

hCalendar – jak to wygląda?

Format specyfikuje jedynie odpowiednie elementy HTML opisane klasami CSS. To wszystko. Dlatego forma prezentacji jest całkowicie dowolna. Zobacz powyższy przykład w wersji live:

Konferencja hCalendar2010
Poznań, Plac Wolności 4

Od 6 Września 2010, 8:00
do 8 Września 2010, 22:00

Konferencja wokół zagadnień semantycznego Internetu. Przedstawienie mikroformatów takich jak hCard, hCalendar.

Chcesz skorzystać z powyższego szablonu dla hCalendar? Pobierz plik CSS layoutu hCalendar.

Korzystasz już z formatu hCalendar? Znasz inne mikroformaty? Chcesz się dowiedzieć więcej na ten temat? Napisz w komentarzu!

 
 

mailto: temat i treść predefiniowane

 

Mailto - specyfikacja, tytuł, treść e-mailZwykły tag odnośnika <a> pozwala na uruchomienie domyślnego klienta poczty i wysłanie e-maila pod wskazany adres. W tym celu stosuje się przedrostek mailto: z wpisanym adresem odbiorcy.

Czasami jednak warto rozszerzyć ten schemat o domyślne wartości tematu lub treści e-maila. Jak to zrobić?

<a href="mailto:art.polkowski@gmail.com?body=tresc&subject=tytul-wiadomosci">Artur Polkowski</a>

Powyższy przykład jest poprawny, ale nie radzi sobie z białymi znakami (spacja, przejście do następnej linii). Kodowanie takich znaków jest następujące:

  • spacja — %20
  • przejście do następnej linii — %0D%0A

Po ich zastosowaniu:

<a href="mailto:art.polkowski@gmail.com?body=Witaj!%0D%0ACo u Ciebie?&subject=Tytul%20wiadomosci">Artur Polkowski</a>

Przykład w wersji live: Artur Polkowski

Chcesz dowiedzieć się więcej? Zobacz specyfikację mailto.

 
 

XHTML – wykorzystanie semantyki

 

Semantyka xhtml, czyli jak zacząć pozycjonowanieProjektujesz, tworzysz strony, podstawy – xhtml i css nie są Ci obce. Ludzie wchodzą na Twoje strony, czytają je, wynoszą z nich jakąś wartość. Wynoszą dzięki temu, że słowa na nich zapisane mają określone znaczenie. Tym jest semantyka. Tym jest język.

Co to ma do xhtml-a? Spójrz na poniższy przykład.


<div class="header">
   Moje ulubione blogi o <span class="bold">web designie</span>:
</div>
<p class="item">seventhmodel.com/blog/</p>
<p class="item">designerblog.pl</p>
<p class="item">kissdesign.pl</p>
</div>

Taki kod popełnia chyba każdy, kto zaczyna obracać się w temacie. Teraz wersja bardziej pro:


<h1>Moje ulubione blogi o <strong>webdesignie</strong>:</h1>
<ul>
   <li>seventhmodel.com/blog/</li>
   <li>designerblog.pl</li>
   <li>kissdesign.pl</li>
</ul>

Jaka to różnica, skoro i jedno, i drugie za pomocą tych samych reguł w css może wyglądać identycznie?

W semantyce oczywiście! Dziś ma to największe znaczenie dla wyszukiwarek. Nie jest żadnym odkryciem, że frazy opisane przez nagłówki h1h6, czy podkreślone za pomocą strong i em, mają większe znaczenie na stronie. Idąc krok dalej, wyszukiwarki już niedługo będą rozkładały strony na czynniki pierwsze i wyjdą poza podział na ważne i nieistotne.

Google szukając dla użytkownika definicji jakiegoś terminu, zajrzy do stron, które zawierają szukaną frazę w tagu dt (definition title). Już teraz mamy wysyp różnych mikroformatów, które korzystają z ukrytej przed użytkownikiem semantyki xhtml-a.

Dlatego stosuj znaczniki, zgodnie z ich przeznaczeniem. Nie nadużywaj nic nie znaczących div-ów i span-ów. Korzystaj z bogactwa jakie daje xhtml. Jestem pewien, że takie podejście zaprocentuje już w niedalekiej przyszłości. A na pewno nie zaszkodzi ;]

Chcesz więcej?  Przyjrzyj się  użyciu specyficznych tagów xhtml opisanych przeze mnie.

Uważasz, że cała ta zabawa w semantykę to tylko dodatkowa czarna robota? A może na własnej skórze odczułeś wpływ semantyki na SEO? Napisz o tym w komentarzu!

 
 
następne wpisy »