Zadbaj o swoją witrynę

Jest to druga część poradnika z zakresu optymalizacji stron internetowych, którą tworzę w ramach swojego dziennika.
W części pierwszej (którą możesz znaleźć tutaj) skupialiśmy się głównie na kwestii minimalizacji czasu wczytywania strony.
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 (a jeszcze lepiej na adres root domeny np. http://kmagdziarz.pl) są dość istotne.
Poniżej umieszczam formuły, które należy wkleić w plik .htaccess

    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:

<!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="Krystian Magdziarz - Programowanie - Marketing - SEO" />
<meta property="og:url" content="http://kmagdziarz.pl/" />
<meta property="og:site_name" content="Krystian Magdziarz Portfolio" />

<meta name="twitter: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 name="twitter:title" content="Krystian Magdziarz - Programowanie - Marketing - SEO" />

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:

 <div clas="zarabiam" style="margin-left:20px;margin-right:40px" />

I ten sam kod przy użyciu pliku arkuszów styli .css

/* 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:

<div id=”hcard-kmagdziarzpl” class=”vcard”>
<strong><span class=”org”>Pozycjonowanie witryn</span></strong>
<span class=”fn”>Krystian Magdziarz</span>
<span class=”street-address”>ul. Super Ulica 102</span>
<span class=”postal-code”>88-300</span> <span class=”locality”>Kozibrodki</span>

<a class=”email” href=”mailto:cos@cos.pl”>kmagdziarz@mojmail.com</a>
tel. <span class=”tel”>692 00 00 00</span>
</div>
X. Doctype (HTML5)

W wersji HTML5 znacnzik ten wygląda następująco:

<!DOCTYPE html>
XI. Określenie języka strony / Określenie rodzaju kodowania

Do znacznikóœ nagłówka dodajemy następujące;

<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

<strong>

oraz

<b>

.

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.

Jedna myśl na temat “Zadbaj o swoją witrynę

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *