Utrata Formatowania Wtyczek WordPress po Aktualizacji

banner do wpisu wordpress tips przedstawiający logo

Dlaczego tracę Formatowanie Elementów Wtyczki po aktualizacji Wtyczki WordPress?

Jesteś developerem Wodpress i wiesz już jak dokonywać modyfikacji w plikach wtyczek oraz jak je stylować wedle własnych potrzeb. Udało Ci się przygotować piękną stronę z blogiem. Pojawiła się potrzeba oceniania twoich wpisów przez odwiedzających użytkowników, i tu z pomocą przyszła wtyczka kk ratings, zawierająca dane strukturalne schema.org. Instalujesz wtyczkę i okazuje się że jest brzydko ostylowana, kompletnie nie pasuje do twojego motywu. No to do dzieła! Bierzesz ją na warsztat, sprawdzasz za pomocą przeglądarki w trybie dla developerów – tak, wtyczka posiada własne arkusze stylów.  W tym przypadku plik: css.css. Używając dostępnych narzędzi graficznych przygotowujesz własne gwiazdki, implementujesz za pomocą arkusza stylów, zmieniasz pozycję wyświetlania gwiazdek na stronie, opis pod spodem i już, już… gotowe. Ostatnie opróżnienie cache, łyk kawy, ctrl+F5, renderuje się i gotowe. Jest pięknie, zgodnie z oczekiwaniami. Wieczorem siadasz żeby jeszcze raz nacieszyć się widokiem pięknych gwiazdek i sprawdzić dalsze możliwości. O! Jest aktualizacja wtyczki. Klikasz aktualizuj, odświeżasz stronę a tam co? Gwiazdki wróciły do stanu gorszego niż pierwotny, ponieważ zmienił się arkusz stylów css.css na zaktualizowany. Myślisz… Gdzie jest mój backup…

To jest właśnie częsty błąd developerski polegający na edycji elementów które  należą do folderu wtyczek, które będą aktualizowane i nadpisywane wraz z ich aktualizacją. Ale jak temu zaradzić?

Jak Zachować Formatowanie Wtyczek po ich Aktualizacji WordPress

Zawsze pamiętaj o motywie potomnym. W motywie potomnym, przechowywany własny arkusz stylów style.css, z poleceniem #import  da Ci możliwość dowolnego wpływania na każdy arkusz zawierający się w instalacji WordPressa.  Więcej o tym temacie znajdziesz tu. Posiadając własny arkusz możesz dowolnie wpływać na każdą klasę przypisaną do dowolnego obiektu.

Załóżmy że twoja wtyczka kk ratings zawiera arkusz stylów css.css w którym istnieje klasa .kk-star-ratings zawierająca dane o szerokości i maksymalnej wysokości obiektu. Wpisując tę klasę we własny arkusz stylów, w motywie potomnym, możesz nią manipulować, tak jak to robisz z poziomu wtyczki. Najistotniejsze jest jednak to że arkusz stylów pluginu może mieć priorytet nad twoim arkuszem motywu potomnego i wtedy trzeba wymusić konkretny styl.

Jak to zrobić? Wystarczy na koniec linijki kodu dodać polecenie !important, co wymusi priorytetowe renderowanie stylu właśnie z tą komendą. Przykład:

plik stylów wtyczki css.css

1
.kk-star-ratings{width:120px; min-height:48px;}

plik stylów w motywie potomnym:

1
.kk-star-ratings{width: 180px !important; min-height: 50px !important;}

Pomimo priorytetu arkusza wtyczki nad naszym ogólnym arkuszem, wpłynęliśmy na klasę, wymuszając jej bezwzględne przypisanie do obiektu

Oczywiście całą operację można przeprowadzić na różne sposoby, np podmienić arkusz stylów wtyczki za pomocą javascript, podmienić style w obiekcie również za pomocą java lub aktualizować wtyczki ręcznie. Dla niewielkich modyfikacji, taka opcja jest wystarczająca ale trzeba mieć na uwadze że dubluje ona fragment kodu odpowiedzialnego za renderowanie tego samego obiektu. Jeśli uznajesz ten artykuł za przydatny, proszę o ocenę.

 

 

Edycja kodu źródłowego witryny

Znajomość seo a html

Jeśli chcesz w pełni samodzielnie wykorzystać kompletny potencjał SEO swojej witryny, nie obędzie się bez edycji kodu źródłowego. W sieci naszpikowanej mnogością narzędzi, powiązanej ze sobą tysiącami developerów, pracujących nad wtyczkami, łatami, poprawkami, nawet jeśli uda ci się znaleźć właściwe narzędzie, nie obędzie się bez wszechogarniających Internet, błędów. Czym są błędy? Błędy to nic innego jak przeszkody które napotykamy wszędzie. Natomiast błędy w oprogramowaniu to doskonała szansa na rozwinięcie umiejętności pokonywania przeszkód związanych z programowaniem. Człowiek to maszyna organiczna, posiadająca szereg zaawansowanych algorytmów samokształcenia, funkcjonujących na podstawie analizowania przeszkód napotykanych w interwale istnienia, zwanym życiem. Skoro tu jesteś, cały czas poszukujesz sposobu na pokonanie pewnych przeszkód, zatem zaczynajmy.

Pierwsze kroki w kodowaniu i programowaniu

Localhost czyli od czego zacząć przygodę z kodowaniem?

