Strony przyjazne SEO..

Poznaj DXPR BuilderBuduj stronySamouczek

Tu zbudujesz stronę jednej usługi tak, jak wyszukiwarki czytają najlepiej: tytuł strony jako jedyny nagłówek Heading 1, nagłówki po kolei pod nim, tekst alt na zdjęciu i przycisk mówiący, dokąd prowadzi. Użyj jej jako listy kontrolnej dla każdej publikowanej strony. Tytuły stron, opisy i URLe mieszkają poza kreatorem; ostatnia sekcja pokazuje gdzie.

Film buduje stronę urzędu „Apply for a resident parking permit”.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma zdjęcie pasujące do usługi.
  • Strona jest otwarta w kreatorze. Nową utworzysz w Content > Add content > Landing Page (/node/add/landing_page): wpisz jasny Title, taki jak „Apply for a resident parking permit”, i kliknij Save. Motyw drukuje ten tytuł jako nagłówek Heading 1 strony.

Krok 1: zacznij treść od Heading 2

Używaj nagłówków po kolei, aby strona czytała się jak konspekt. Motyw drukuje tytuł strony jako jej Heading 1, więc treść kreatora zaczyna się od Heading 2 dla głównych sekcji, z Heading 3 dla podsekcji. Heading 4 do 6 używaj oszczędnie.

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout.
  2. Kliknij + na sekcji i wybierz Text z karty Content.
  3. Wpisz „Apply in five minutes” i wybierz Heading 2 z listy nagłówków.
  4. W nowej linijce dodaj podsumowanie zwykłym tekstem: „Residents of zones A to D can apply online. Permits are issued within five working days.” Kliknij Save.

Tytułowi strony zostaw Heading 1. Aby nagłówek kreatora stał się nagłówkiem Heading 1 strony, ukryj najpierw tytuł motywu na tej stronie. Na DXPR CMS otwórz formularz edycji strony, otwórz DXPR Theme Settings, zaznacz Page Title w DXPR Hide Regions i kliknij Save. DXPR Theme już ukrywa tytuł na stronie głównej. Nigdy nie wybieraj poziomu nagłówka dla jego rozmiaru: rozmiar zmień opcją Font size w panelu Style elementu.

Krok 2: sekcja na szczegóły

  1. Najedź na sekcję i kliknij Add Section Below.
  2. Kliknij + na nowej sekcji i wybierz Row; powstaje z dwiema równymi kolumnami. Kliknij ikonę siatki (Column layout) na pasku sterowania wiersza, wybierz preset 2/3 + 1/3 i kliknij Save.

Nowe elementy lądują na górze kolumny. Dlatego trzy kolejne kroki wypełniają szeroką kolumnę od dołu: przycisk, podsekcja, potem nagłówek sekcji.

Krok 3: napisz opisowy tekst linku

Tekst linku mówi wyszukiwarkom, o czym jest cel. Unikaj „click here” i „read more”.

  1. Kliknij + w szerokiej kolumnie i wybierz Button.
  2. Ustaw Title na „Start your parking permit application”, Link na /parking/apply, a Type na Primary, a potem kliknij Save.

Krok 4: podsekcja Heading 3

  1. Kliknij + w szerokiej kolumnie jeszcze raz i wybierz Text; ląduje nad przyciskiem.
  2. Wpisz „What you need” i wybierz Heading 3.
  3. Wpisz dokumenty, po jednym na linijkę: „Proof of address”, „Vehicle registration document”. Kliknij Save.

Krok 5: nagłówek sekcji Heading 2

  1. Kliknij + w szerokiej kolumnie jeszcze raz i wybierz Text.
  2. Wpisz „Who can apply” i wybierz Heading 2.
  3. Dodaj zasadę, kto może wnioskować, w jednej linijce, a potem kliknij Save.

Krok 6: dodaj tekst alt do zdjęcia

