A Google Képekkel kapcsolatos bevált módszerek

áfonyás smoothie

A Google Képek segítségével vizuálisan fedezhetők fel információk az interneten. A felhasználók gyorsan juthatnak információkhoz a legújabb funkciók nyújtotta több kontextusnak köszönhetően (például: képfeliratok, szembetűnő jelvények és AMP-találatok). 

Ha több kontextust közöl képeiről, a találatok hasznosabbá válhatnak, ami jobb minőségű forgalmat eredményezhet webhelyén. Segítheti a felfedezési folyamatot azáltal, hogy meggyőződik arról, képei és webhelye optimálisan működnek a Google Képekkel. Irányelveink betartásával növelheti annak valószínűségét, hogy tartalma megjelenik a Google Képek találatai között.

A képkeresési hotlinking elkerülése

Ha szeretné, megakadályozhatja a teljes méretű kép megjelenítését a Google képkeresési találatokat tartalmazó oldalán úgy, hogy letiltja a Google képkeresési találatai között való hotlinkinget.

A hotlinking elkerüléséhez:

  1. A kép lekérésekor vizsgálja meg a kérésben a HTTP-hivatkozó fejlécét.
  2. Ha a kérés Google-domainről érkezik, a válasz HTTP 200 vagy 204 legyen, tartalom nélkül.

A Google továbbra is feltérképezi az oldalt, és látja a képet, de a feltérképezéskor generált indexképet jelenít meg a keresési találatok között. Ez a megoldás bármikor kivitelezhető, és nem igényli a webhely képeinek újbóli feldolgozását. Ez a viselkedés nem minősül képálcázásnak, és nem vezet kézi művelethez.

Arra is lehetősége van, hogy teljes mértékben megakadályozza a kép megjelenését a keresési találatok között.

Alapozza meg a jó felhasználói élményt

Ha növelni szeretné tartalmának láthatóságát a Google Képekben, koncentráljon a felhasználóra, nyújtson számára nagyszerű felhasználói élményt: az oldalakat elsősorban a felhasználók számára készítse, ne pedig a keresőmotorok számára. Íme néhány ötlet:

  • Biztosítson jó kontextust: A vizuális tartalom legyen releváns az oldal témája szempontjából. Azt javasoljuk, hogy csak akkor jelenítsen meg képeket, ha azok eredeti értéket adnak hozzá az oldalhoz. Kifejezetten ellenezzük az olyan oldalakat, ahol sem a szöveg, sem a képek nem eredeti tartalmak.
  • Optimalizálja az elhelyezést: Amikor csak lehetséges, helyezze a képeket a kapcsolódó szöveg közelébe. Fontolja meg a legfontosabb képnek az oldal teteje környékén való elhelyezését, ha annak van értelme.
  • Ne ágyazzon be fontos szöveget a képekbe: Kerülje a szövegek képekbe való beágyazását, főleg fontos szövegelemeknél (például az oldal címsorainál és menüelemeinél), mert azok nem minden felhasználó számára hozzáférhetők (és az oldalt lefordító eszközök nem működnek a képeken). Hogy tartalmai a lehető leghozzáférhetőbbek legyenek, a szövegeket HTML-formátumban adja meg, és biztosítson alternatív szöveget a képekhez. 
  • Informatív, jó minőségű webhelyeket készítsen: A weboldalakon lévő jó tartalom épp olyan fontos, mint a vizuális tartalom a Google Képekben – kontextust biztosít, és hasznosabbá teszi a találatot. Az oldalak tartalma alapján rendszerünk szövegkivonatot hozhat létre a képekhez, továbbá a képek rangsorolásakor figyelembe vesszük az oldaltartalom minőségét is.
  • Eszközbarát webhelyeket készítsen: A felhasználók gyakrabban használják mobilról a Google Képeket, mint asztali számítógépről. Fontos tehát, hogy webhelyét minden eszköztípus és -méret figyelembe vételével tervezze. A mobilbarát tesztelőeszköz használatával tesztelheti oldalai működését mobileszközökön, és visszajelzést kaphat a javítandó területekről.
  • Hozzon létre jó URL-szerkezetet képei számára: A Google az URL útvonalát és a fájl nevét is használja a képek megértéséhez. Úgy tanácsos kialakítani a képtartalmat, hogy az URL-ek logikusan épüljenek fel.

Ellenőrizze az oldal címét és leírását

A Google Képek automatikusan generál címet és szövegkivonatot az egyes találatokhoz, hogy minél érthetőbb legyen a találat, illetve a találat és a felhasználói lekérdezés közötti kapcsolat. A felhasználók így könnyebben eldönthetik, hogy érdemes-e rákattintani a találatokra.

Ezeket az információkat több forrásból gyűjtjük össze, például az oldalak title és meta címkéjében található leírásból. 

Segíthet az oldalaihoz megjelenő címek és kivonatok minőségének javításában, ha követi a Google címekre és kivonatokra vonatkozó irányelveit.

Strukturált adatok hozzáadása