Dawno, dawno temu, był sobie localhost – Lokalny magazyn plików. Otwierając każdy plik html zapisany na naszym dysku, otwieramy go z poziomu magazynu lokalnego. Jeśli plik jest osadzony na hostingu zewnętrznym, lokalnym magazynem będą zasoby w otoczeniu pliku, do których ma dostęp.

Kim jest Apache?

Aby nauczyć się kodować strony na poziomie umożliwiającym tworzenie zaawansowanych narzędzi, warto wiedzieć co nieco o serwerach na których strony się mocuje. Jeśli chcesz postawić swój pierwszy serwer, na którym możesz umocować swoją pierwszą stronę internetową z przypiętą domeną, polecam otwartego Apache’a. Fundacja Apache udostępnia oprogramowanie serwera umożliwiające obsługę na systemach operacyjnych Windows i Linux, a pobierzesz software Tutaj. Jeśli nie chcesz zawracać sobie tym głowy, przejdź dalej. W treści umieściłem kilka ciekawych rozwiązań dla programistów i koderów, które pomogą Ci w poruszaniu się po świecie html.

Jak uzyskać dostęp do plików źródłowych witryny?

Zanim rozpoczniesz zabawę w edycję źródła, upewnij się że masz dostęp do plików swojej witryny. Jeśli udało Ci się włączyć swój własny serwer lub kupiłeś go u dostawcy, to oczywiście masz dostęp, natomiast w witrynach i blogach stawianych na gotowych systemach takich jak WIX czy Blox, edycja źródła jest bardzo ograniczona, ponieważ nie są to systemy otwarte. Jeśli dzierżawisz hosting i ktoś inny opiekuje się plikami źródłowymi, poproś o dostęp do konta hostingowego. Możesz się do niego podłączyć bezpośrednio posiadając nazwę hosta, nazwę użytkownika i hasło, za pomocą np. darmowego oprogramowania FileZilla. Trochę więcej o FileZilla – to nic innego jak prosty wizualny menager plików osadzonych na hoście. Program możesz pobrać TU.

Dostęp do hosta umożliwi ci instalację dowolnego oprogramowania otwartego lub zamkniętego oraz edycję tego już zainstalowanego, które zechcesz edytować.

Mam już dostęp, jak edytować pliki witryny?

Załóżmy sytuację w której zaczynasz swoją przygodę z kodowaniem stron internetowych. Masz już swoją pierwszą witrynę opartą o CMS taki jak WordPress, czy Prestashop, z otwartą licencją (licencją darmowego oprogramowania, umożliwiającą dowolną edycję i wprowadzanie zmian), która została zainstalowana na twoim własnym hostingu, bądź hostingu który dzierżawisz ale masz dostęp do plików osadzonych na hoście. Z pomocą przyjdzie ci tutaj rozbudowany notatnik Notepad++, który umożliwia edycję kodu w bardzo wielu językach programowania z właściwym oznaczaniem składni, co znacznie ułatwia pracę z kodem. Dodatkowo notatnik można połączyć z hostem i edytować pliki bezpośrednio na serwerze. Możesz go pobrać Tu.

Od czego zacząć edycję witryny?

Edycję witryny zawsze rozpoczynamy od stworzenia kopii zapasowej. Jeśli nie zrobisz kopii, a podczas edycji czy wgrywaniu plików, coś się zepsuje, to niestety będzie potrzebna pomoc z zewnątrz. W niektórych przypadkach odzyskanie plików nie będzie możliwe, więc przygotuj się na to.

Popatrz na pliki, rozejrzyj się po strukturze katalogów. Sprawdź dokumentację swojego oprogramowania, testuj, testuj, testuj…

Jak wprowadzić zmiany na stronie, bez edycji plików źródłowych?

Każda przeglądarka internetowa posiada narzędzia deweloperskie, dzięki którym możesz dokonywać zmian na stronie, zmieniając poszczególne parametry stylów i kontenerów. W taki sposób możesz edytować Frontend (czyli to co widzi odbiorca witryny) bez narażenia strony na uszkodzenie, ponieważ nie zmieniasz nic w plikach, a jedynie w odczycie strony z przeglądarki. Aby podejrzeć kod źródłowy wystarczy że klikniesz prawym przyciskiem myszy, czy też touch pada na elemencie który chcesz modyfikować i wybrać inspekcję kodu. Skrót klawiaturowy to Ctrl + Shift + I, działa na popularnych przeglądarkach takich jak Google Chrome i Mozilla Firefox. Po dokonaniu zmian, możesz skopiować całość kodu do swojej witryny w łatwy i przyjazny sposób, np. poprzez Notepad++.

Jeśli podobał Ci się Artykuł, koniecznie oceń go, pozwoli to na poprawę jego pozycji i tym samym poinformowanie potencjalnych czytelników o jego wartości. Dziękuję za uwagę.

Stosowanie BBCode w Forach Internetowych

seo słownik - bb code

Co to jest BB Code?

Przeglądając Internet i poszukując odpowiedzi na pytania trafisz również na fora internetowe.

Zanim social media rozkwitły, były to obok czatów internetowych jedyne platformy do swobodnej wymiany informacji między użytkownikami, skupionymi wokół jednego tematu. Jako że generowały grupy docelowe o podobnej tematyce, fora były również doskonałymi platformami reklamowymi.

Oprócz tego że fora internetowe stanowiły miejsce na reklamę, zostały wykorzystane do jeszcze jednego poważnego celu. Mianowicie źródła linków do witryn internetowych. Umieszczanie  linków we wpisach i odpowiedziach w forach internetowych stało się działaniem przyczyniającym się do poprawy pozycji w wynikach wyszukiwania, linkowanej witryny. Takie działanie nazywamy potocznie rozklejaniem linków.

