Optymalizacja stron internetowych – poprawa struktury HTML

 

Poprawnie skonstruowana strona pomaga w uzyskaniu wyższej pozycji w wynikach wyszukiwania i jest lepiej dostępna. Im w prostszy sposób napiszemy strukturę strony, tym robot Google lepiej ją „zrozumie” i prawidłowo zaindeksuje. Jeśli będziesz stosować się do wytycznych Googla dotyczących struktury strony, masz duże szanse na wyższą pozycję w wynikach wyszukiwania Google. Przede wszystkim: Nie zapętlaj botów i nie generuj dużej liczby podstron – nie duplikuj stron ( łatwo to zrobić przy nawigacji fasetowej ).

Poza tym warto dostosować strukturę strony zgodnie z poniższymi wskazówkami:

  • Kod pisany zgodnie z wytycznymi organizacji W3C wpływa korzystnie na pozycję w wynikach wyszukiwania. Dodatkowo, Google lepiej rozumie strony, które są dobrze opisane, a gdy są dobrze opisane, prawidłowo je zaindeksuje.
  • Kod powinien przechodzić poprawnie walidację

​           CSS: https://jigsaw.w3.org/css-validator/

          HTMLhttps://validator.w3.org/

  • Stosuj semantyczne znaczniki HTML, usuń PUSTE znaczniki HTML 
  • Pisz skrypty javascript, trzymając się reguł dobrego i czytelnego pisania kodu, ogranicz ilość odwołań do DOM – trzymaj się dobrych praktyk pisania html, css, js
  • Usuń przestarzałe znaczniki ( np. <b>, <i>, <u>, <center>, <strike>, <big>….itd..)
  • Stosuj prawidłową kolejność nagłówków Hx
    • ​h1 najwyżej na stronie – tylko raz w obrębie dokumentu
    • h2-h6 – można stosować wielokrotnie, zachowując hierarchię
    • treść nagłówków powinny wypełniać: słowa kluczowe, teksty, które pomagają w identyfikacji struktury strony
    • nie przesadzaj z ilością nagłówków, czasem zamiast nich wystarczy <strong> lub <em>
  • Unikaj zamieszczania ważnych informacji w elementach ukrytych (:hover, visibility:hidden, display:none i ukrywanych js-em). Google renderuje strony i nadaje mniejszy priorytet treściom, które są ukryte (np. za zakładkami). Treści istotne powinny być widoczne bez jakiejkolwiek interakcji użytkownika ( kliknięcia w button, przełączenia zakładki itp.) 
  • Tabele powinny mieć określony tytuł <caption>
  • Zoptymalizuj selektory CSS

    System stylów dzieli reguły CSS na cztery główne kategorie:

    1. ID – selektory ID, których nazwa poprzedzona jest znaczkiem hash „#”, a w znaczniku posiadają atrybut id (np. <div id=”container”></div>) i mogą być raz użyte w obrębie dokumentu
    2. CLASS – selektory klasy, których nazwa poprzedzona jest znakiem kropki (.klasa), a w znaczniku HTML posiadają atrybut class ( np. <nav class=”main”></nav> ), nazwa klasy może być użyta w obrębie dokumentu wielokrotnie i do wielu różnych znaczników, dzięki czemu styl możemy nadać wielu różnym elementom         ( <p class=”red”>, <span class=”red”> – poprawnie )
    3. TAG – selektory tagów, są to selektory bez klas i id, klasyczne np. p, span, i, td, ul, img
    4. UNIWERSALNE – to selektory nie będące tagami, wszystkie pozostałe reguły, np. atrybuty, pseudoklasy

    Selektor kluczowy to ostatnia część reguły CSS (część, która pasuje do dopasowywanego elementu, a nie przodków), np selektorami kluczowymi wyrażeń :  a img, ul li a, div > p, h1 + title { … }

    są: img, a, p, title.

    • możliwie najczęściej stosuj reguły ID i klas – to najbardziej szczegółowe selektory i są najbardziej wydajne
    • nie łącz reguł ID z nazwami klas lub tagów

               buton#register {…}    // tag button łączony jest z id

    .oferts#ofert-1 {…}    // klasa łączona z id

                PRAWIDŁOWO:

                #register {… }

    #ofert-1 {…}

    • Nie łącz reguł klasy z nazwami tagów, np. <p class=”alert”>tekst</p>

    p.alert { margin-bottom: 20px; }

    // nie ma potrzeby dodawać p przed klasą bo nazwa klasy wystarczająco dobrze identyfikuje o którą chodzi. Trzeba tylko uważać, przy stosowaniu tych samych klas do różnych tagów, wtedy tag należy przed nazwą klasy wpisać.

    .alert-p { margin-bottom: 20px; }

    .marginBtm { margin-bottom: 20px; }

    • Unikaj reguł uniwersalnych

          input > [checked=”checked”] { … }

    • Stosuj szybkie ścieżki – krótkie i skondensowane style, najbardziej specyficzne, konkretne kategorie klasyfikacji stylów (id, klasy), jak tylko możliwe. NAJWIĘKSZYM POWODEM SPOWOLNIENIA CSS JEST ZBYT WIELE REGUŁ KATEGORII TAGÓW (np..container table tr td a span )
    • Unikaj selektora potomka –   JEST NAJDROŻSZYM SELEKTOREM CSS, zwłaszcza, jeśli selektor jest w kategorii tagu lub kategorii uniwersalnej, jest ustawiony najbardziej po prawo i  jest dużo takich elementów na stronie.
    • Zamiast pisać:

            przodek1 przodek2 … potomek { cecha: wartość }

      Zapisz, jak trzeba, dodaj klasę/id

      rodzic > dziecko { cecha: wartość }

      • Unikaj używania selektora dziecka z regułami 

      kategorii tagów. Lepiej selektorowi nadać klasę.     

      table tr td input[type=”text”] span { … }

      Przykład

       td.elem > input[type=”text”] { }

      table tr td > input[type=”text”]  { … }

      • Pozwól na dziedziczenie cech –   niektóre selektory dziedziczą od rodzica w dół określone cechy, np. lista <ul><ol> pozwala na dziedziczenie stylu np. wypunktowania obrazkiem – Zamiast np. ustawiać znacznik i obraz na początku każdego elementu listy (<li>), można ustawić go na elemencie rodzica (<ul>) ponieważ właściwość ta jest dziedziczona do wszystkich elementów listy. ul { list-style-image: url(obraz.png) }
      • Unikaj specyficznych tagów i właściwości ( np. prefixy, tagi eksperymentalne) – chyba, że to konieczne. Nieaktualne USUWAJ. 

      ​Przykład: border-radius

      wcześniej używany z prefiksami: -webkit, -moz, -ms, -os

      • Unikaj obciążających efektów CSS3 np. opacity, animation.
      • Stosuj Shorthandy

      .item {

      margin-left: 20px;

      margin-right:5px;

      margin-top:20px;

      margin-bottom: 10px;

      } 

      => zamień na:   

      .item {   margin: 20px 5px 10px 20px }

      • przejdź na SASS ( i rozbij style na moduły )

       

      • Unikaj inline’owych stylów i javascriptów
      • Prawidłowo dodawaj obrazy
      • Każdy obraz musi posiadać atrybut ALT –  Dla każdego obrazu stosuj opis alternatywny  – wykorzystaj tekst, który spełnia taką samą funkcję jak obraz, np. Dla obrazku ikony znaku zapytania pasującym opisem alternatywnym byłby „pomoc”

      ​          <img src=”help.png” alt=”pomoc”>

      Nie upychaj słów kluczowych w atrybucie ALT.

      • Stosuj opisowe i nie za długie nazwy obrazów. 

      ​           Dobrze: „czerwony-samochod-wyscigowy.jpg” , Źle : „DSC00001.jpg”

      • Określ szerokość i wysokość obrazka na stronie, np. <img src=”obraz.png” width=”350″ height=”200″>
      • Do wyróżnienia tekstu stosuj <strong> zamiast <b>, <em> zamiast <i>
      • Zastanów się nad strukturą folderów. Podobne obrazy powinny być zapisane w tym samym miejscu. Np. możesz mieć jeden katalog dla miniaturek a drugi dla obrazów pełnowymiarowych lub można utworzyć oddzielne katalogi dla każdej kategorii obrazów (np. sport, zdrowie, dziecko, celebryci, aktorzy itp.). Jeśli strona zawiera obrazki dla dorosłych, należy umieścić je w jednym lub kilku folderach i oddzielić je od pozostałych zdjęć.
      • Unikaj maskowania czyli prezentacji innej treści dla użytkownika i Googlebota.
        • ​nie wyciągaj tekstu poza ekran przeglądarki za pomocą text-indent i dużych wartości
        • nie używaj kolorów fontów takich jak kolor tła
      • Stosuj HTTP Vary: User-Agent jeśli serwujesz inne wersje strony dla różnych agentów za pomocą Dynamic Serving. Google nie potraktuje wtedy tego jako maskowanie treści.
      • Elementy nawigacji umieść w <nav> –  jako listę, jako opisu używaj linków tekstowych. Linki powinny prowadzić do najważniejszych obszarów strony, a treścią linków powinny być najważniejsze słowa kluczowe adekwatne do stron, do których kierują.
      • Stosuj paginację – dziel treści na mniejsze fragmenty ( np. strona wyników wyszukiwania, indeks artykułów, ogłoszeń)
      • Na stronach paginacji używaj <link rel=”prev/next” href=”link do poprzedniej/następnej strony”>umieszczonych w sekcji <head>. Dzięki nim wskażesz relację pomiędzy URLami paginacji. Użycie ich stanowi dla Google wyraźną wskazówkę o tym, że strony te mają być traktowane jako sekwencja logiczna. Wtedy wszystkie podstrony paginacji Google uznaje za jedną. 
      • rawidłowo buduj URLe – im krótszy url tym lepiej
        • Unikaj zagnieżdżeń rootów i parametryzowania dynamicznego (np. http://mojadres.pl?p=43&s=02 ) – urle z parametrami tworzą duplikaty treści – wtedy – stosuj cannonical lub name=”robots” content=”noindex” )
        • Unikaj polskich znaków – polskie znaki zamień na odpowiedniki bez ogonków ( np. ą => a )
        • Unikaj znaków specjalnych, zakazanych przez oficjalną dokumentację RFC :
          ":" , "/" , "?" , "#" , "[" , "]" , "@" , "!" , "$" , "&" , "'" , "(" , ")" , "*" , "+" , "," , ";" , "="
        • Wszystkie znaki specjalne  zamień na myślniki. Jeśli myślnik jest poprzedzony spacją – zamień na jeden myślnik ( np. bialo –  czerwony na bialo-czerwony, a nie bialo–czerwony)
        • Wszystkie wielkie litery należy zamienić na małe litery, a gdy ktoś w URLu wpisze wielką literę (np. /toyota/AVENSIS/ należy go przekierować za pomocą 301 na /toyota/avensis/)
          • Stosuj przekierowanie 301 z trailing slashes ( jeśli ktoś wpisze adres hp/toyota/avensis powinien zostać przekserowany na hp/toyota/avensis/
          • Nie potrzeba zamieszczać rozszerzeń plików w urlu, tzn. „.php”, „.html”
          • Słowo kluczowe powinno być jak najbliżej roota
          • Idealny przykład URLa: www.domena.pl/folder/opisowa-nazwa-produktu
          • Link do dokumentacji RFC: https://tools.ietf.org/html/rfc3986
        • Buduj prawidłowe odnośniki ( linki )
          • ​Stosuj opisowe i użyteczne anchor texty, zawierające słowo kluczowe <a href=”link” title=”opis”>anchor tekst</a>
          • Usuń lub popraw niedziałające odnośniki
          • W atrybucie „href” linku nie używaj hasha „#”. W takiej sytuacji rozważ użycie znacznika <button>
          • Usuń z linków inline’owy javascript
          • Pozbądź się linków, które nie przenoszą żadnej treści – np. puste linki nawigacji fasetowej, link, który prowadzi do pustej strony, nie powinien być linkiem tylko tekstem.
          • Staraj się nadawać linkom zewnętrznym rel=”nofollow”:

<a href=”link” rel=”nofollow”>anchor</a>

  • Umiejętnie stosuj linki „dofollow” i „nofollow” – Linki „dofollow” przekazują moc pozycjonującą do linkowanej strony a „nofollow” nie przekazują.  Stosuj linki „nofollow” dla treści nieistotnej dla SEO i tych, których indeksować nie należy ( linków w treści tworzonych przez użytkowników (komentarze, opinie, dyskusje, fora) oraz dla linków kierujących do np. logowania, rejestracji, panelu administracyjnego, przywracania hasła, polityki prywatności )
  • Stosuj breacrumbsy
    • Ostatni element breadcrumbsów nie powinien być linkiem
    • Ostatni element powinien być w postaci tytułu strony, na której znajduje się użytkownik

  • Przygotuj stronę obsługi błędu 404 
    • Powinna zwracać kod serwera 404 ( czasem zdarza się, że zwraca 200)
    • Powinna zawierać link do strony głównej oraz linki do najpopularniejszej lub powiązanej treści
    • Unikaj zdawkowych treści w postaci : „Nie znaleziono”, „404”. Utrzymaj wygląd zgodny z całą witryną.
    • Używaj strony 410 – treść nie istnieje  – dla stron celowo usuniętych z serwisu, ponieważ dla googlebota jest to informacja, żeby nie podejmował ponownej próby dostania się do tej strony.
  • Stosuj przekierowania 301 i 302
    • 301 to przekierowanie stałe, które informuje Google o tym, że strona jest w nowym miejscu
    • 302 to przekierowanie tymczasowe, które informuje Google, że strona wróci pod adres z którego idzie przkierowanie

 

  • Wykorzystaj Rich Snippets  do zamieszczenia mikrodanych. 
  • Rich Snippets to dodatkowe informacje w postaci tekstu lub grafiki, które wyświetlają się w wynikach wyszukiwania Google. Przyciągają wzrok użytkownika, a tym samym szansę na wejście na stronę. Rich Snippets mogą zawierać informacje o cenie i dostępności produktu w sklepie internetowym, liczbie i średniej ocenie danego produktu przez internautów na podstawie recenzji, czas trwania wykonania jakiejś czynności (np. gotowanie potrawy), informacje o firmie i wiele innych.

    Można je uznać, jako dodatkowe narzędzie, które zwiększa klikalność w wynikach wyszukiwania.

    Typy informacji, które mogą być wykorzystane jako Rich Snippets:

    • Opinie i recenzje
    • Oceny w opiniach
    • Osoby
    • Zdarzenia
    • Przepisy
    • Zakupy i produkty
    • Menu (breadcrumbs)
    • Filmy wideo

    Schema.org tworzy uporządkowany schemat znaczników danych, który jest obsługiwany przez większość głównych wyszukiwarek. Dodanie schematu znaczników zgodnie ze schema.org może pomóc wyszukiwarkom internetowym lepiej zrozumieć temat i treść witryny, tym samym zwiększając szanse wyświetlenia rich snippets w wynikach wyszukiwania.

    Metody oznaczania danych:

    1. Mikroformaty
    2. Mikrodane
    3. RDF

Dodaj komentarz