Ha strukturált adatokat is használ, a Google Képek bővített találatokként is megjelenítheti webhelye képeit. A bővített találatok szembetűnő jelvényt is tartalmaznak, amely fontos adatokat közöl az oldalról, és hatékonyabban irányíthat célzott forgalmat webhelyre. A Google Képek a következő típusú strukturált adatokat támogatja:

Kövesse a strukturált adatok általános irányelveit, valamint az adott típusú strukturált adathoz tartozó specifikus irányelveket; ellenkező esetben előfordulhat, hogy a strukturált adatok nem jogosultak bővített találat megjelenítésére a Google Képekben. Az összes ilyen típusú strukturált adat esetében kötelező mező a kép attribútum ahhoz, hogy a Google Képekben jelvénnyel és bővített találatként jelenhessenek meg.

Sebességoptimalizáció

Az oldalak mérete gyakran a képek miatt válik naggyá, a nagy méret pedig lassúvá és költségessé teheti az oldalbetöltést. Alkalmazza a legújabb képoptimalizáló megoldásokat és a reszponzív képtechnológiákat, hogy egyszerre biztosíthasson jó minőséget és gyors működést.

A Google Képek felületén az AMP embléma  segíti a felhasználókat a gyorsan és akadálymentesen betöltődő oldalak felismerésében. Fontolja meg azt, hogy a képet tároló oldalt AMP-oldallá alakítja az oldal betöltési idejének csökkentése érdekében (a céloldal az az oldal, amelyre a felhasználó kerül, amikor valamelyik találatra kattint a Google Képekben).

Elemezze webhelye sebességét a PageSpeed Insights eszközzel, és keresse fel a Web Fundamentals oldalt, ha további információhoz szeretne jutni a webhelyek teljesítményének javítására szolgáló bevált módszerekről és technikákról.

Adjon meg jó minőségű fotókat

A jó minőségű fotók vonzóbbak a felhasználók számára, mint a homályos, életlen képek. A találat éles indexképe vonzóbb a felhasználók számára, és nagyobb eséllyel eredményez felhasználói forgalmat a webhelyen.

Használjon a képeknél leíró címet, képaláírást, fájlnevet és szöveget

A Google az oldal tartalmából (például a képaláírásokból és a képcímekből) nyeri ki a kép témájával kapcsolatos adatokat. Amikor csak lehetséges, helyezze a képeket a hozzájuk tartozó szöveg közelébe, illetve olyan oldalakon jelenítse meg őket, amelyek relevánsak a kép témájának szempontjából. 

A fájlnév is információt nyújthat a Google számára a kép témájáról. Például a my-new-black-kitten.jpg jobb elnevezés, mint az IMG00023.JPG.

Használjon leíró alternatív szöveget

Az alternatív (a képet leíró) szöveg javítja a hozzáférhetőséget azon felhasználók számára, akik nem látják a weboldalak képeit (például képernyőolvasót használnak, vagy alacsony sávszélességű kapcsolattal rendelkeznek).

A Google számítógépes látást elősegítő algoritmusokkal és az oldal tartalmával együtt használja az alternatív szövegeket a képek témájának megértéséhez. A képek alternatív szövege horgonyszövegként is hasznos, ha a képet linkként használja. 

Az alternatív szöveg meghatározásakor figyeljen arra, hogy hasznos, információban gazdag tartalmat hozzon létre, amely megfelelően használja a kulcsszavakat, és illeszkedik az oldalon található tartalmak kontextusába. Ne töltse ki az alt attribútumokat kulcsszavakkal (kulcsszóhalmozás), mert rossz felhasználói élményhez vezet, és spamnek minősülhet a webhely miattuk.

  • Rossz (nincs alternatív szöveg): <img src="kutyus.jpg"/>
  • Rossz (kulcsszóhalmozás): <img src="kutyus.jpg" alt="kutyus kutya kiskutya kiskutyák kutyusok kölyökkutyák retriever labrador farkaskutya vizsla vadászvizsla russell terrier kiskutyák kutya kaja olcsó kutyakaja olcsó kaja kiskutya"/>
  • Jobb: <img src="kutyus.jpg" alt="kutyus"/>
  • Legjobb: <img src="kutyus.jpg" alt="A dalmatakölyök visszahozza a játékot"/> 

Javasoljuk, hogy tesztelje tartalmait a hozzáférhetőség ellenőrzésével és lassú hálózati kapcsolatot emuláló eszköz segítségével.

Segítsen képei felfedezésében

Szemantikus jelölés képekhez

A Google indexeli az oldalak HTML-fájljaiban szereplő képeket, de a CSS-ben hivatkozott képeket nem.

  • Jó: <img src="kutyus.jpg" alt="Golden retriever kutyus" />
  • Rossz: <div style="background-image:url(kutyus.jpg)">Golden retriever kutyus</div>

Webhelytérkép használata képekhez

A képek fontos információforrást jelentenek a webhelye tartalmával kapcsolatban. Képwebhelytérkép előállításával további információkat nyújthat webhelye képeiről, valamint azon képek URL-jére is felhívhatja figyelmünket, melyeket egyébként nem találtunk volna meg.

