Podstawy optymalizacji stron internetowych w PAP pod kątem SEO Spis treści

Transkrypt

1 Podstawy optymalizacji stron internetowych w PAP pod kątem SEO Spis treści 1. Ogólne informacje Najważniejsze metatagi i tagi w sekcji <head> Słowa kluczowe Tytuł Opis Informacje dla robotów Adresy kanoniczne Kodowanie znaków Język Sieci społecznościowe Opengraph Twitter Card Google Informacje o wybranych tagach w sekcji <body> Nagłówki <hx> Elementy graficzne <img> Tagi w html Duplicate content Nazwy plików Adres url Robots.txt Mapa witryny Pliki css oraz js Strona błędu Urządzenia mobilne Wspierane wersje przeglądarek... 10

2 1. Ogólne informacje Poniższy dokument przedstawia podstawowe informacje o budowie stron internetowych PAP potrzebnych do prawidłowego pozycjonowania serwisów w wyszukiwarkach internetowych. Strony PAP powinny wykorzystywać język XHTML 1.1 lub HTML5 w zakresie warstwy treści oraz CSS 2 i 3 w zakresie warstwy prezentacji. Mają być konstruowane przy założeniu rozdzielenia treści i formatowania na niezależne od siebie warstwy. Korzyścią takiego rozwiązania jest możliwość zmiany sposobu prezentacji niezależnie od treści serwisu. Strony powinny być napisane zgodnie z obowiązującymi standardami i spełniać specyfikację w3c. Kod źródłowy strony powinien być zoptymalizowany dla robotów Google a. 2. Najważniejsze metatagi i tagi w sekcji <head> Poniżej przedstawione są wybrane metagi. Sposób ich użycia może być różny w zależności od użytego języka xhtml/html5. Np. copyright nie występuje w specyfikacji html5, zamiast niego stosowany jest rightsholder. Należy także rozważyć stosowanie dodatkowych metatagów jak np: cache-control, expires Słowa kluczowe Do każdej strony witryny powinny być odpowiednio dobierane słowa kluczowe W przypadku stron przedstawiających obiekty informacyjne PAP słowami kluczowymi będą słowa kluczowe obiektu informacyjnego. Pozostałe będą miały słowa kluczowe dobierane przez operatora i wstawiane przez cms. Słowa kluczowe są umieszczone w metatagu keywords, np. <meta name= keywords content= słowo1, słowo kluczowe 2, inne słowo /> Ten metatag nie ma wpływu na pozycję strony w wyszukiwarce Google, ale może mieć znaczenie w innych wyszukiwarkach internetowych i nie należy z niego rezygnować Tytuł Zawiera tytuł strony wyświetlany na górnym pasku okna przeglądarki. Tytuł musi być ściśle związany z treścią strony. Powinien zawierać słowa kluczowe danej strony. W przypadku

3 obiektów informacyjnych PAP (depesze, zdjęcia, pliki audio i video) tytułem powinien być tytuł danego obiektu. Prawidłowy tytuł istotnie wpływa na pozycję strony w wyszukiwarkach. Tytuł musi być unikalny w obrębie domeny oraz umieszczony w tagu <title>. Na stronie z wynikami wyszukiwarki Google a tytuły stron ograniczane są do 70 znaków. Należy przestrzegać tego limitu aby były one widoczne w całości. <title>unikalny tytuł nie dłuższy niż 70 znaków zawierający słowa kluczowe</title> 2.3. Opis Każda strona PAP musi posiadać opis w postaci następującego wpisu w nagłówku. Opis strony powinien liczyć znaków, jest zwięzły tekst zawierający opis treści prezentowanej strony. Opis powinien zawierać słowa kluczowe odpowiednie dla danej podstrony. Należy rozważyć możliwość bezpośredniego wykorzystania niektórych pól metadanych obiektów informacyjnych np. Opis/Lead. Opis strony musi być unikalny w obrębie domeny. Powinna być możliwość edytowania opisu z poziomu cms-a. Dodatkowo opisy stron z depeszami powinny automatycznie pobierane z leadu depeszy. <meta name= description content= Tu opis strony /> 2.4. Informacje dla robotów Informacje dla robotów przekazywane są poprzez zamieszczenie w nagłówku strony jednej z deklaracji: <meta name= robots content= index, follow > dla stron, które wyszukiwarki mają indeksować i podążać za linkami na nich zamieszczonymi, <meta name= robots content= noindex, nofollow > dla stron, których wyszukiwarki mają nie indeksować i nie podążać za linkami na nich zamieszczonymi, <meta name= robots content= noindex, follow > dla stron, które wyszukiwarki mają nie indeksować i podążać za linkami na nich zamieszczonymi, <meta name= robots content= index, nofollow > dla stron, które wyszukiwarki mają indeksować i nie podążać za linkami na nich zamieszczonymi.