Każde zdjęcie potrzebuje atrybutu alt opisującego jego treść.

  1. Kliknij + w wąskiej kolumnie i wybierz Image.
  2. Kliknij Select Image, przeszukaj bibliotekę mediów opcją Apply filters, zaznacz zdjęcie i kliknij Insert selected.
  3. Otwórz panel SEO i wypełnij Alt attribute: „Laptops, phones and cups of tea on a shared wooden desk”. Kliknij Save.

Tekst alt pisz dla osoby, która nie widzi zdjęcia. Pusty zostaw tylko przy zdjęciach czysto dekoracyjnych. Title attribute używaj tylko, gdy podpowiedź coś dodaje; nie zastępuje tekstu alt.

Krok 7: zapisz i podejrzyj

  1. Kliknij Save na pasku narzędzi DXPR Builder.
  2. Otwórz menu widoku (ikona oka), wybierz Preview i sprawdź, czy nagłówki czytają się po kolei.

Idź dalej

Niepokazane w filmie:

  • Rozmiar zdjęć: przeskaluj zdjęcia do szerokości wyświetlania przed wysłaniem; 1200 pikseli kryje pełną kolumnę. Image width zostaw na 100%, Image height puste, a każdy plik poniżej 300 KB, bo szybkość wpływa na ranking.
  • Linki do ignorowania: do strony logowania albo podobnej dodaj element Link, otwórz jego panel SEO i włącz Tell search engines not to follow.
  • Linki tekstowe: w elemencie Text zaznacz słowa i użyj przycisku linku na pasku narzędzi. Podlinkowane słowa trzymaj znaczące: „the permit zone map”, nie „here”.
  • Kotwice: otwórz More > Settings na sekcji, ustaw HTML ID na krótką nazwę małymi literami, taką jak who-can-apply, i podlinkuj do niej przez #who-can-apply.

HTML trzymaj semantyczny

Elementy Text, Button, Link i Image dają standardowe tagi <h1> do <h6>, <p>, <ul>, <a> i <img>. Używaj tych elementów do treści. Element HTML trzymaj na kod osadzeń, którego żaden inny element nie wyprodukuje.

Metadane i URLe

Tytuły stron, opisy meta i URLe mieszkają w Drupalu, poza kreatorem:

  • Moduł Metatag: ustawiaj tagi title, opisy i tagi Open Graph w Configuration > Search and metadata > Metatag (/admin/config/search/metatag) albo na stronę w formularzu edycji węzła.
  • Moduł Pathauto: buduj czyste URLe z tytułów stron w Configuration > Search and metadata > URL aliases > Patterns (/admin/config/search/path/patterns).

Efekt

Podgląd pokazuje tytuł strony jako jej nagłówek Heading 1, potem „Apply in five minutes” jako Heading 2 z podsumowaniem pod nim. W szerokiej kolumnie „Who can apply” wchodzi pierwsze, potem „What you need” z dwoma dokumentami i przyciskiem Start your parking permit application. Zdjęcie stoi w wąskiej kolumnie, a jego tekst alt pozostaje niewidoczny.

Jeśli nie widzisz strony jak na filmie

  • Nagłówki czytają się w złej kolejności. Nowe elementy lądują na górze kolumny, więc dodany ostatnio wchodzi pierwszy. Przeciągnij każdy element Text na miejsce za uchwyt na jego pasku sterowania.
  • Nagłówek wygląda na za duży albo za mały. Twój motyw wyznacza jeden rozmiar na poziom nagłówka. Zachowaj poziom pasujący do konspektu i zmień Font size w panelu Style elementu.
  • Nie możesz znaleźć tekstu alt na stronie. Tekst alt jest dla czytników ekranu i wyszukiwarek, więc strona nigdy go nie pokazuje. Otwórz ustawienia zdjęcia i sprawdź panel SEO.
  • Wyniki wyszukiwania pokazują zły tytuł strony. Kreator nie ustawia tagu title. Ustaw go modułem Metatag, jak opisano w Metadanych i URLach.

Co dalej?