Aby ułatwić użytkownikom forów obsługiwanie swoich wpisów (z ang. „post”), powstał BBCode, czyli za Wikipedia: język formatowania wiadomości internetowych, który umożliwiał wprowadzanie do wpisu wzbogaconej treści bez używania kodu html. Chodzi tu między innymi o pogrubienie czy kursywę ale przede wszystkim dodawania tekstu zakotwiczenia i podklejania do niego linku tak jak Tutaj. 

Czy linki z forów internetowych poprawiają pozycję witryny?

Każdy link przychodzący posiada jakąś wartość. Może to być wartość dodatnia, jeśli forum cieszy się popularnością i dobrą reputacją, jak i ujemna, jeśli link pochodzi z niezaufanej witryny o niskim rankingu lub oflagowanej jako witryna ze złą reputacją.

Co do sprawdzenia rankingu stron, opisywałem wcześniej we wpisie Budowanie linków, katalogi o wysokim Page Rank, do którego odsyłam. Dobrze obsługiwane fora o wysokiej reputacji, mogą nakładać limity na wklejanie linków, lub udostępniać tę opcję jako płatną, co też jest ciekawą opcją na monetyzowanie forum internetowego. Niektóre fora stosują również linkowanie bez śledzenia z ang. „no-follow” co daje sygnał robotom, że nie powinny podążać do miejsca docelowego linków i indeksować jego zawartości.

W sytuacji gdy prowadzimy działania reklamowe dla jakiegoś podmiotu, trzeba to robić porządnie, informacyjnie i w sposób legalny, o ile prowadzimy działania SEO w białym kapeluszu. Jeśli będziemy postępować według ogólnie przyjętych zasad netykiety, zgodnie z regulaminami forów na których publikujemy, bez obawy możemy publikować dobre treści bez ryzyka, że administratorzy usuną nasze publikacje i zgłoszą naruszenie do operatora naszej sieci.

Co to jest tekst zakotwiczenia?

