Jak dodać swoją stronę do ulubionych źródeł w Google: Poradnik dla użytkowników Hugo
W przeszłości szukałem różnych sposobów na zwiększenie zasięgów mojej strony oraz witryn, nad którymi pracuję, a które regularnie publikują nowe treści.
Analizowałem między innymi możliwość publikacji treści w Wiadomościach Bing, co zazwyczaj kończyło się odrzuceniem zgłoszenia bez żadnego wyjaśnienia. Moja ostatnia próba miała miejsce w lipcu 2024 roku, po czym uznałem, że nie warto tracić na to więcej czasu. Zresztą niedługo potem funkcja ta została wycofana.
Od czasu do czasu moja witryna trafia też do „aresztu” (Bing Jail) bez wyraźnego powodu. Choć w przeszłości udawało mi się wydostać z aresztu Bing, co jakiś czas muszę tam „odsiadywać wyrok” na nowo.
Ostatnia taka blokada w Bing przydarzyła się mojej stronie tuż po 2 października 2025 roku i trwała aż do 17 grudnia 2025 roku, kiedy to odnotowałem powolny powrót do normy, mimo że nie podejmowałem żadnych działań w tym kierunku. Całe to zamieszanie z Bingiem sprawia, że trudno mi polecać wyszukiwarki inne niż Google, takie jak DuckDuckGo, które w dużej mierze opierają się na wynikach z Bing. Microsoft musi uporać się z tymi absurdami, jeśli kiedykolwiek chce zbliżyć się do Google. Jednak w obecnej erze AI szczerze wątpię, aby to kiedykolwiek nastąpiło.
W pewnym momencie sprawdzałem też publikowanie treści w Google News, dopóki Google również nie postanowiło uśmiercić tego rozwiązania.
Obecnie na popularności zyskuje inna usługa Google: dodawanie stron internetowych jako preferowanych źródeł informacji w wyszukiwarce.
Preferowane źródła Google (Google Preferred Sources) to funkcja, która pozwala Ci „wybrać faworytów” (ulubione witryny), jeśli chodzi o wiadomości – choć nie tylko w najszerszym tego słowa znaczeniu.
Zamiast pozwalać algorytmom Google decydować o tym, które serwisy informacyjne powinieneś widzieć, możesz wskazać wydawców, którym ufasz lub których czytasz najchętniej. Gdy te witryny opublikują coś na temat, którego szukasz, Google przesunie je na samą górę Twoich wyników.
To nowe podejście — przycisk, który można dodać do strony internetowej — to sposób na zachęcenie użytkowników do „subskrybowania” Twojej witryny.
Rozwiązanie to zaprojektowano głównie z myślą o serwisach informacyjnych, jednak wielu twórców blogów technicznych i innych portali również próbuje wykorzystać tę nową metodę pozyskiwania czytelników. W końcu ludzie przeszukują sieć nie tylko po to, by czytać o najnowszych wydarzeniach. Jeśli często szukasz przepisów w Google, warto wybrać swoje ulubione strony. Dzięki temu przy kolejnym wyszukiwaniu Google skieruje Cię do zaufanych źródeł, zamiast do nieznanej witryny, która nie zawsze spełni Twoje oczekiwania.
Ideą preferowanych źródeł jest sprawienie, aby Twoje ulubione strony pojawiały się wyżej w wynikach wyszukiwania Google (pod warunkiem, że jesteś zalogowany na swoje konto Google).
Tym razem Google zadbało o to, aby wdrożenie było tak proste, jak to tylko możliwe. Zaczęło się od krótkiego artykułu (Jak wybierać preferowane źródła w sekcji „Najważniejsze artykuły” w wyszukiwarce), w którym opisano proces dodawania źródeł przez użytkowników.
Aby umożliwić właścicielom witryn szybkie wdrożenie tej funkcji, przygotowano dedykowane centrum pomocy. Można tam dowiedzieć się, jak stworzyć link (tzw. deeplink) z adresem własnej strony, a także pobrać oficjalne przyciski.
Postanowiłem przetestować to rozwiązanie na stronie mojej znajomej, która została zbudowana przy użyciu Hugo.
Tworzenie linku
Google w prosty sposób wyjaśnia, jak zbudować własny odnośnik:
https://google.com/preferences/source?q=<your website URL>
Wystarczy, że zastąpisz frazę <your website URL> adresem swojej witryny.
Będzie to wyglądać następująco:
<div class="google-preferred-source-badge">
<a target="_blank" rel="noopener" rel="nofollow" href="https://google.com/preferences/source?q=https://yummyrecipes.uk" aria-label="Add Yummy Recipes UK as a preferred source on Google">
<!-- image will go here -->
</a>
</div>
W Hugo mój kod będzie wyglądał następująco:
<div class="google-preferred-source-badge">
{{- $baseUrl := "/" | absURL -}}
<a href="https://google.com/preferences/source?q={{ $baseUrl }}"
target="_blank"
rel="noopener nofollow"
aria-label="Add {{ .Site.Title }} as a preferred source on Google">
<!-- image will go here -->
</a>
</div>
Czas dodać obrazy.
Dodawanie oficjalnych grafik + format WebP
Na stronie dedykowanego centrum pomocy znajdź odnośnik Download the button. Spowoduje to pobranie pliku ZIP, który należy wypakować i umieścić w osobnym folderze.
W mojej instalacji Hugo umieszczę go w folderze /static, w podfolderze o nazwie google_preferred_source_badge.
Folder będzie zawierał następujące pliki:
google_preferred_source_badge_dark.png
google_preferred_source_badge_dark@2x.png
google_preferred_source_badge_light.png
google_preferred_source_badge_light@2x.png
Przekonwertowałem je również na format WebP. Skorzystałem z terminala macOS z zainstalowanym pakietem WebP przez Homebrew (brew install webp). Użyłem polecenia cwebp -q 75 obraz.png -o obraz.webp, aby uzyskać odpowiedni plik wynikowy, ale Ty możesz po prostu skorzystać ze strony Squoosh.app.
W aplikacji Squoosh.app: Przeciągnij i upuść swój obraz. W sekcji Compress po prawej stronie wybierz WebP z listy rozwijanej. Ustaw suwak Quality na wartość 75.
Struktura moich folderów będzie wyglądać tak:
google_preferred_source_badge_dark.png
google_preferred_source_badge_dark.webp
google_preferred_source_badge_dark@2x.png
google_preferred_source_badge_dark@2x.webp
google_preferred_source_badge_light.png
google_preferred_source_badge_light.webp
google_preferred_source_badge_light@2x.png
google_preferred_source_badge_light@2x.webp
Fragment kodu odpowiedzialny za obrazy (który trafi w miejsce <!-- image will go here -->) będzie wyglądał następująco:
Rozwiązanie to uwzględnia zastosowaną na mojej stronie deklarację
colour-scheme: light darkoraz ustawienie systemoweprefers-colour-scheme.
<picture>
<source
srcset="/google_preferred_source_badge/google_preferred_source_badge_dark@2x.webp 2x,
/google_preferred_source_badge/google_preferred_source_badge_dark.webp 1x"
type="image/webp"
media="(prefers-color-scheme: dark)">
<source
srcset="/google_preferred_source_badge/google_preferred_source_badge_dark@2x.png 2x,
/google_preferred_source_badge/google_preferred_source_badge_dark.png 1x"
type="image/png"
media="(prefers-color-scheme: dark)">
<source
srcset="/google_preferred_source_badge/google_preferred_source_badge_light@2x.webp 2x,
/google_preferred_source_badge/google_preferred_source_badge_light.webp 1x"
type="image/webp">
<source
srcset="/google_preferred_source_badge/google_preferred_source_badge_light@2x.png 2x,
/google_preferred_source_badge/google_preferred_source_badge_light.png 1x"
type="image/png">
<img
src="/google_preferred_source_badge/google_preferred_source_badge_light.png"
alt="Add {{ .Site.Title }} as a preferred source on Google"
width="338"
height="107"
loading="lazy"
style="color-scheme: light dark; font-style: italic; vertical-align: middle;">
</picture>
Wdrażając to rozwiązanie w Hugo, zastosuję następujące podejście:
<picture>
{{- $path := "/google_preferred_source_badge/google_preferred_source_badge" -}}
<source
srcset="{{ printf "%s_dark@2x.webp" $path }} 2x, {{ printf "%s_dark.webp" $path }} 1x"
type="image/webp"
media="(prefers-color-scheme: dark)">
<source
srcset="{{ printf "%s_dark@2x.png" $path }} 2x, {{ printf "%s_dark.png" $path }} 1x"
type="image/png"
media="(prefers-color-scheme: dark)">
<source
srcset="{{ printf "%s_light@2x.webp" $path }} 2x, {{ printf "%s_light.webp" $path }} 1x"
type="image/webp">
<source
srcset="{{ printf "%s_light@2x.png" $path }} 2x, {{ printf "%s_light.png" $path }} 1x"
type="image/png">
<img
src="{{ printf "%s_light.png" $path }}"
alt="Add {{ .Site.Title }} as a preferred source on Google"
width="338"
height="107"
loading="lazy"
class="google-badge-img">
</picture>
i18n
W przypadku mojej strony opartej na Hugo, korzystam z podejścia i18n, aby serwować treści w odpowiednim języku.
W powyższym kodzie mamy dwa elementy, które będą wymagały tłumaczenia: aria-label oraz alt.
Zmienimy ten fragment:
Add {{ .Site.Title }} as a preferred source on Google
na to:
{{ T "GooglePreferredBadge" (dict "Title" .Site.Title) }}
a w odpowiednim pliku (i18n/pl.toml) dodam:
[GooglePreferredBadge]
other = "Dodaj {{ .Title }} do ulubionych źródeł w Google"
Kod końcowy dla strony w Hugo
<div class="google-preferred-source-badge">
{{- $baseUrl := "/" | absURL -}}
<a href="https://google.com/preferences/source?q={{ $baseUrl }}"
target="_blank"
rel="noopener nofollow"
aria-label="{{ T "GooglePreferredBadge" (dict "Title" .Site.Title) }}">
<picture>
{{- $path := "/google_preferred_source_badge/google_preferred_source_badge" -}}
<source
srcset="{{ printf "%s_dark@2x.webp" $path }} 2x, {{ printf "%s_dark.webp" $path }} 1x"
type="image/webp"
media="(prefers-color-scheme: dark)">
<source
srcset="{{ printf "%s_dark@2x.png" $path }} 2x, {{ printf "%s_dark.png" $path }} 1x"
type="image/png"
media="(prefers-color-scheme: dark)">
<source
srcset="{{ printf "%s_light@2x.webp" $path }} 2x, {{ printf "%s_light.webp" $path }} 1x"
type="image/webp">
<source
srcset="{{ printf "%s_light@2x.png" $path }} 2x, {{ printf "%s_light.png" $path }} 1x"
type="image/png">
<img
src="{{ printf "%s_light.png" $path }}"
alt="{{ T "GooglePreferredBadge" (dict "Title" .Site.Title) }}"
width="338"
height="107"
loading="lazy"
class="google-badge-img">
</picture>
</a>
</div>
.google-badge-img {
color-scheme: light dark;
font-style: italic;
vertical-align: middle;
height: auto;
max-width: 100%;
}
I to wszystko.
Aktywny przykład tego przycisku znajdziesz na stronie mojej znajomej, yummyrecipes.uk, na końcu każdego przepisu.
Komentarze i Reakcje