4 Sposób użycia tych informacji powinien podlegać dalszym ustaleniom Adresy kanoniczne Informacja o właściwym adresie internetowym strony, zabezpieczenie przed oznaczeniem strony jako duplicate content przypadku kiedy kilka stron o różnych adresach URL posiadają identyczną treść (np. kiedy a w adresie przekazywany jakiś parametr: id sesji itp). Roboty bing nie zalecają nadużywanie tego metatagu na wszystkich podstronach i wskazywanie w nich swojego adresu (self reference), dlatego powinny być one wstawione tylko na stronach, które mogą zawierać duplicate content. <link rel= canonical href= kanoniczny adres strony /> 2.6. Kodowanie znaków Wszystkie strony PAP powinny być kodowane w standardzie UTF-8, w związku z tym w nagłówku każdej strony musi znaleźć się następujący wpis: <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> 2.7. Język W zależności od wersji językowej strony w jej nagłówku znajdzie się informacja o języku, w jakim strona została utworzona. Ponieważ przewiduje się różne wersje językowe stron, informacja o języku znajdzie się w nagłówku strony a nie w nagłówku http. Dla języka polskiego: <meta http-equiv= Content-Language content= pl /> Dla języka angielskiego: <meta http-equiv= Content-Language content= en /> Dla innych języków użyte będą odpowiednie dwuliterowe kody. Kody języków muszą być zgodne z normą ISO 639. Dopuszcza się możliwość określenia odmiany języka np.: <meta http-equiv= Content-Language content= fr ca /> dla języka francuskiego używanego w Kanadzie. W przypadku wykorzystania więcej niż jednego języka na jednej stronie, np. dla języka polskiego i angielskiego: <meta http-equiv= Content-Lanquage content= en, pl />

5 2.8. Sieci społecznościowe Ze względu na rozwój sieci społecznościowych i ich znaczący wpływ na promowanie stron w internecie należy umieścić tagi odpowiadające za prawidłowe opisywanie obiektów na portalach tj. facebook i twitter Opengraph Protokół wykorzystywany m.in. przez Facebooka. Wymagane tagi to: og:title tytuł obiektu, w przypadku stron PAP taki sam jak tytuł strony og:type typ obiektu, zgodny z listą typów Open Graph, w przypadku PAP do większości będzie podstron będzie pasowała wartość: article lub website. Pełna lista typów jest dostępna w dokumentacji protokołu og:image - adres URL zdjęcia reprezentującego obiekt, minimalny rozmiar zdjęcia to 50x50 pikseli. Jeżeli obiekt nie jest powiązany z żadnym obrazkiem powinien wskazywana logo og:url adres URL strony reprezentującej obiekt. fb:admins lub fb:app_id wymagane przez facebooka, rozdzielona przecinkami lista Facebook ID administratorów stron lub ID aplikacji Facebook Platform. Jako minimum wymagane jest Facebook ID). Tag służy do administrowanie i śledzenia statystyk strony. Opcjonalne metatagi, które powinny być zawarte na stronach og:site_name możliwa do odczytania przez człowieka nazwa witryny, np. Polska Agencja Prasowa og:locale - kod języka użytego na stronie, jeżeli strona jest dostępna w różnych językach to należy wskazać je w polu og:locale:alternate np. <meta property="og:locale" content="pl_pl"> <meta property="og:locale:alternate" content="en_gb"> og:description - krótki opis strony, może być analogiczny do metadanej description. og:audio, og:video link do powiązanych z obiektem materiałów wideo lub audio Twitter Card Metatagi potrzebne do integracji z Twitterem. Dla typu karty summary muszą być zawarte następujące: twitter:card typ karty: summary, photo lub video. twitter:title tytuł wyświetlany w Twitter Card, może być taki sam jak tytuł strony

