Jest to druga część poradnika z zakresu optymalizacji stron internetowych, którą tworzę w ramach swojego dziennika.
Szybkość działania witryn jest niewątpliwie ważnym czynnikiem, lecz nie jedynym. W tej drugiej części chciałbym wykorzystać system do
analizy od
seoaudyt.clearsense.pl.
Powyższy system analizuje dla nas poszczególne komponenty strony, które postaram się w miarę możliwości opisać.
I. Widoczność/indeksowanie strony
Czynnik wskazujący czy nasza strona jest widoczna dla użytkowników oraz botów ją odwiedzających. Chodzi tutaj o poprawne zwrócenie kodu odpowiedzi serwera 200. Jeżeli ten punkt u Ciebie został zaznaczony na czerwono, należy sprawdzić conajmniej dwie rzeczy:
a) Dostępność serwera z sieci zewnętrznej,
b) Poprawność formuł w pliku
robots.txt.
II. Przekierowanie WWW / bez WWW ; Przekierowanie index.php / index.html ; Przekierowanie adresu IP na domenę
Przekierowania z www na bez www, bądź z index.php na index.html są dość istotne.
Poniżej umieszczam formuły, które należy wkleić w plik .htaccess
Kod:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
Następnie wszystkie wersje adresów url dodajemy do google dla webmasterów (http://, http://www , https://) i w tamtejszym portalu wybieramy preferowaną przez nas wersję.
III. Rozmiar strony ; Szybkość ładowania strony ; Liczba żądań HTTP
Te działania zostały przez mnie opisane w poprzednim poradniku, nie będę się więc tutaj nad nimi rozwodził.
Do ograniczenia liczby żądań HTTP niestety wymagana jest znajomość języków programowania oraz architektury wykorzystywanego przez nas oprogramowania.
IV. Meta Title ; Meta Description ; Meta Keywords
Czyli znaczniki wykorzystywane przez strone w celu informowania robotów o budowie naszej witryny.
Na swoich podstronach umieszczam następujące:
Kod:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Krystian Magdziarz - Programowanie - Marketing - SEO</title>
<meta name="description" content="Jestem pasjonatem zajmującym się programowaniem, marketingiem internetowym oraz optymalizacją i pozycjonowaniem stron internetowych. Codziennie odkrywam nowe oblicza informatyki i dziele się efektami mojej pracy, edukacji."/>
<meta property="og:locale" content="pl_PL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Opis Strony" />
<meta property="og:url" content="http://nazwastrony.pl/" />
<meta property="og:site_name" content="Opis Contentu" />
<meta name="twitter:description" content="Opis" />
<meta name="twitter:title" content="Tytul strony" />
Oczywiście zwracamy uwagę na długość tagów meta:descryption oraz meta:title, bo co za dużo to nie zdrowo
V. Obecność technologii Flash ; Obecność ramek
Tutaj system sprawdza czy w treści naszej strony nie znajdują się elementy spowalniające wczytywanie się strony. Ramki (iframe) mają to do siebie, że wczytują całą zawartość strony do której ramka prowadzi. W praktyce może to dla nas oznaczać spore problemy. Ramek zalecam używać tylko w ostateczności.
VI. Plik robots.txt ; Plik sitemap.xml
Plik robots.txt jest odpowiedzialny za informowanie robotów o dostępności poszczególnych modułów naszej witryny. Jeżeli chcemy wykluczyć niektóre z elementów z indexowania to możemy to uczynić w tym właśnie pliku.
Poprawny plik robots.txt możemy wygenerować na przykład
TUTAJ
VII. Atrybut ALT przy grafikach
Informacje na temat atrybutu alt możemy poczytać
TUTAJ. Służy on do nadania wlaściwego opisu obrazka i jest on prawdopodobnie wykorzystywany głównie przez Google grafika.
VIII. Użycie inline CSS
Inline CSS są to fragmenty kodu
CSS zawarte w znacznikach html.
Przykład niewłaściwego użycia znacznika html do stylizacji jego wyglądu:
Kod:
<div clas="zarabiam" style="margin-left:20px;margin-right:40px" />
I ten sam kod przy użyciu pliku arkuszów styli .css
Kod:
/* Plik: style.css */
.zarabiam {
margin-left: 20px;
margin-right: 40px;
}
IX. Mikroformaty (znaczniki o odpowiednim formacie)
W 2009 roku pojawiła się innowacja w wynikach wyszukiwania. Google rozpoczął tworzenia własnych podsumowań zamiast używania meta description dla niektórych stron. Dzięki używaniu mikroformatów możesz skłonić Google, by np. przy wyszukiwaniu produktu pokazywał w opisie ocenę i fragment recenzji.
Znaczniki te mogą wyglądać np. tak:
Kod:
<div id=”hcard” class=”vcard”>
<strong><span class=”org”>Pozycjonowanie witryn</span></strong>
<span class=”fn”>Imie Nazwisko</span>
<span class=”street-address”>ul. Super Ulica 102</span>
<span class=”postal-code”>88-300</span> <span class=”locality”>Miasto</span>
<a class=”email” href=”[email protected]”>[email protected]</a>
tel. <span class=”tel”>600 00 00 00</span>
</div>
X. Doctype (HTML5)
W wersji HTML5 znacnzik ten wygląda następująco:
XI. Określenie języka strony / Określenie rodzaju kodowania
Do znaczników nagłówka dodajemy następujące:
Kod:
<meta charset="utf-8">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
XII. Kod Google Analytics
Tak naprawdę mało istotne
.
XIII. Liczba błędów w kodzie wg W3C Validator
Sprawdzamy błędy znaczników HTML na stronie
https://validator.w3.org/.
XIV. Stosunek treści do kodu ; Liczba słów i znaków
Nie trzeba chyba tłumaczyć
.
XV. Nagłówki H1, H2 i H3
Google "propsuje" używanie nagłówków dla tytułów poszczególnych sekcji. Znaczniki html oczywiście tak jak każde inne możemy stylizować za pomocą kodu zawartego w pliku .css, używanie więc ich nie jest dla webdevelopera najmniejszym problemem.
XVI. Unikalność nagłówków H1, H2 i H3
Czyli poprostu unikanie duplicate content w obrębie nagłówków naszej witryny
XVII. Pogrubienia w tekście
Zgodnie z nowym standardem HTML5 pogrubienia ważnych elementów (dla nas ważne są słowa kluczowe) możemy dokonać za pomocą elementu
oraz
.
XVIII. Liczba linków wewnętrznych
W wordpressie znajduje się cała masa wtyczek wspierających poprawne linkowanie wewnętrzne. Google dobrze patrzy na podstrony zawierające przydatne dla użytkownika odnośniki, do treści w obrębie naszego serwisu.
XIX. Liczba linków wychodzących i ich atrybuty (dofollow, nofollow)
Oprogramowanie sprawdza tutaj czy liczba linków wychodzących jest naturalna (czyli nie za duża). Atrybuty dofollow i nofollow są drogowskazem dla robotów parsujących. Atrybut "dofollow" (który jest domyślny) jest nakazem jazdy w nakazanym kierunku, podczas gdy "nofollow" jest zakazem ruchu
XX. Adresy URL przyjazne wyszukiwarce
Czyli tzw. friendly url.
Uzyskamy je, budując w odpowiedni sposób naszą witrynę.
XXI. Długość adresu URL
Jeżeli nasz adres url jest za długi to tracimy na dwa sposoby.
Po pierwsze - użytkownik nie jest w stanie w prosty sposób wykonać wejście bezpośrednie na daną podstronę, gdyż nie będzie mógł zapamiętać poprawnej formy odnośnika,
Po drugie - google nas shejtuje
XXII. Zgodność z urządzeniami mobilnymi / Szybkość ładowania strony na urządzeniach mobilnych
Zajmowaliśmy się tym już we wcześniejszej wersji tego poradnika.
W erze bootstrapa nie jest to skomplikowana sprawa.
XXIII. Meta Viewport
Informacje na temat tego znacznika znajdziemy
TUTAJ
I to by było na tyle
. Przy odrobinie wprawy wszystkie punkty wykonamy w kilkanaście minut.
Na koniec dostajemy listę zadań do wykonania.