{"id":2388,"date":"2024-09-09T12:14:00","date_gmt":"2024-09-09T11:14:00","guid":{"rendered":"https:\/\/jalvo.eu\/obrazy-avif-w-google-serwowanie-z-nginx\/"},"modified":"2024-09-09T12:14:00","modified_gmt":"2024-09-09T11:14:00","slug":"obrazy-avif-w-google-serwowanie-z-nginx","status":"publish","type":"post","link":"https:\/\/jalvo.eu\/pl\/obrazy-avif-w-google-serwowanie-z-nginx\/","title":{"rendered":"Obrazy AVIF w wyszukiwarce Google: jak serwowa\u0107 je z NGINX"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Wyszukiwarka Google indeksuje obrazy AVIF od <a href=\"https:\/\/developers.google.com\/search\/blog\/2024\/08\/happy-avifriday\" rel=\"nofollow noopener\" target=\"_blank\">og\u0142oszenia Google o obs\u0142udze AVIF<\/a> z 30 sierpnia 2024 r. NGINX mo\u017ce je dostarcza\u0107 na dwa sposoby: pod nowymi nazwami plik\u00f3w z przekierowaniami albo pod niezmienionymi adresami URL dzi\u0119ki negocjacji opartej na nag\u0142\u00f3wku Accept. Kt\u00f3ry wybra\u0107? To zale\u017cy od tego, jak bardzo zale\u017cy Ci na stabilnych adresach obraz\u00f3w i jak zachowuj\u0105 si\u0119 Twoje cache. Cel jest tu skromny: przestawi\u0107 cz\u0119\u015b\u0107 grafik bez psucia adres\u00f3w URL obraz\u00f3w i cache&#8217;owania.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Co w\u0142a\u015bciwie zmienia obs\u0142uga AVIF w wyszukiwarce Google?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">W skr\u00f3cie: AVIF jest teraz obs\u0142ugiwanym typem pliku w Grafice Google i w ka\u017cdym innym miejscu, w kt\u00f3rym wyszukiwarka korzysta z obraz\u00f3w. \u017beby takie pliki zosta\u0142y zaindeksowane, nie trzeba robi\u0107 nic szczeg\u00f3lnego. Format jest otwarty, oparty na standardzie kompresji wideo AV1 i wy\u015bwietlaj\u0105 go wszystkie g\u0142\u00f3wne przegl\u0105darki. <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/google-images\" rel=\"nofollow noopener\" target=\"_blank\">Sprawdzone metody Google dotycz\u0105ce obraz\u00f3w<\/a> wymieniaj\u0105 formaty akceptowane w atrybucie <code>src<\/code> elementu <code>img<\/code>: BMP, GIF, JPEG, PNG, WebP, SVG i AVIF. W praktyce wi\u0119c obs\u0142uga AVIF w Google usuwa ostatni argument SEO przeciwko jego stosowaniu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Czy konwertowa\u0107 ka\u017cdy obraz? WebP vs AVIF i rada Google<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nie. Google odradza \u015blepe, hurtowe zmiany w ca\u0142ej witrynie i zaleca po\u015bwi\u0119ci\u0107 czas na ocen\u0119, kt\u00f3ry format najlepiej odpowiada Twoim potrzebom. Moim zdaniem WebP vs AVIF to decyzja podejmowana dla ka\u017cdego obrazu osobno w ramach format\u00f3w nowej generacji, a nie projekt migracji ca\u0142ego serwisu. Oto od czego bym zacz\u0105\u0142 i czego bym nie rusza\u0142:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Konwertuj w pierwszej kolejno\u015bci:<\/strong> du\u017ce zdj\u0119cia hero, galerie produkt\u00f3w i obrazy w szablonach o du\u017cym ruchu.<\/li>\n<li><strong>Zostaw w spokoju:<\/strong> logotypy SVG, malutkie ikony i grafiki, kt\u00f3re ju\u017c maj\u0105 pozycje w Grafice Google.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Zakoduj ma\u0142\u0105 parti\u0119. Por\u00f3wnaj jako\u015b\u0107 wizualn\u0105 i wag\u0119 na w\u0142asnych plikach (a nie na cudzym benchmarku). Rozszerzaj wdro\u017cenie dopiero wtedy, gdy wyniki to uzasadniaj\u0105.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak nauczy\u0107 NGINX typu MIME image\/avif<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">NGINX musi wysy\u0142a\u0107 <code>Content-Type: image\/avif<\/code>. Potrzebuje do tego wpisu <code>avif<\/code> w <code>mime.types<\/code> albo bloku <code>types<\/code> w starszych instalacjach. Je\u015bli to pominiesz, plik wyjdzie jako <code>application\/octet-stream<\/code>, a przegl\u0105darki mog\u0105 go pobra\u0107 zamiast wy\u015bwietli\u0107. S\u0142abo. Dodaj mapowanie na w\u0142asnym serwerze \u017ar\u00f3d\u0142owym:<\/p>\n\n\n\n<pre><code>types {\n    image\/avif avif;\n}<\/code><\/pre>\n<p class=\"wp-block-paragraph\">Nast\u0119pnie uruchom <code>curl -I https:\/\/example.com\/img\/hero.avif<\/code> i odczytaj nag\u0142\u00f3wek odpowiedzi. Google zaznacza te\u017c, \u017ce rozszerzenie powinno odpowiada\u0107 typowi pliku, wi\u0119c upewnij si\u0119, \u017ce Twoje pliki <code>.avif<\/code> naprawd\u0119 zawieraj\u0105 dane AVIF.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Opcja 1: nowe nazwy plik\u00f3w .avif z przekierowaniami po stronie serwera<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Zmienia si\u0119 rozszerzenie? Wtedy stary adres URL obrazu powinien przekierowywa\u0107 po stronie serwera na nowy, dok\u0142adnie tak, jak radzi og\u0142oszenie Google. Pojedynczy plik ze zmienion\u0105 nazw\u0105 wymaga jednego bloku location z dok\u0142adnym dopasowaniem. Wi\u0119ksz\u0105 parti\u0119 \u0142atwiej utrzyma\u0107 w <code>map<\/code>.<\/p>\n\n\n\n<pre><code>location = \/img\/hero.jpg {\n    return 301 \/img\/hero.avif;\n}<\/code><\/pre>\n<p class=\"wp-block-paragraph\">I nie poprzestawaj na przekierowaniu. Zaktualizuj ka\u017cdy <code>img src<\/code> i ka\u017cdy wpis w mapie witryny obraz\u00f3w na nowy adres, \u017ceby roboty nie polega\u0142y wy\u0142\u0105cznie na przekierowaniu. Mechanika jest taka sama jak w przypadku stron, a <a href=\"https:\/\/jalvo.eu\/pl\/przekierowanie-301-czy-302-jak-wybrac-dla-seo\/\">trwa\u0142e przekierowania dla przemianowanych plik\u00f3w<\/a> s\u0105 tu w\u0142a\u015bciwym wyborem. Kompromis jest prosty: dostajesz czyste, przyjazne dla cache adresy URL, ale ka\u017cda przemianowana grafika wymaga w\u0142asnej regu\u0142y i ponownego zaindeksowania.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Opcja 2: negocjacja tre\u015bci obraz\u00f3w, kt\u00f3ra nie zmienia adres\u00f3w URL<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">NGINX mo\u017ce odczyta\u0107 nag\u0142\u00f3wek <code>Accept<\/code> i zwr\u00f3ci\u0107 wariant AVIF pod tym samym adresem URL. \u017baden adres obrazu si\u0119 nie zmienia. Negocjacja tre\u015bci obraz\u00f3w to pi\u0119\u0107 krok\u00f3w:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Wygeneruj bli\u017aniacze pliki <code>.avif<\/code> obok orygina\u0142\u00f3w, na przyk\u0142ad <code>hero.jpg.avif<\/code>.<\/li>\n<li>Dodaj <code>map<\/code> na <code>$http_accept<\/code>, kt\u00f3ra ustawia sufiks.<\/li>\n<li>U\u017cyj <code>try_files<\/code>, aby serwowa\u0107 wariant, a w razie jego braku orygina\u0142.<\/li>\n<li>Dodaj <code>Vary: Accept<\/code> do odpowiedzi.<\/li>\n<li>Prze\u0142aduj serwer i przetestuj.<\/li>\n<\/ol>\n\n\n\n<pre><code>map $http_accept $avif_suffix {\n    default        \"\";\n    \"~image\/avif\"  \".avif\";\n}\n\nlocation ~* \\.(jpe?g|png)$ {\n    add_header Vary Accept;\n    try_files $uri$avif_suffix $uri =404;\n}<\/code><\/pre>\n<p class=\"wp-block-paragraph\">Jedno zastrze\u017cenie, i to niema\u0142e: rozszerzenie w adresie URL nie odpowiada ju\u017c serwowanemu typowi, co jest sprzeczne ze wskaz\u00f3wk\u0105 Google, \u017ce warto, by by\u0142y zgodne. Rozwa\u017c to w przypadku grafik, kt\u00f3re maj\u0105 znaczenie dla SEO obraz\u00f3w. Nie chcesz negocjacji w og\u00f3le? Jest jeszcze element <code>picture<\/code> z <code>source type=\"image\/avif\"<\/code> i zapasowym <code>img<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak utrzyma\u0107 poprawne cache i regu\u0142y hotlinkowania po zmianie<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To tutaj zwykle co\u015b idzie nie tak. Ka\u017cdy cache stoj\u0105cy przed serwerem \u017ar\u00f3d\u0142owym musi uwzgl\u0119dnia\u0107 <code>Accept<\/code> w kluczu za po\u015brednictwem nag\u0142\u00f3wka <code>Vary<\/code>, w przeciwnym razie przegl\u0105darka bez obs\u0142ugi AVIF mo\u017ce dosta\u0107 plik AVIF z cache. Ustaw ten nag\u0142\u00f3wek na w\u0142asnym NGINX i sprawd\u017a, czy cache proxy albo CDN go respektuje - to ta sama dyscyplina, kt\u00f3ra daje Ci <a href=\"https:\/\/jalvo.eu\/pl\/cache-reverse-proxy-a-seo-bez-nieaktualnych-stron\/\">cache proxy bez nieaktualnych stron<\/a>. Uwagi wymaga te\u017c ochrona oparta na nag\u0142\u00f3wku Referer. Rozszerz bloki location z <code>valid_referers<\/code> tak, aby obejmowa\u0142y rozszerzenie <code>avif<\/code>, dzi\u0119ki czemu nowe pliki b\u0119d\u0105 podlega\u0107 Twoim dotychczasowym <a href=\"https:\/\/jalvo.eu\/pl\/ochrona-przed-hotlinkingiem-nginx-grafika-google\/\">regu\u0142om hotlinkowania, a Grafika Google<\/a> nadal b\u0119dzie je pobiera\u0107. Reverse proxy takie jak Jalvo, z adresami IP w UE i USA, przekazuje odpowied\u017a serwera \u017ar\u00f3d\u0142owego dalej, wi\u0119c o formacie i nag\u0142\u00f3wkach decyduje serwer \u017ar\u00f3d\u0142owy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak sprawdzi\u0107, czy obrazy AVIF nadal dzia\u0142aj\u0105 w SEO obraz\u00f3w<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Najpierw curl, potem Search Console. Wy\u015blij \u017c\u0105dania z r\u00f3\u017cnymi nag\u0142\u00f3wkami <code>Accept<\/code>, a nast\u0119pnie potwierd\u017a w Search Console, \u017ce adresy URL obraz\u00f3w s\u0105 pobierane bez b\u0142\u0119d\u00f3w. Por\u00f3wnaj dwa \u017c\u0105dania:<\/p>\n\n\n\n<pre><code>curl -I -H 'Accept: image\/avif' https:\/\/example.com\/img\/hero.jpg\ncurl -I https:\/\/example.com\/img\/hero.jpg<\/code><\/pre>\n<p class=\"wp-block-paragraph\">Pierwsze powinno zwr\u00f3ci\u0107 <code>Content-Type: image\/avif<\/code>, drugie oryginalny typ. Oba powinny zawiera\u0107 <code>Vary: Accept<\/code>. Zachowaj te\u017c bez zmian tekst alt, otaczaj\u0105c\u0105 tre\u015b\u0107 i map\u0119 witryny obraz\u00f3w, bo wytyczne Google m\u00f3wi\u0105, \u017ce tre\u015b\u0107 i metadane strony, na kt\u00f3rej osadzono grafik\u0119, mocno wp\u0142ywaj\u0105 na to, jak i gdzie pojawia si\u0119 ona w wynikach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bezpieczne serwowanie obraz\u00f3w AVIF to tak naprawd\u0119 po prostu stopniowe wdro\u017cenie. Zacznij od garstki ci\u0119\u017ckich plik\u00f3w. Wprowad\u017a przekierowania albo <code>Vary<\/code>, zanim rozszerzysz zmian\u0119. Sprawdzaj nag\u0142\u00f3wki ponownie po ka\u017cdej edycji konfiguracji (tak, po ka\u017cdej).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1790879573756-0\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Czy musz\u0119 co\u015b zrobi\u0107, \u017ceby Google indeksowa\u0142 pliki AVIF?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Nie. W og\u0142oszeniu Google czytamy, \u017ce nie s\u0105 potrzebne \u017cadne specjalne kroki. Standardowe sprawdzone metody dotycz\u0105ce obraz\u00f3w nadal jednak obowi\u0105zuj\u0105: odwo\u0142uj si\u0119 do pliku w elemencie <code>img<\/code>, dbaj o opisowy tekst alt i umieszczaj wa\u017cne grafiki w mapie witryny obraz\u00f3w.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1790879573756-1\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Czy przej\u015bcie na AVIF zmieni adresy URL moich obraz\u00f3w?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Tylko wtedy, gdy zmienia si\u0119 nazwa pliku albo rozszerzenie. W takim przypadku ustaw przekierowania po stronie serwera ze starego adresu na nowy. Chcesz, \u017ceby adresy URL pozosta\u0142y nietkni\u0119te? Serwuj wtedy wariant AVIF przez negocjacj\u0119 Accept.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1790879573756-2\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Dlaczego nag\u0142\u00f3wek Vary ma znaczenie przy serwowaniu AVIF z NGINX?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Poniewa\u017c informuje cache, \u017ce odpowied\u017a zale\u017cy od nag\u0142\u00f3wka \u017c\u0105dania <code>Accept<\/code>. Bez niego cache mo\u017ce zapisa\u0107 wersj\u0119 AVIF i przekaza\u0107 j\u0105 klientowi, kt\u00f3ry nie potrafi jej zdekodowa\u0107. Dzi\u0119ki <code>Vary: Accept<\/code> ka\u017cdy typ klienta dostaje format, kt\u00f3ry rozumie.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Wyszukiwarka Google indeksuje obrazy AVIF od og\u0142oszenia Google o obs\u0142udze AVIF z 30 sierpnia 2024 r. NGINX mo\u017ce je dostarcza\u0107 na dwa sposoby: pod nowymi nazwami plik\u00f3w z przekierowaniami albo pod niezmienionymi adresami URL dzi\u0119ki negocjacji opartej na nag\u0142\u00f3wku Accept. Kt\u00f3ry wybra\u0107? To zale\u017cy od tego, jak bardzo zale\u017cy Ci na stabilnych adresach obraz\u00f3w i [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":2368,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[182],"tags":[452,247,464,28,484,463],"class_list":["post-2388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo-pl","tag-avif-x","tag-nginx-x","tag-optymalizacja-obrazow","tag-seo-pl","tag-webp-x","tag-wyszukiwarka-google"],"acf":[],"_links":{"self":[{"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/posts\/2388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/comments?post=2388"}],"version-history":[{"count":0,"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/posts\/2388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/media\/2368"}],"wp:attachment":[{"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/media?parent=2388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/categories?post=2388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jalvo.eu\/pl\/wp-json\/wp\/v2\/tags?post=2388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}