A képwebhelytérképek más domainek URL-jeit is tartalmazhatják. (Ez nem igaz a hagyományos webhelytérképekre, melyek korlátozzák a domainközi használatot.) Így CDN-t (tartalomelosztó hálózatot) is használhat a képek tárolására. Javasoljuk a CDN domainnevének ellenőrzését a Search Console szolgáltatásban, hogy tájékoztathassuk az esetleges feltérképezési hibákról.

Támogatott képformátumok

A Google Képek a következő képformátumokat támogatja: BMP, GIF, JPEG, PNG, WebP, SVG. 

A képeket elhelyezheti soron belüli adat-URI-ként is. Adat-URI-ként soron belül helyezhet el fájlt (például képet) úgy, hogy (képek esetén) az img elemek src attribútumában Base64-kódolású karakterláncot közöl a következő formátumban:

<img src="data:image/svg+xml;base64,[adat]">

A képek ilyen módú soron belüli elhelyezésével csökkenthető a HTTP-kérések száma, mégis fontos, hogy használatukat alaposan átgondolja, hiszen jelentősen növelhetik az oldal méretét. További részletekért olvassa el a képek soron belüli elhelyezésének előnyeiről és hátrányairól szóló szakaszt Web Fundamentals oldalunkon.

Reszponzív képek

Weboldalait számos különféle eszközről használhatják, ezért a reszponzív tervezéssel jobb felhasználói élményt nyújthat. Web Fundamentals oldalunk képekről szóló szakaszából megismerheti a képek kezelésének bevált módszereit.

A weboldalak az <img srcset> attribútummal vagy a <picture> elemmel jelezhetik a reszponzív képeket. Bizonyos böngészők és feltérképező robotok ezeket az attribútumokat nem ismerik fel, ezért javasoljuk, hogy mindig határozzon meg tartalék URL-t is az img src attribútummal.

Az srcset attribútum segítségével ugyanazon képnek több változatára is hivatkozhat, melyek mind más képernyőméretekhez illeszkednek.

Példa: <img srcset>

<img srcset="example-320w.jpg 320w,
             example-480w.jpg 480w,
             example-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="example-800w.jpg" alt="responsive web!">

A <picture> elem olyan tároló, amely ugyanannak a képnek a különböző változatait csoportosítja <source> elemek formájában. Tartalékmegoldást jelent, mellyel a böngésző az eszköz képességeitől – például a képpontsűrűségtől és a képernyőmérettől – függően választhatja ki a megfelelő képet. A picture elem akkor is jól jön, ha beépített „kecses lebomlást” nyújtó új képformátumot használ, és ezt az új formátumot a kliens nem támogatja.

Javasoljuk, hogy mindig helyezzen el tartalék img elemet is src attribútummal, ha a picture címkét használja. Kövesse az alábbi formátumot:

Példa: <picture>

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="large PNG image...">
</picture>

Optimalizálás a Biztonságos Kereséshez

A Biztonságos Keresés fiókbeállítással megadható, hogy a nyíltan szexuális jellegű képek, videók és webhelyek megjelenhetnek-e a Google Keresés találatai között. Tájékoztassa a Google-t arról, hogy az Ön képei milyen jellegűek, így szükség esetén alkalmazni tudjuk rájuk a Biztonságos Keresés beállításait.

A csak felnőtteknek szánt képeket közös URL-helyre csoportosítsa

Ha webhelyén felnőtteknek szánt képek is találhatók, erősen javasoljuk, hogy a webhely többi képétől külön csoportosítsa őket. Például: http//www.example.com/adult/image.jpg. 

Metaadatok hozzáadása a felnőtteknek szánt oldalakhoz

Algoritmusaink különféle jeleket használnak annak eldöntésére, hogy ki kell-e szűrni az adott képet vagy a teljes oldalt a találatok közül, amikor be van kapcsolva a felhasználónál a Biztonságos Keresés szűrője. Képek esetén a jelek egy része gépi tanulás használatával keletkezik, de a Biztonságos Keresés algoritmusai egyszerűbb dolgokat is megvizsgálnak, például hogy hol és milyen kontextusban használták korábban az adott képet.

A legerősebb jelek egyike az, amikor önként jelölik meg a felnőtteknek szánt oldalakat. Ha felnőtteknek szánt tartalmat tesz közzé, javasoljuk, hogy adja hozzá oldalaihoz a következő metacímkék egyikét:

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

Sok felhasználó nem szereti, ha felnőtteknek szánt tartalom is megjelenik a keresési találatok között (különösen, ha gyermekek is használják a számítógépet). A fenti metacímkék használatával segíthet a jobb felhasználói élmény kialakításában, mert nem jelennek meg olyan találatok a felhasználók számára, amelyeket nem szeretnének látni, illetve amelyek megjelenésére nem számítanak. 

Végül pedig…

Olvassa el a Bevezetés a SEO világába című útmutatónkat, amelyben hasznos információkat találhat a jobb helyezés eléréséhez. Kérdéseit felteheti a webmestereknek szóló súgófórumban

Hasznosnak találta?
Hogyan fejleszthetnénk?