6 twitter:description - streszczenie, opis zawartości strony, do 200 znaków, może być analogiczny do metadanej description twitter:image adres URL obrazka, który chcemy umieścić na karcie, jeżeli artykułem na stronie nie jest powiązany żaden obrazek można wstawić tu url loga twitter:site - nazwa profilu w serwisie Twitter, poprzedzona twitter:url - adres URL strony Dla innych typów kart metatagi mogą ulec zmianie. Dokładna dokumentacja znajduje się pod adresem Google+ Jeżeli istnieje profil firmy na Google+ należy połączyć stronę z tym profilem. Np. Dla <a href=" rel="publisher" /> 3. Informacje o wybranych tagach w sekcji <body> 3.1. Nagłówki <hx> Nagłówki, wyróżnienia część tekstu. Nagłówek najwyższego rzędu <h1> powinien zawierać główny tytuł strony. Każda oddzielna strona musi zawierać tylko jeden znacznik <h1>. Nie powinno się używać wiele razy <h1> na tej samej stronie (html5 pozwala na umieszczenie kilku <h1> na jednej stronie, np. oddzielny dla każdego tagu <section>). Do wyróżnienia większej ilości nagłówków należy korzystać ze znaczników h poziomów 2-6 w zależności od ich ważności Elementy graficzne <img> Wszystkie elementy graficzne muszą posiadać niepusty atrybut alt opisujący to co widać na obrazie. Dodatkowo powinien być uzupełniony atrybut title zawierający dodatkowe informacje o obrazku wyświetlane po najechaniu na niego kursorem Tagi w html 5 W html5 pojawiły się nowe tagi określające strukturę dokumentu m. in.: section, article, aside, header, footer, nav, figure. Na razie roboty indeksujące nie traktują tych znaczników jako główne źródło informacji o zawartości strony. Można przypuszczać, że zmieni się to z

7 czasem wraz popularyzacją standardu przez web developerów oraz rosnącą ilością stron w html5. Używanie tych tagów nie wpływa negatywnie na pozycję strony w wyszukiwarkach. 4. Duplicate content Należy unikać powielania stron - dostępności danej strony z taką samą treścią pod wieloma adresami. W celu uniknięcia oznaczenia takich stron przez wyszukiwarki jako duplicate content należy przekierować (redirect 301) je do preferowanej wersji strony. Trzeba zwrócić uwagę czy domeny występują tylko w jednej wersji: z WWW lub bez i w odpowiednim przypadku zrobić przekierowanie do preferowanej. Jeżeli z jakiegoś powodu nie jest możliwe przekierowanie albo adresy url są generowane dynamicznie i są w nich przekazywane parametry należy wskazać wyszukiwarkom wersję preferowaną przy pomocy metatagu [rel=canonical]. 5. Nazwy plików Nazwy plików dołączonych do serwisu (zdjęcia, dokumenty itp) powinny być ściśle powiązane z prezentowaną treścią. Nazwy plików nie powinny zawierać polskich znaków. Białe znaki powinny być zastępowane myślnikiem. 6. Adres url Istotnym elementem z punku widzenia SEO jest struktura URL. Link nie powinien zawierać nazw zmiennych i przekazywanych w widoczny sposób parametrów, operatorów przypisania wartości i tym podobnych szczegółów technicznych. Tego typu operacje muszą być przykryte tak zwanym przepisywaniem linków, które ukryje nazwy zmiennych i operacje przypisania zmiennym wartości. Adres musi zawierać podstawowe słowa wskazujące na treść obiektu. Najprostsze rozwiązanie tytuł obiektu. Polskie znaki diakrytyczne muszą być zamienione na ich odpowiedniki z alfabetu łacińskiego a słowa połączone myślnikami. Wszystkie znaki specjalne typu kropka, przecinek, znaki białe etc. powinny być również zamieniane na myślniki. Nie powinny występować dwa myślniki pod rząd. Url powienien zawierać wyłącznie małe litery. Ze względów technicznych link będzie zawierał dane umożliwiające jednoznaczną identyfikację obiektu umieszczoną w sposób zgodny z pierwszym akapitem tego rozdziału. Powinien zawierać także słowa kluczowe danej strony. Struktura url powinna odzwierciedlać strukturę produktów PAP. Oznacza to, że po adresie domeny PAP musi wystąpić słowo określające produkt lub grupę produktów. Należy przeprowadzić wewnętrzne rozpoznanie, jakie słowa będą najlepsze. Poniżej przedstawiono przykładową strukturę URL: obiektu)

8 Przykłady URL zbudowane według powyższych zasad przedstawione są poniżej. Dane identyfikacyjne zostały zastąpione id depeszy Należy uwzględnić możliwość usunięcia przez użytkownika części adresu URL. Użytkownik może usunąć część adresu URL mając nadzieję znalezienia ogólnej zawartości. W związku z powyższym adresy powinny mieć postać hierarchiczną. Tzn po wejściu na adres powinny pojawiać się najnowsze depesze itp. Adres url powinien być czytelny zarówno dla użytkowników jak i robotów. 7. Robots.txt Serwisy powinny zawierać plik robots.txt informujący roboty wyszukiwarek, które strony można indeksować. Plik robots txt powinien przepuszczać roboty najbardziej popularnych w wyszukiwarek: 1. google 2. bing (msn) 3. ask 4. netsprint 5. yahoo 6. yandex Robots.txt nie powinien dopuszczać do indeksowania stron administracyjnych, wyników wyszukiwarki itp. 8. Mapa witryny Witryna pap powinny zawierać mapę witryny sitemap.xml która ułatwia robotom indeksowanie stron. Jedna mapa jest ograniczony do linków i rozmiaru 10MB. Jeżeli serwis zawiera więcej podstron należy utworzyć sitemapindex zawierający listę map. Mapy stron powinny się automatycznie aktualizować o nową zawartość. 9. Pliki css oraz js Zewnętrzne pliki js powinny być scalone w jeden oraz skompresowane (do postaci minify - usunięte białe znaki). Zwiększa to szybkość ładowania strony przez co podnosi jej ranking. Podobnie należy postąpić w przypadku plików css.

9 Większość plików css i js (włącznie z zewnętrznymi bibliotekami jak np. jquery) na stronach pap.pl nie jest podłączona w postaci minify ale pełnej. Są za to cacheowane przez co nie są ściągane przy każdym odświeżaniu strony. 10. Strona błędu Należy przygotować użyteczną wersję stronę błędu 404, które zawiera następujące elementy: Nazwa firmy albo logo Przeprosiny za wystąpienie błędu Określenie możliwych powodów powstania błędu Mapa serwisu/główne menu nawigacyjne Wewnętrzna wyszukiwarka Kontakt do administratora serwisu Powinna zwracać nagłówek 404 Strona musi zwracać kod odpowiedzi http Urządzenia mobilne Witryny PAP powinny być responsywne, dostosowane do wyświetlania na urządzeniach mobilnych, uwzględniając ich wielką różnorodność. Ich wygląd powinien zależeć od wymiarów ekranu. Przy projektowaniu takich wersji należy uwzględniać specyfikę tego rodzaju urządzeń, którą można streścić w poniższych punktach: niewielkie ekrany o różnych rozdzielczościach; utrudnione wprowadzanie tekstu przez użytkownika; brak myszki (urządzenia wskazującego), co utrudnia aktywowanie (kliknięcie) linku bądź obiektu na stronie; połączenie internetowe jest zwykle wolniejsze niż w przypadku korzystania z internetu stacjonarnego; niektóre przeglądarki mobilne umożliwiają tylko pionowe przewijanie ekranu; korzystanie z mobilnego internetu może być związane z opłatami za transfer; mniejsza moc obliczeniowa urządzeń mobilnych w porównaniu z komputerami PC; mniejsza pojemność pamięci urządzeń mobilnych

10 Strony nie powinny zawierać elementów flashowych (urządzenia mobilne nie obsługująich) zamiast tego należy korzystać z możliwości html5 lub wstawiać zaślepki jpg. W każdym wypadku należy mieć na uwadze ograniczone możliwości urządzeń mobilnych, zwłaszcza w zakresie interakcji i wyświetlania. 12. Wspierane wersje przeglądarek Witryny internetowe PAP powinny poprawnie działać na aktualnych oraz najbardziej popularnych wersjach przeglądarek. Przy aktualizacji starych serwisów warto posiłkować się statystykami z jakich przeglądarek i ich wersji korzystają osoby odwiedzające witrynę. Są one dostępne w narzędziu Google Analytics.