SEO na etapie programowania projektów web, czyli jak tworzyć strony internetowe i aplikacje, aby optymalizacja SEO była poprawna od początku

1. SEO
Na etapie programowania projektu
Paweł Rabinek
Bydgoszcz, 18 czerwca 2014

2. Co można zrobić w trakcie tworzenia
Aby pozbyć się specjalisty SEO ;-)

3. Programista – projekt gotowy
http://funny-pics-fun.com/wp-content/uploads/Happy-Friday-4.jpg

4. Programista – po rozmowie z SEO
http://www.funnyjunkz.com/wp-content/uploads/2007/08/funny-baby-picture-angry-baby.jpg

5. Specjaliści SEO są upierdliwi ;-)
Ale można się z nimi dogadać

6. Optymalizacja meta danych
Tytuł, opis, słowa kluczowe
#1

7. Meta dane – rich snippet
Snippet
Edycja

8. Atrakcyjny rich snippet
Wpływa na CTR i na pozycję
!

9. <title>
• Unikalny
• Generowany dynamicznie
• Możliwość edycji
• Zazwyczaj ~70 znaków
• <title>Tytuł strony - Nazwa strony</title>

10. <meta name=„description”…
• Unikalny lub pusty
• Generowany dynamicznie (przy dużych projektach)
• Możliwość edycji
• Zazwyczaj 100 – 160 znaków

11. <meta name=„keywords”…
• Pusty
• Możliwość edycji
• Brak znaczenia w wyszukiwarce Google

12. Podgląd meta danych
http://www.google.com/webmasters/tools/richsnippets http://www.seoptimer.com/

13. Optymalizacja widoków
Nagłówki, obrazki itp.
#2

14. Nagłówki <h1>
H1
H2
H3
http://themeforest.net/item/corporate-style-deluxe/16029

15. HTML5 a wiele <h1>
• Tak, tak – wiem, że można wiele H1 ;-)
• http://youtu.be/GIn5qJKU8VM

16. <strong>
<span style=„font-weight: bold”>

17. <img>
<img src=”truskawki.jpg” alt=”Polskie truskawki w koszykach” />
http://www.flickr.com/photos/beneekhof/9191034867/

18. Listy, kategorie, tagi, taxonomie…
• Także trzeba optymalizować
• Warto dodać pole opisowe,
które pojawia się nad listą

19. Przyjazne adresy URL
Im prostsze, tym lepsze
#3

20. Adresy URL – „SEO friendly”
• Prosty
• Krótki
• - zamiast _
• Bez znaków specjalnych
• http://moj-sklep.pl/produkt/samsung-galaxy-s5
• http://moj-dziennik.pl/zaproszenie-na-meetup-bydgoszcz/

21. Adresy URL – „SEO friendly”
Dobrze
/lozka-drewniane/
Źle
/Luzka-Drewniane
/łóżka-drewniane
/lozka_drewniane
/lozka-drewniane.html
/lozka/lozka-drewniane/
/lozka-drewniane

22. Kanoniczność adresów URL
Aby robot wiedział co jest ważne
#4

23. Kanoniczność adresów URL
• http://www.mojafirma.pl/ - OK
• http://www.mojafirma.pl/index.php
• http://www.mojafirma.pl/index.php?id=4
• http://www.mojafirma.pl/start.html
• http://mojafirma.pl/
• https://mojafirma.pl/
• itd…

24. Kanoniczność adresów URL
Duplikaty i błędy
Filtry i sortowanie

25. Kanoniczność adresów URL
<link rel=„canonical”…
<meta name=„robots”…

26. Przekierowania HTTP
•Przenosi moc SEO
•Trwały
HTTP/301
•Nie przenosi mocy SEO
•Tymczasowy
HTTP/302

27. Przekierowania HTTP
Przekierowanie 301 w PHP
<?php
// 301 Moved Permanently
header("Location: /foo.php", TRUE, 301);
?>

28. Kanoniczność adresów URL
Działanie tylko w jednej domenie (hoście)
RewriteCond %{HTTP_HOST} !^www.domena.pl$
RewriteRule ^(.*)$ http://www.domena.pl/$1 [R=301,L]

29. Indeksowanie stron
Kontrola dostępu dla robotów
#5

