Webflow – optymalizacja seo

Optymalizacja SEO – jest to dość istotne działanie pod kątem wyszukiwarek, mediów społecznościowych oraz dowolnego rodzaju udostępniania.

Z menu bocznego wybieramy Pages, wybieramy naszą stronę i obok jej nazwy, po najechaniu pojawia się ikonka ustawień. Tu znajduje się sekcja SEO settings gdzie wprowadzamy:

1. page title
2. page description

Poniżej, w sekcji Open Graph Settings możemy ustawić jak informacje o naszej stronie będą wyświetlane podczas udostępniania treści na Facebooku, X (Twitterze), LinkedIn i Pinterest. Możemy zaznaczyć by były tak samo jak w sekcji SEO settings lub ustawić osobne.

Oraz dodajemy Open Graph Image URL w wymiarach 1200x630px.

Pobranie ścieżki do pliku w Webflow: w sekcji Assets, po najechaniu na wybrany plik graficzny, klikamy ikonkę ustawień, pojawiają się nam dodatkowe informacje, jak: wymiary, wielkość pliku, miejsce na tekst ALT oraz ikona (ikona łańcuszka) do skopiowania ścieżki do pliku.

Tak skopiowaną ścieżkę możemy wkleić w polu OG-image url.

Sprawdzenie czy ustawienia dobrze się zapisały i nasza strona poprawnie wyświetla się w Social mediach:

• X (twitter) cards validator
• facebook devtool

Dodanie tagu ALT do obrazków

Aby nasza strona była poprawnie pozycjonowana oraz była przyjazna dla czytników stron przeznaczonych dla osób słabowidzących i niedowidzących, każda użyta grafika powinna być pierw oznaczona jako Descriptive (opisowa) lub Decorative (funkcja czysto dekoracyjna, bez znaczenia dla treści). W przypadku zaznaczenia pierwszej opcji czyli grafik które niosą również treść wizualną, w polu wprowadzamy ich opis ALT.

Pozwala to na wyświetlenie twojej strony, kiedy ktoś wyszukuje przez google image wybranych treści. Dobrze jest wiec pamiętać o tym dodatkowym opisie.

W panelu Webflow przechodzimy z bocznego menu do zakładki Assets (klawisz J) i tutaj, po najechaniu na grafikę widzimy ikonę ustawień, po jej kliknięciu w panelu jaki się pojawi możemy wprowadzić odpowiedni opis, lub zaznaczyć opcję Decorative dla elementów tylko ozdobnych.

Dodanie ikony strony

Favicon – 32 x 32px – to ikona która pojawia się w przeglądarce kiedy otwieramy naszą stronę.

Webclip – 256 x 256px – ikona, która pojawia się po zapisaniu witryny na ekranie głównym iPhone’a, jak również jest wyświetlana na ekranie głównym przeglądarki w sekcji z ostatnio odwiedzanymi witrynami.

Aby nasza strona miała unikatową ikonę, nie standardowe logo Webflow wykonujemy poniższe kroki:

1. otwieramy Site Settings
2. w sekcji General Settings przechodzimy do Icons
3. wgrywamy przygotowane wcześniej ikony, najlepiej w formacie .png w podanych wymiarach 32 x 32px oraz 256 x 256px
4. ustawienia zostają zapisane
5. publikujemy zmiany przyciskiem Publish -> Publish to selected domains

Ustawienie lokalizacji i języka strony

1. otwieramy Site Settings
2. w sekcji General Settings przechodzimy do Localization
3. wybieramy strefę czasowa – Time zone
4. wybieramy dwu-literowy kod języka naszej strony np. pl, en, de
5. publikujemy zmiany przyciskiem Publish -> Publish to selected domains

Badge – made in Webflow

Ta informacja pojawia się jako ikona na dole strony i informacja w kodzie HTML. Aby ja usunąć w opcjach General Settings powinnismy:

• zaznaczyć off przy polu Display „Made in Webflow” badge
• zaznaczyć off przy polu Display Webflow branding in HTML – jest to dostępne tylko po wykupieniu płatnego planu