Tekst zakotwiczenia, z ang. „anchor text” jest to tekst pod którym kryje się dodany link. Oto przykład tekstu zakotwiczenia. Mądrze zastosowany tekst zakotwiczenia na słowa kluczowe w naszej witrynie, pomaga poprawić widoczność witryny, ponieważ bot indeksujący otrzymuje jasną informację, gdzie można znaleźć powiązany z daną frazą materiał. Tekst zakotwiczenia w forach używających bb-code wstawia się w taki sposób: [url=http://semsos.pl]SEO i SEM[/url].

Pogrubienie i kursywa w tekście zakotwiczenia

Zawsze warto używać formatowania tekstu co również pozytywnie wpływa na indeksację treści. Jednakże nadmierne nasycenie treści pogrubieniami i kolorami sprawia że tekst staje się nieczytelny. 

Kilka słów o złym pozycjonowaniu

Szara strefa SEO to grupy ukierunkowane tylko i wyłącznie na poprawę pozycji. Wizerunek jest czasem sztucznie tworzony w oparciu o naszpikowany linkami indeks „pozycjonowanej” witryny. Jeśli konkurencja będzie stosowała podobne zabiegi i jesteśmy w stanie to stwierdzić, możemy sprawę zgłosić, nawet bezpośrednio do Google, a gigant może zareagować nałożeniem filtrów, a nawet wyindeksowaniem witryny. Fora zbudowane do celów pozycjonowania posiadające bardzo niską reputację czasem wykorzystywane są do generowania tysięcy linków do jednej witryny, aby celowo obniżyć jej pozycję w rankingu. W sieci nadal wiszą wraki forów przesyconych linkami rozklejonymi przez boty internetowe lub blasty, zawierające tylko i wyłącznie wpisy z linkami.

Co to jest SERP

seo słownik - bb code

Co to jest Search Engine Result Page (SERP)?

Jest to nic innego jak strona wyników wyszukiwania po wprowadzeniu określonego zapytania w okno wyszukiwania przeglądarki internetowej. W wynikach wyszukiwania znajdują się wszystkie zindeksowane przez bota strony i linki, również obrazy i filmy oraz pliki dźwiękowe.

Źródło – Wikipedia – SERP

Przyspieszenie ładowania witryny dla Google Page Speed Insight

przyspieszanie stron internetowych

Co to jest Google Page Speed Insight?

Google Page Speed insight jest to narzędzie do testowania szybkości ładowania się witryny.  Aktualnie jest ono oparte o narzędzie audytowe Lighthouse, dostępne z poziomu przeglądarki Google Chrome. Weryfikuje ono wiele obszarów w tym następujące:

  • czy witryna posiada certyfikat bezpieczeństwa i szyfrowanie danych za pomocą SSL,
  • czy nasza witryna jest statyczną stroną ładowaną z cache serwera,
  • czy wszystkie pliki css, js i html uległy minifikacji (zostały zmniejszone i pozbawione zbędnych odstępów oraz akapitów),
  • czy obrazy zawarte w witrynie maja optymalny rozmiar i poziom kompresji,
  • czy zastosowano najnowsze technologie kompresji plików
  • czy zastosowano kompresję g-zip, czy to na poziomie serwera czy też na poziomie witryny,
  • czy nadano priorytet treści w witrynie,
  • czy ustawiono czas wygasania ciasteczek i plików aby nie obciążać nadmiernie użytkowników korzystających z witryny.

Dlaczego moja strona powinna ładować się jak najszybciej?

Szybkość ładowania witryny jest wysoce istotna z perspektywy botów indeksujących dla wyszukiwarki Google oraz dla botów Google Ads. Na podstawie wyniku szybkości ładowania oraz danych historycznych Google szacuje jakość odwiedzanej witryny i ten wskaźnik jest brany pod uwagę przy określeniu ogólnego wyniku jakości reklam Google. Nie znam algorytmu Google ale śmiem twierdzić, że szybkość ładowania się witryny i te dodatkowe kwestie podlegające analizie w Google Speed Insight wpływają również na pozycję w wynikach wyszukiwania organicznego. Dlatego podczas optymalizacji strony, jest to dla mnie wiodący temat.

Co przedstawia raport z Google Speed Insight?

Omówię dane na podstawie nowo stawianego bloga, bugslife.eu którego jeszcze nie analizowałem pod kątem wyświetlania. Witryna została uruchomiona przy użyciu WordPress, z motywem potomnym przebudowanym przeze mnie, na potrzeby projektu – bugs_twentyseventeen. Poniżej ilustracje i opisy najważniejszych, moim zdaniem, elementów raportu.

Wynik testu:

Na skali od 0-100 zaznaczono poziom na którym plasuje się witryna w PageSpeed Tools. Jak widać wskaźnik jest różny w zależności od urządzenia. Aktualnie strony dobrym wynikiem mobilnym mają pierwszeństwo w indeksie. Strona wypada aktualnie bardzo blado, jest to WordPress i jest naszpikowany dużymi objętościowo zdjęciami, specjalnie zadbałem o to aby było co poprawiać.

wynik testu szybkości przed zastosowaniem optymalizacji

Wskazówki optymalizacyjne:

Poniżej ilustracja ze wskazanymi obszarami do poprawy. Zostaną omówione poniżej.

wskazówki optymalizacyjne

Skracanie czasu odpowiedzi serwera

Każdy serwer na którym instalujemy witrynę, aplikację czy po prostu przechowujemy dane ma, swoje limity, które powinniśmy sprawdzić zanim zainstalujesz cokolwiek, biorąc pod uwagę szacunkowy ruch który uda nam się w witrynie wywołać. Jeśli serwer ma wolny procesor, łącze, nie posiada dysku SSD, ładowana strona jest dynamiczna i ciężka może to wydłużyć czas jego odpowiedzi. Istnieje narzędzie diagnostyczne, które pozwoli nam na wywołanie szczegółowych parametrów serwera. Wystarczy jedynie odrobina chęci, bo zadanie jest proste. Mianowicie:

    1. Tworzymy plik info.php w którym wklejamy poniższy kod:
1
<!--?php // Show all information, defaults to INFO_ALL phpinfo(); // Show just the module information. // phpinfo(8) yields identical results. phpinfo(INFO_MODULES); ?-->
  1. Kopiujemy plik do folderu w którym umieszczone są pliki wykonywalne witryny.
  2. Wywołujemy funkcję wpisując w przeglądarkę „http://twojawitryna.pl/info.php”

Na podstawie danych z serwera, możemy zadać pytanie dostawcy usług, co oznaczają poszczególne parametry oraz zapytać o ich poprawę.

Eliminowanie blokującego kodu JavaScript i stylów CSS

Tutaj sprawa jest nieco trudniejsza i z całą pewnością wymaga szerszego spojrzenia na programowanie w JavaScript oraz na funkcje php wywoływane przez naszą stronę. Często funkcje oraz skrypty zawierają fragmenty kodu Java, które wykonywane blokowo mogą zatrzymać dalsze renderowanie strony do czasu przejścia do następnego bloku. Oczywiście są metody które umożliwiają wywoływanie kodu w tle lub opóźnienie jego wykonania (w sposób asynchroniczny) ale jeśli nasza strona jest zbudowana w taki sposób, że w pierwszej kolejności muszą załadować się określone moduły, klasy czy zmienne, dokonując zmian możemy doprowadzić do tego, że kod działający w tle nie wczyta niektórych elementów które po prostu nie będą dostępne, ponieważ jakaś część kodu używana przez inny skrypty nie załadowała się.

Poniższe diagramy ilustrują prawidłowe i nieprawidłowe wywoływanie skryptów w sposób asynchroniczny które powoduje powstanie błędu. Więcej o asynchronicznym ładowaniu skryptów znajdziecie na pluralsight.com, tam też znajdują się sztuczki na optymalizację kodu i ustawienie kolejności ładowania zasobów.

nieprawidłowe asynchroniczne ładowanie kodu

 

prawidłowe asynchroniczne ładowanie kodu

Innym przypadkiem problemów z blokowaniem renderowania witryny mogą być sytuacje w których zasoby takie jak pliki CSS lub skrypty Java pobierane są z serwerów zewnętrznych. Tutaj jeśli chodzi o pliki CSS, możemy spokojnie pozwolić aby nie zablokowały ładowania się strony na czas ich ładowania. W moim przykładzie sprawa dotyczy używanych czcionek z Google Fonts które umieszczone są w zewnętrznych zasobach. Zanim jednak opiszę jak sobie z tym poradzić, warto nadmienić że w przypadku plików *.js pobieranych z zasobów zewnętrznych, zaraz po otwarciu tagu „<script” należy dodać async gdzie wywołanie będzie miało taką postać: <script async src=”http://serwer.zewnetrzny.com/skrypty/tenskryptjava.js”></scrip>

Co do Google Fonts, sprawa jest prosta ponieważ dostępna jest wtyczka, która wyłączy nam dostęp do Google Fonts i tym samym przyspieszy ładowanie strony. Wtyczka nazywa się Disable Google Fonts.

Wykorzystaj pamięć podręczną przeglądarki

W tym konkretnym przypadku, otrzymałem informację że nie ustalono czasu wygasania plików pobranych przez przeglądarkę. Ten problem możemy rozwiązać na dwa sposoby.

  1. Edytujemy plik .htaccess znajdujący się w katalogu głównym naszej witryny i zadajemy cazsy trwania wszystkich zasobów, które mogą zostać pobrane przez przeglądarkę
  2. Instalujemy wtyczkę która pomoże nam wybrać jakie zasoby i na jaki okres powinny zostać pobrane przez przeglądarkę. Ja do tego celu preferuję WP Super Cache. Wtyczka dodatkowo pomaga nam wykorzystać cache naszej strony aby ładować statyczne pliki zamiast dynamicznych, co znacznie przyspiesza ładowanie strony.

Zoptymalizuj obrazy

W przypadku gdy mamy na stronie jeden lub dwa obrazki, tak jak w moim przypadku, podmiana ich na bardziej skompresowane i szybciej ładujące się nie stanowi problemu. Dużo gorszą sytuacją jest gdy mamy setki czy tysiące obrazów w galeriach i nie tylko, ładowanych na stronie głównej. Takiego zabiegu się nie stosuje aczkolwiek np. w branży foto, galerie są kluczowe i część zdjęć prezentowana jest od razu. Ogólnie optymalizacja obrazów jest kluczowa w każdej dziedzinie w której wykorzystywana jest grafika, w celu ograniczenia zużycia cennych zasobów. Umiejętne magazynowanie danych to podstawa. Przy dużej ilości zdjęć warto użyć wtyczki. Przy niewielkiej można to zrobić ręcznie i cieszyć się przyspieszonym ładowaniem strony.

Zastosowane rozwiązania optymalizacyjne:

W przypadku bugslife.eu okazuje się że zastosowałem rozwiązania optymalizacyjne. Otóż, motyw z którego korzystam czyli TwentySeventeen jest na tyle dobrze przygotowany technicznie, że automatycznie nadaje priorytet treści widocznej na ekranie, co jest dobrze widoczne zwłaszcza na urządzeniach mobilnych, brakuje w nim przekierowań (ale to akurat nie dotyczy motywu), zastosowano kompresję Gzip (Tu raczej stawiam na serwer który robi to za mnie, ponieważ nie instalowałem wtyczek). Poniżej ilustracja:

zastosowane na stronie czynności optymalizacyjne

 

Motyw zawiera również minifikowany skompresowany kod css, html oraz java script, dzięki czemu nie tracę milisekund przy ładowaniu tych plików.

PageSpeed Tools dają nam jeszcze jedną wisienkę, mianowicie automatycznie optymalizuje niektóre pliki, dzięki czemu możemy je samodzielnie podmienić i poprawić swój wynik.

Wynik testu PageSpeed po uwzględnieniu wszystkich zaleceń.

Żeby nie przedłużać, tutaj poniżej ilustracja z wynikiem jaki osiągnąłem podczas tworzenia tego artykułu i stosowania się do zasad które opisałem. Taki wynik jest solidny, i umożliwia nam osiągnięcie wyniku jakości reklam w AdWords na poziomie 10/10. Myślę że to dobry wynik, tanie reklamy i większe zyski.

poprawiony wynik testu po optymalizacji

Jeśli podobało się, proszę oceń artykuł. Na semsos.pl znajdziesz dodatkowe, podstawowe informacje i terminologię potrzebną do pełnego zrozumienia artykułu. Jeśli potrzebujesz dodatkowych informacji, proszę napisz do mnie.

 

Optymalizacja Nagłówków w Witrynie

stosowanie prawidłowych znaczników nagłówków

Dzisiejszy wpis opieram o studium przypadków nad stroną – lądowiskiem (LP a ang. Landing Page), projektowaną pod grupę reklam w kampanii reklamowej Google AdWords, dotyczącą pogotowia hydraulicznego.

Jaką wartość mają nagłówki w witrynie?

Jako copywriter, tworząc zawartość pod różnego rodzaju serwisy internetowe często napotykałem na barierę w postaci wyboru nagłówków do treści, w taki sposób aby były przyjazne czytelnikowi, wskazywały na otwartość i zrozumienie omawianego zagadnienia oraz zachęcały do dalszego czytania treści pod nagłówkiem.

Jednakże oprócz czytelnika, semantykę treści skanuje robot indeksujący, który decyduje o poprawności naszej witryny pod kątem budowy i zgodności z zasadami projektowania witryn oraz ilości i jakości znaczników oraz modyfikatorów tekstu zawartych w witrynie.

Kiedy powstaje konieczność analizy nagłówków w treści?

W tym konkretnym przypadku dotyczącym pogotowia hydraulicznego, analizowałem współczynnik konwersji pochodzących z połączeń telefonicznych, dla reklam z rozszerzeniem połączeń. Niestety wskazany niski poziom konwersji oznaczał problem ze stroną docelową. Dodatkowo, z raportu wynika że jakość strony docelowej jest przeciętna, zatem jest to definitywnie obszar wymagający poprawy. Otóż po otwarciu strony docelowej okazało się że strona jest naszpikowana nagłówkami, które nie mają żadnej wartości i występują w nadmiarze. Dodatkowo treść tam zawarta nie zachęcała do skorzystania z usługi. Zauważyłem również że cały nagłówek strony wymaga kompletnej przebudowy. Aktualny ranking reklamy wskazuje 7/10 w grupie reklam dotyczących pogotowia. Moim celem jest wynik 9/10 lub 10/10. Więcej o konwersjach w witrynie…  

Konieczność analizy nagłówków w sytuacji w której nasza witryna nie jest połączona z kampanią AdWords może wynikać z narzędzi których używamy na stronie. Jako że buduję strony w oparciu o WordPress z pomocą przychodzi narzędzie w postaci wtyczki Yoast SEO, gdzie w automatyczny sposób jest zliczana zawartość słów kluczowych w treści i w nagłówkach.

Jak powinien brzmieć poprawny nagłówek?

Z uwagi na indeksację Google bota (robota indeksującego), nagłówek powinien zawierać frazę kluczową z uniknięciem duplikacji treści o ile fraza może się powtarzać, kontekstowo nagłówki powinny się różnić. I tak w zawartym przykładzie – Nagłówkiem H1 – frazą pod słowo kluczowe będzie Pogotowie Hydrauliczne 24h. Jako nagłówek h2, dopełniający użyłem również – Nagła pomoc w usuwaniu zatorów kanalizacyjnych i hydraulicznych – Pogotowie 24h. Co do wartości treściowej, dopełniłem tekstem z akapitu. O ile nagłówków H2 możemy użyć dowolną ilość, choć zawsze dopełnionych tekstem o tyle nagłówek h1 musi być tylko jeden. Więcej o indeksowaniu witryny…

Sam nagłówek strony, czyli „header” nie powinien zawierać menu, żeby nie rozpraszać użytkownika, bo w tym przykładzie pracuję na stronie docelowej budowanej pod kampanię AdWords.

Mam nadzieję że udało mi się w sposób przyjazny przybliżyć techniczną stronę znaczników nagłówków w witrynie. Teraz sprawdzę treść, prześlę stronę do indeksu , uruchomię reklamy i zweryfikuję zmianę współczynnika jakości.

Jeśli artykuł się podobał, proszę oceń go i napisz komentarz, z przyjemnością odpowiem na każdy.

Badanie skuteczności kampanii Google Ads

ocena skuteczności kampanii google ads

Jak sprawdzić skuteczność kampanii Google Ads?

Wyobraźmy sobie sytuację gdzie otrzymujemy od Klienta dostęp do jego konta Google Ads, prowadzonego wcześniej przez inny podmiot. Od czego zacząć analizę skuteczności konta i kampanii w nim zawartych?

Zakładamy sytuację w której jesteśmy freelancerem prowadzącym kilka skutecznych kampanii Google Ads, a konto do którego dostaliśmy dostęp, posiada kilka kampanii kierowanych na różne obszary oraz zawiera setki słów kluczowych, w dziesiątkach grup reklam.

Od czego zaczniemy sprawdzenie skuteczności kampanii?

Zaczynamy od analizy budżetu oraz stopy zwrotu z inwestycji. Musimy tutaj ściśle współpracować z właścicielem konta i uzyskać dane które pozwolą nam wyobrazić sobie w jakiej sytuacji finansowej jest reklamowana działalność. Jeśli były prowadzone pomiary konwersji, w raz z wyceną ich wartości, zadanie jest stosunkowo proste. Jeśli takie pomiary nie były stosowane na koncie, możemy tylko i wyłącznie polegać na informacjach przekazanych od właściciela konta, co stanowi niemały problem ponieważ  może dojść tutaj to nadużycia ze strony naszego pracodawcy. Przekazanie fałszywych danych może doprowadzić do ograniczenia naszego wynagrodzenia, zakładając model w którym budżet jest dzielony na część dla osoby obsługującej i część przeznaczoną na reklamę.

Jaki model ustalania stawek zastosowano w kampaniach i grupach reklam?

To jest następne pytanie na które bezwzględnie musimy znać odpowiedź. W tym celu weryfikujemy czy stawki były ustalane manualnie, czy automatycznie, jeśli automatycznie, to w jakim modelu. Jak zapewne wiecie, w tej chwili można ustawić kilka podstawowych sposobów automatycznego ustalania stawek, w oparciu o:

  • wyświetlenia,
  • kliknięcia,
  • koszt pozyskania
  • koszt konwersji (model płać za konwersje).

Ostatnie dwie opcje są dostępne tylko i wyłącznie dla kont prowadzących pomiar konwersji.

Jakie zastosowano sposoby kierowania i dostosowywania stawek?

To też jest bardzo istotne, ponieważ pozwala ocenić czy prowadzone kampanie były poprawnie segmentowane. Mam na myśli dostosowanie stawek do:

  • grupy demograficznej (skład grypy docelowej jest niezmiernie ważny przy sprzedaży produktów dla określonych grup wiekowych)
  • określonego obszaru (tutaj istotność jest wysoka ze względu na obszar działania reklamodawcy)
  • Urządzenia (Zawsze warto określić na których urządzeniach reklamy powinny mieć priorytet)

Jaki kolejny obszar powinniśmy zweryfikować w koncie Google Ads, po ustaleniu budżetu, ROI oraz stawek i ich dostosowania?

Następnym etapem będzie analiza wyniku jakości reklam serwowanych odbiorcom. Żeby odblokować kolumnę w której znajduje się wynik jakości i średnia pozycja reklam musimy rozszerzyć raport. Analiza wyniku jakości polega na sprawdzeniu trzech głównych czynników składowych wyniku jakości:

  1. Jakości słowa kluczowego (te o wyższym wolumenie wyszukiwania zawsze będą miały wyższy wynik, oczywiście możemy ręcznie wpływać na jakość słowa podnosząc jego skuteczność stawkami ale ręczne dostosowywanie stawek to walka z czasem)
  2. Jakości reklam (tu musimy sprawdzić czy nagłówki i treść zawierają słowo kluczowe oraz czy treści zawierają wezwanie do działania. Dobrze umieszczać w reklamach zapytanie.
  3. Jakości strony docelowej (Sprawdzamy szybkość ładowania się strony w PageSpeed Insight z ang. Teście Szybkości Google, nagłówki – h1, oraz h2 czy zawierają słowa kluczowe z reklam oraz samą treść która również powinna zawierać wezwanie do działania. Strona po załadowaniu musi prezentować widoczną treść. Kwestie estetyczne UI i UX, pomijam bo dotyczą innego zagadnienia które omówię przy innej okazji

Po sprawdzeniu wyników jakości od razu stwierdzimy które słowa kluczowe, reklamy i strony docelowe przynoszą największe korzyści. Da to nam również potrzebną wiedzę które słowa kluczowe, strony docelowe i reklamy wymagają zmian.

Czy mogę uzyskać wsparcie w analizie skuteczności mojego konta Google Ads?

Pewnie, możesz spokojnie skontaktować się ze mną, podpowiem co można wdrożyć lub poprawić. Odwiedź koniecznie moją stronę odnośnie prowadzenia kampanii reklamowych SEM 

Jeśli ta treść była dla Ciebie pomocna, daj mi koniecznie znać oceniając wiadomość i komentując ten wpis. Pozdrawiam!

 

 

Ruch w witrynie internetowej

analityka ruchu internetowego

Co to jest  ruch w witrynie internetowej?

Internet jest to ogromna przestrzeń w której poruszają się nie tylko ludzie ale i wirtualne twory zwane botami. *Więcej o botach napisałem na semsos.pl. Niezależnie od tego czy jest to człowiek czy bot, w końcu odwiedzi twoją witrynę i naprawdę warto wiedzieć skąd pochodzą odwiedziny. Połączenie się z naszą witryną nazywamy ruchem.

Jakie są rodzaje ruchu internetowego?

Ja dzielę ruch w witrynie na pożądany i niepożądany. Pożądany ruch internetowy to taki który prowadzi do konkretnych celów. Jeśli prowadzisz sklep internetowy, pożądanym ruchem  będzie każdy użytkownik odwiedzający twój sklep.  Może on później zostać twoim Klientem, o ile przy pierwszym kontakcie z twoją witryną uda Ci się zaangażować do do dalszego działania. W przypadku gdy przestrzeń w twojej witrynie jest monetaryzowana za pośrednictwem reklam, najcenniejszym i pożądanym odwiedzającym wywołującym ruch, będzie ktoś kto kliknie reklamę. Taki ruch nazywamy ruchem przelotowym, ponieważ docelowo użytkownik witryny wyląduje poza nią. Ruch niepożądany w witrynie, to głównie boty ale również nieuczciwa konkurencja, która może generować fałszywe dane.

Jak mierzyć ruch internetowy za pomocą dziennika logów?

Najbardziej skomplikowaną ale i najszerszą jest pomiar logów z serwera na którym zainstalowano naszą witrynę. Pomiar logów nie tylko pozwoli nam na odczyt pożądanego ruchu ale i pozwoli nam zweryfikować ten niepożądany ruch pochodzący z ataków hakerskich i niechcianych botów które obciążają nasz serwer i przeszkadzają w komunikacji z nim. Logi udostępnia dostawca usług hostingowych i jego obowiązkiem jest aby dostarczyć zakres logów z zadanego czasu. Dostawcy informują również o tym jak długo przechowywane są logi, a my dodatkowo możemy uruchomić własny system pobierania danych przychodzących połączeń, z naszą witryną.

Co to są logi z serwera?

Logi to nic innego jak dziennik połączeń sieciowych z serwerem. W tym dzienniku znajdziemy podstawowe dane jak:

  • adres IP,
  • dokładną datę połączenia,
  • link z którym próbował połączyć się klient.

Jak wykryć nadużycia w logach połączeń?

Tutaj niezbędne jest narzędzie do obróbki surowych danych z serwera, które zazwyczaj otrzymujemy w pliku tekstowym. Ja używam arkusza kalkulacyjnego, z serią makr które automatycznie filtrują dziennik logów w celu odnalezienia powtarzających się zapytań. Sprawdzam powtarzające się połączenia z tych samych adresów i interwały czasowe w których nastąpiły. Jeśli przykładowo interwały są równe lub częstość połączeń wskazuje na nienaturalne zachowanie użytkowników witryny, mam podstawy do dalszej analizy.

Uwaga! Na podstawie analizy można wykluczyć adresy IP na poziomie:

  • Serwera
  • Witryny
  • Aplikacji analitycznej lub platformy komercyjnej, które wykonują własne pomiary ruchu – o ile ruch pochodzi z działań w tych aplikacjach.

Jak mierzyć ruch w witrynie za pomocą pakietu Google Analytics?

Google Analytics to bardzo potężne narzędzie dzięki któremu możemy sprawdzać zachowanie odwiedzających naszą witrynę. W Analytics możemy sprawdzić np. Ile czasu odwiedzający przebywali na konkretnych podstronach, jak wyglądała ścieżka atrybucji, jeśli ustawiliśmy konwersje w witrynie, ile ruchu pochodziło z Google Ads, jeśli połączyliśmy te dwa narzędzia. Możemy również otrzymać raporty słów kluczowych wpisywanych w wyszukiwarce, które doprowadziły do wyświetlenia naszej witryny, a następnie do wejścia do niej. Aby otrzymywać takie raporty musimy połączyć Analytics z Konsolą Wyszukiwania Google (GSC z ang. Google Search Console).

Dzięki Analytics dostajemy od Google również informację o składzie demograficznym, urządzeniach z jakich korzystają oraz lokalizacji z których nastąpiły połączenia. Dziennik odwiedzających jest tworzony na podstawie ciasteczka, które klient otrzymuje wchodząc na naszą witrynę. Do implementacji Analytics w witrynie służy specjalny kod śledzenia, który wklejamy w nagłówek strony.

Aplikacja Google Analytics jest intuicyjna i prosta w obsłudze. Jeśli natomiast chcecie żebym napisał coś więcej na temat tego narzędzia, proszę o informację.

Używanie własnych narzędzi do śledzenia ruchu i zachowania w witrynie

Oprócz analizy logów i pakietu Analytics 360 można również samodzielnie stworzyć mechanizm śledzący i gromadzić dane np. w bazie danych co uniemożliwi otrzymywanie wyników przez Google czy inne systemy bazujące na gromadzeniu danych.

Po co mierzymy ruch w witrynie internetowej?

Każdy posiadający własną witrynę internetową chce mieć informację o tym w jaki sposób była używana i kto jej używał. Dzięki analityce możemy to określić i zweryfikować które nasze działania zwiększyły natężenie ruchu internetowego, a które nie przyniosły zamierzonego efektu.

Na tę chwilę to tyle. Mam nadzieję że artykuł się podobał. Jeśli chcecie abym rozszerzył któryś z jego zakresów, omówił dodatkowo pozostałe kwestie proszę o pozostawienie komentarza z informacją lub kontakt. Jeśli natomiast ktoś pragnie aby wdrożyć analitykę do jego witryny, zapraszam. Z przyjemnością pomogę w realizacji tego celu.

Co to jest Google Moja Firma?

google moja firma

Dlaczego tak bardzo potrzebuję Google Moja Firma?

Jeśli posiadasz lokalizację z której świadczysz usługę i musisz być widoczny na mapach Google, koniecznie musisz utworzyć wizytówkę w Google Moja Firma 

Jakie dodatkowe korzyści płyną z konta w Google Moja Firma?

Na koncie Google moja firma możesz utworzyć wizytówkę, która będzie twoją stroną wyświetlaną w bogatych danych podczas gdy ktoś będzie szukał twojej firmy na mapach i w przeglądarce Google. Dodatkowo dzięki koncie w Google Moja firma możesz utworzyć rozszerzenia lokalizacji, za pomocą których będziesz w stanie publikować lepsze reklamy wskazujące lokalizację twojej działalności na smartfonach. W koncie zadajesz również numer telefonu który będzie wyświetlał się w reklamach.

Czego potrzebuję aby utworzyć konto w Google Moja Firma?

Wystarczy utworzyć profil pod linkiem który podałem wcześniej i poprosić o autoryzację. W przypadku gdy nie jesteś partnerem Google, ustanowienie lokalizacji, musi odbywać się drogą pocztową, gdzie na twój adres jest wysyłany list z kodem autoryzacyjnym.

Jaki wpływ ma profil Google Moja Firma na pozycję w wynikach wyszukiwania?

W profilu można wskazać linki do witryny oraz generować wpisy z linkami na stronie wizytówce. Google Moja Firma, to nieodzowne narzędzie w pozycjonowaniu lokalnym, gdzie interesuje nas pozyskiwanie klientów z najbliższych obszarów działania. Widoczność na mapie to również bardzo ważna rzecz, w przypadku gdy zależy nam na spotkaniu z Klientem.

Z jakich dodatkowych narzędzi mogę korzystać posiadając Google Moja Firma?

Moja Firma w standardzie posiada bezpośredni dostęp do AdWords Express, gdzie możesz skonfigurować swoje pierwsze reklamy. Google Moja Firma posiada również analitykę profilu w postaci  okna z liczbą odwiedzin z ruchu organicznego i bezpośredniego.

Potrzebujesz pomocy w konfiguracji Google Moja Firma?

Jeśli tak, skontaktuj się ze mną, z przyjemnością pomogę Ci wszystko ustawić.

 

Dodawanie hentry-hatom do wszystkich postów i stron

Baner nad wpisem do bloga

Jak dodać autora, datę modyfikacji i tytuł posta do każdej strony i postu w WordPress?

Dzisiaj bardzo szybciutki wpis z ostatniej chwili. Siedziałem nad tym palącym problem kilka godzin i udało mi się w końcu znaleźć idealne czyste rozwiązanie aby dodać dane hentry/hatom do wszystkich obiektów typu post i page w WordPress. Oto rozwiązanie:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php

function add_suf_hatom_data($content) {

    $t = get_the_modified_time('F jS, Y');

    $author = get_the_author();

    $title = get_the_title();

if (is_home() || is_singular() || is_archive() ) {

        $content .= '<div class="hatom-extra" style="display:none;visibility:hidden;"><span class="entry-title">'.$title.'</span> was last modified: <span class="updated"> '.$t.'</span> by <span class="author vcard"><span class="fn">'.$author.'</span></span></div>';

    }

    return $content;

    }
?>

Jest w 100% wiarygodne, pochodzi z forum dla Webmasterów Google