30. Gdzie nie wpuszczać robota?
Konto CMS Koszyk
Wyszukiwarka Foldery Drukuj itp.

31. Meta – jak nie indeksować stron
http://www.clker.com/cliparts/m/I/n/c/R/q/happy-robot-hi.png
<meta name=„robots” content=„noindex” />
Uwaga - Nie łączyć noindex z canonical!

32. Robots.txt – jak nie wpuszczać robota
http://www.clker.com/cliparts/m/I/n/c/R/q/happy-robot-hi.png
# Do wszystkich robotow:
User-agent: *
# Nie przejmuj się tymi linkami:
Disallow: /basket.php
Disallow: /admin/
Disallow: /*.xls$

33. Czy wszystko działa?
http://home.snafu.de/tilman/xenulink.html
• darmowy, ignoruje robots.txt
Xenu's Link Sleuth
• darmowy
GsiteCrawler
• płatny, dodatkowe możliwości
Screaming Frog SEO

34. Paginacja
1, 2, 3, 4, 5…
#6

35. Pierwsza strona paginacji
/lozka-drewniane/ (nie ma „1”)
/lozka-drewniane/2/
/lozka-drewniane/3/
Itd..

36. <link rel=„prev/next”…
http://googlewebmastercentral.blogspot.com/2011/09/pagination-with-relnext-and-relprev.html

37. Paginacja – częste błędy
Duplikat pierwszej strony
Rel=„canonical” do pierwszej strony
Meta noindex/nofollow dla paginacji

38. Obsługa błędów
HTTP 404, 500
#7

39. Pozorne błędy 404

40. Nagłówek 404
Wysłanie nagłówka HTTP/404
<?php
header("HTTP/1.0 404 Not Found");
?>

41. Koszyk zakupowy
E-commerce
#8

42. Dodawanie do koszyka
•okForm
•źleLink
http://cdn.business2community.com/wp-content/uploads/2013/05/add-to-cart-red.png

43. Koszyk
http://cdn.business2community.com/wp-content/uploads/2013/05/add-to-cart-red.png
Noindex dla koszyka
i procesu zakupowego

44. Widok „Dziękujemy za zakup”
<!-- Google Code for Purchase Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "Purchase";
if (10.0) {
var google_conversion_value = 10.0
}
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
Możliwość wstawienia kodów
konwersji/celu

45. Microdane
Dane zrozumiałe dla robota
#9

46. Microdane produktu i oferty
Nazwa
Zdjęcia
Cena
Opinie
Dostępność

47. Microdane produktu i oferty
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Smartfon Samsung I9505 Galaxy S4 Czarny Klasa premium</span>
<img itemprop="image" src="telefon.jpg" />
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Ocena <span itemprop="ratingValue">4.5</span>/5
na podstawie <span itemprop="reviewCount">5</span> opinii
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Cena <span itemprop="price">1599,00</span>
<link itemprop="availability" href="http://schema.org/InStock" />Dostępny
</div>
</div>

48. Microdane produktu i oferty

49. Najczęściej wykorzystywane microdane
Produkty/Oferty
Dane firm
Opinie
Wydarzenia
Przepisy
Video

50. Więcej microdanych
Dokumentacja https://schema.org/
Testowanie http://www.google.com/webmasters/tools/richsnippets

51. Szybkość
Szybkość strony wpływa na SEO
#10

52. Szybkość wczytywania strony

53. Podstawy optymalizacji szybkości
Optymalizacja obrazów
Minimalizacja zapytań do serwera
• Image sprites
• Scalanie CSS/JS
Minimalizacja CSS/JS
Kompresja
Cache

54. Przydatne narzędzia SEO
Dla webmastera i programisty
#Extra

55. Google Webmaster Tools
https://www.google.com/webmasters/tools/

56. Xenu’s Link Sleuth
http://home.snafu.de/tilman/xenulink.html

57. Seoptimer.com
http://www.seoptimer.com/

58. Web-Sniffer.net
http://www.web-sniffer.net/

59. Web Page Test
http://www.webpagetest.org/

60. Dzięki za uwagę :-)
Paweł Rabinek
Web: www.redseo.pl
E-mail: pawel@redseo.pl
Znajdziesz mnie na Google+
Slajdy: slideshare.net/rabinek