plugin témájú írások

Weboldal sebesség teszt – SEO elemzés 3.

Weboldal sebesség teszt – SEO elemzés 3.

A honlap sebesség is rangsorolási tényező! Messze nem a legmeghatározóbb ugyan, de fontos! Ugyanis, ha webhelyed nem elég gyorsan töltődik be, és a látogatóidnak nem lesz türelme vagy ideje kivárni, akkor  idő előtt lelépnek, és visszamennek a találati listára. Ezzel viszont azt üzenik a Google-nek, hogy nem volt jó a honlapod, és lejjebb sorolhatja a találati listában. Lehet, hogy szuper a tartalmad, csak éppen a weboldal sebesség szörnyen lassú. Az online weboldal sebesség teszt segít kideríteni, hogy milyen gyors a weboldalad, és min érdemes változtatni.

Weboldal sebesség teszt 9 perces videó

A weboldal sebesség teszt videós átirata

Google PageSpeed Insights – weboldal sebesség teszt

  1. Első lépésként vizsgáld meg, milyen gyors a weboldalad, teszteld le! Kattints a következő linkre:

Google PageSpeed Insights

  1. Másold be/ írd be a vizsgálandó honlap URL-jét:

Pl.: https://seo.antikaotika-design.hu/

  1. Kattints az ANALYZE (elemzés) gombra! Pár másodpercen belül megkapod a kiértékelést.
  2. Váltogass a MOBILE/DESKTOP fülek között.  85-ös érték felett már elégedett lehetsz!

https://developers.google.com/speed/pagespeed/insights/

A Google PageSpeed Insights egy 1-100-ig terjedő skálán osztályozza a honlapokat.

Ha a teszt eredménye nem kielégítő, akkor azonnali megoldásra van szükségünk!

 

A honlap betöltési idejét többféle módon javíthatod:

Honlap gyorsítás a képek optimalizálásával

Van amelyiket magad  is meg tudod oldani. Több, különböző képszerkesztő programok segíthetnek  a képek tömörítésében. Ha van eredeti fotód, tömörítést követően töltsd fel. A sok felszabadult megabyte-tal javíthatod weboldalad teljesítményét.

Olvasd el: Képátméretezés – képoptimalizálás – SEO tippek 4.

Weboldal sebesség optimalizálása gyorsítótárazással

A WordPress honlapok jól optimalizálhatók, talán csak annyi a gond velük, hogy kell egy kis idő, hogy betöltődjenek, pláne ha a honlapot túlterheljük dizájn elemekkel, amit az én http://retro-vintage.hu honlapomnál elkövettem. Ettől függetlenül nagyon jól teljesít a honlap! 🙂

A honlapsebességet „lazy loading” megoldással is optimalizálhatod úgy, hogy a  dizájn elemek csak fokozatosan töltődnek be, ahogy görgeted az oldalt.

A gyorsításhoz használjuk a „Caching” bővítmények valamelyikét:

Ingyenes honlapsebesség gyorsító WordPress bővítmények:

weboldal sebesség teszt caching plugin előtt

Weboldal sebesség teszt caching plugin előtt

 

weboldal sebesség teszt caching plugin után

Weboldal sebesség teszt caching plugin után

Fizetős honlapsebesség gyorsító WordPress bővítmény:

WP-Rocket

 

Weboldal sebességet befolyásoló további tényezők

  • szerver válaszideje
  • böngésző gyorsítótárazása
  • szkriptek és CSS tömörítése
  • stb.

Google PageSpeed Insights teszten kívül az alábbi sebességteszteket is érdemes megnézni, hogy a fenti problémákról minél több infót megkapj:

A honlapod gyorsítását bízd szakemberre, és ügyelj arra, hogy a változtatások előtt legyen biztonsági mentés!

Képszerkesztő programok – SEO tippek 5.

Képszerkesztő programok – SEO tippek 5.

Képszerkesztő programok – SEO tippek 5.

A Képátméretezés – képoptimalizálás cikkben leírtam, hogy miért fontos keresőoptimalizálás szempontjából a megfelelő képméret kiválasztása.  Hogyan tudod az adott képet a lehető legkisebb fájlméretűre csökkenteni úgy, hogy közben a képminőség szemmel láthatóan ne romoljon? Ebben segítenek az  online és offline képszerkesztő programok. Melyiket válaszd? Segítek!

2021-es frissítés! Tömeges képátméretezés Photoshop programmal egyszerűen: ITT

Én bemutatom…

  • a szerintem legjobb képszerkesztő programok fajtáit
  • a programok működését
  • az ingyenes képszerkesztőket
  • a fizetős verziókat
  • melyek a legjobb online képszerkesztő programok
  • milyen offline megoldások léteznek

Te pedig eldöntöd, hogy melyik képszerkesztő program a szimpatikus!

 SEO szempontból mit kell szerkeszteni egy képen?

A képszerkesztő programok legtöbbje alkalmas arra, hogy „feljavítsd” a fotóidat különböző effektekkel. Keresőoptimalizálás szempontjából ez nem annyira lényeges. Sokkal fontosabb, hogy az oldalad gyorsan betöltődjön, és ne lassítsák le  gigantikus méretű képek.

A méret a lényeg…

Természetesen a minőség is számít. Gyorsan felejtsd el a Google képkeresőből lelopkodott (és rosszul lementett) 6 KB-os képeket!

  1. a  képek méretét csökkentheted pixelben  (1600 x1200 helyett 800×600)
  2. alkalmazhatsz tömörítést a fájlméret csökkentésével (2 MB helyett 120 KB)
  3. vannak képszerkesztő programok, ahol %-ban is meghatározhatod a képminőséget.

Kattints a jobb egérgombbal a képre, és a Fájladatok/Tulajdonságok menüpontnál meg tudod nézni a kép méretét!

képszerkesztő programok - képméret ellenőrzés

Több megoldást is választhatsz egyszerre: csökkentheted pixelesen és kilobyte-ban is a képeket.  Bármit is választasz, nem árt, ha előnézetben ellenőrzöd a képfelbontást!

 

A legegyszerűbb képátméretezés a WordPress felületén – videó!

 

A következő 6 perces videóban arról lesz szó, hogy, hogyan lehet WordPress honlapon a már feltöltött képeket
átméretezni úgy, hogy a Google is „szeresse”, illetve felhasználóbarát legyen a kép megjelenése. Arra ügyelni kell, hogy a tárhelyet ne foglalja el az eredeti méretben feltöltött hatalmas méretű fájl. Azt is érdemes felülírni.

A Legegyszerűbb képszerkesztés videó átirata – ha inkább olvasni szeretsz

 

Bizonyára megtörtént velünk, hogy több MB-os, hatalmas fájlméretű fotókat tettünk fel a WordPress
honlapunkra, és semmi kedvünk sincs leszedni a képeket, átszerkeszteni, majd újra visszatöltögetni!

A kép mérete SEO szempontból is fontos, hiszen befolyással bír a honlap betöltési sebességére.

Arról nem is beszélve, hogy a kedves látogatóinknak nem lesz türelmük kivárni a honlapunk
betöltését és mielőtt meglátnák a csodás, hatalmas képekkel teli honlapunkat, már huss, tovább is
kattintottak.

Tehát az, hogy milyen gyorsan töltődik az oldalunk, függ attól, hogy több MB-os képek vannak
elhelyezve a weboldalunkon, vagy csak 30-200 kB méretűek.

A cikkemben írok különböző képszerkesztő programokról. Léteznek online megoldások, letölthető képszerkesztő programok, valamint képoptimalizáló bővítmények is rendelkezésünkre állnak.

Ha nem akarunk sem bővítményekkel, sem letöltött programokkal bajlódni, akkor nézzük, mit
tehetünk.

A videóban bemutatom a korábban feltöltött, médiatárban található képek átméretezését lépésenként, ami nem a leggyorsabb ugyan, de legalább kéznél van:

  1. belépünk a médiatárba
  2. csempemódra állítjuk a nézetet
  3.  kiválasztjuk a kívánt fotót
  4.  kitöltjük az alternatív, helyettesítő szöveget (kulcsszavakat is felhasználva)
  5. a kép szerkesztésére kattintunk
  6. beállítjuk a kívánt szélességet.
  7. Pl. 320 x 214 px  A magasság automatikusan idomul majd hozzá. Ne torzítsuk a képet!
  8. A mentés gombra kattintva, hamarosan megjelenik az eredmény, hogy a fotó fájlmérete 25 kB lett 2 MB helyett. 🙂

Érdemes már az elején tudni, hogy az adott képe mire fogjuk használni. Ugyanis ha pl. teljes képernyő méretben akarjuk feltenni, akkor 320 px  nem lesz elég.

A megfelelő képméret kiválasztásáról részletesen olvashatsz a követező cikkben:

 https://seo.antikaotika-design.hu/mediaoptimalizalas-kepatmeretezes-seo-tippek-4/

 

WP Image Size Limit – Limitáld a feltölthető képek nagyságát!

Persze csak ha akarod. Én ezt a megoldást személy szerint nem szeretem, de ha WordPress alapú honlapod van, akkor a WP Image Size Limit bővítménnyel beállíthatod, hogy mekkora legyen az a maximális fájlméret, amit még feltölthetsz a weboldaladra.

Beállítod  – mondjuk –  a 350 Kb-ot, mint maximumértéket, aztán ha ennél nagyobb képpel próbálkozol, akkor hibajelzést kapsz, hogy a képed mérete meghaladja a keretet. Na és akkor keresgélhetsz a képszerkesztő programok között, hogy melyikkel tudod a megfelelő méretű fájlt létrehozni.

 

Optimizilla – online képoptimalizáló

 

Ez egy nagyon szimpatikus képszerkesztő felület. Több nyelven elérhető, amiből sajnos a magyar kimaradt. Ez azért ne rettentsen el, mert nyelvtudás nélkül is egyszerű  Maximum 20 képet tölthetsz fel egyszerre az UPLOAD FILES gombra kattintva. Egyszerűen tudod  zsugorítani a JPEG és PNG képeket a lehető legkisebbre méretre, ami még megőrzi a szükséges minőségi szintet.

Képszerkesztő programok - Optimizilla

A tömörítés befejezése után könnyedén ellenőrizheted a minőséget a képekre kattintva.  A csúszka segítségével finomíthatsz a beállításon. Összehasonlíthatod az eredményt az eredeti képpel. Ránagyíthatsz a részletekre. Megadhatod a tömörítés mértékét, és azt is pontosan láthatod, hogy hány kilobyte lesz az eredmény.

Ha elégedett vagy a látvánnyal, kattints at APPLY gombra. Majd a DOWNLOAD ALL gombra kattintva egy tömörített mappában elmentheted az átméretezett képeket.

Kipróbálom: Optimizilla

 

TinyPNG – online képtömörítő és/vagy honlap bővítmény.

Az online alkalmazás hasonló, mint az Optimizilla esetében, itt is 20 képet tölthetsz fel egyszerre, amelyek egyenként nem lehetnek nagyobbak 5 MB-nál. A TinyPNG alkalmazása csökkenti a képek minőségét, törli a meta infókat, így ér el méretcsökkenést.

Képátméretezés TinyPNG

69%-kal tömörített képeknél 489 KB-ot spórolhatsz!

Itt nem tudod módosítani és „menet közben” megtekinteni a képeket,  de a  tömörített fotókat lementheted a gépedre vagy Dropboxba.

Van WordPress plugin is hozzá, amivel automatizálni tudod minden feltöltött kép méretének az optimalizálását.

Nézd meg a 8 perces videómat arról, hogy hogyan működig a TinyPNG bővítmény!

A TinyPNG előnye az, hogy a feltöltött képet is optimalizálja (tehát az eredetit), így tárhelyet spórolhatunk meg vele.

A TinyPNG hátrányai: lassú, mivel külső szerveren dolgozza át a képeket, továbbá havi 500 kép után fizetős. Az 500-as ingyen kép a gyakorlatban kb. 100 képre elegendő, hiszen a WP készít 4-5 képméretet feltöltésenként és azokat is optimalizálja.

Próbáld ki: TinyPNG

Képátméretezés Photoshopban

Adobe Photoshop Save for Web BoxHa  Photoshopban szerkeszted a fotóidat a Fájl menüben találod a Save for Web vagy magyarul a mentés webre funkciót. Újabban ezt az Exportálás menüpontban találod.Itt  megfelelően optimalizálhatod a tömörítési, és színkezelési beállításokat, kifejezetten az interneten való megjelenésre.

Photoshop meglehetősen drága –  kb. 26 € havonta, a próbaverziót viszont 30 napig használhatod ingyen.

Próbáld ki: Photoshop

 

Frissítés! Tömeges képátméretezés Photoshop programmal egyszerűen

GIMP képszerkesztő program

A Photoshop ingyenes változataként szokták emlegetni, bár a dizájnerek nem sokra becsülik. Arra viszont alkalmas, hogy elvégezd rajta a képoptimalizálást.

A Képméret menüpontban a Szélességet és Magasságot megadhatod számértékben, vagy a kis ablak melletti fel-le nyilakra kattintva.

A két ablak melletti „lánc” ikon legyen bekapcsolva! Az arány így változatlan marad, a kép nem torzul.

A képméret mértékegysége sokféle lehet. Alapvetően képpont (pixel) és százalék, de beállíthatsz, hüvelyk, milliméter, pont és pica stb. mértékegységet is.

A képet monitoron nézve  elég lehet a 72 képpont/inch is (X-felbontás, Y-felbontás).

Töltsd le itt a GIMP képszerkesztő programot!

 

Pixlr – online képszerkesztő program

Egyszerű fotó- és grafika szerkesztőprogram, bár a képátméretezésnél jóval többet tud.

3 alapvető eszközt tartalmaz:

  • Pixlr Editor – eszközök széles választékát adja grafikák szerkesztéséhez
  • Pixlr Express – színt és szöveget lehet adni vele a képhez
  • Pixlr O-Matic – keretet, különböző effekteket tudsz vele hozzáadni

 

A Pixlr Editor  ingyenes fotószerkesztőt közvetlenül elérheted a böngészőnkből.  Pixlr Editor használatához nincs szükség semmilyen letöltésre.

A program eszközei és funkciói hasonlóak a legtöbb népszerű képszerkesztő szoftveréhez, mint a Gimp, Paint Shop Pro vagy a Photoshop. Számos, a desktop programokban fellelhető funkció megvan benne, de szinte semennyi helyet nem foglal.

Próbáld ki: Pixlr

 

PicResize – online képszerkesztő program

Ingyenes szoftverszámos lehetőséggel, és viszonylag egyszerű használattal. Bár szerintem nem annyira egyértelmű a kezelőfelülete.

Ami leginkább mellette szól, hogy megszerkesztheted vele  a közvetlenül az internetről  leszedett képet is.

Képszerksztő programok PicResize

Először válaszd ki a képet a számítógépedről, vagy egy URL címről. A “Contiune”-ra kattintva megérkezel az oldalra, ahol a képedet igényeid szerint át tudod alakítani 4 egyszerű lépésben:

  • levághatod a kép egy részét, valamint elforgathatod
  • átméretezheted
  • speciális effekteket adhatsz hozzá
  • az átalakított képet jpg, gif, png, bmp formátumban mentheted el

Megmondom őszintén nem vagyok tőle elájulva, pedig úgy hirdeti magát, mint az internet legegyszerűbb ás legjobb képátméretező programja.

A fenti képet így tömörítette:

Túl kicsi a felbontás

4 KB-os kép az eredmény -ez nem sok mindenre elég…

 

Convert My Image – válassz képformátumot

A Convert My Image gyakorlatilag egy feladatot lát el: átalakítja egy kép formátumát. Rengeteg formátumot használhatsz:

Az alábbi fájlformátumokban oda-vissza konvertálhatod a képeidet:

PNG, JPG/JPEG, GIF, TIF/TIFF, BMP, RPG, XPM, PIC, PDF, EPS, PS

 

Képszerkesztő programok összegzés – mi az, ami nekem bevált?

Természetesen a felsoroltaknál sokkal több képszerkesztő program van. Számos népszerű eszközt kipróbáltam, ami kimaradt a listából, egészen egyszerűen azért, mert nem úgy működtek, ahogy azt elvártam.

Az én kedvencem az Optimizilla volt, mert látom is az eredményt tömörítés közben. Most viszont a tömeges átméretezés miatt  a Photoshop-ot használom. A WordPresshez pedig a TinyPNG plugint szoktam meg.

Ha ismersz olyan képszerkesztő programokat, amelyek neked beváltak, vagy amelyekről szívesen hallanál véleményt, írd meg a Hozzászólás írása részben a bejegyzés alatt!

Antal-Pap Judit

Antal-Pap Judit

Antal-Pap Judit

SEO szakember,  keresőoptimalizálás szakértő, web-designer

Saját honlapok:

AntikaotikaAntikaotika-designAntikaotika-SEORetro-Vintage

Yoast SEO magyar fordítás – Yoast SEO Hungarian translation

Yoast SEO magyar fordítás – Yoast SEO Hungarian translation

Yoast SEO magyar fordítás – Yoast SEO Hungarian translation

A Yoast Seo magyar fordítás sokat segíthet akkor, amikor önállóan szeretnéd beállítani a blogodat úgy, hogy az általad kiválasztott kulcsszóra minél előbb jelenjen meg az írásod a Google kereső találati listáján. Mivel sok kifejezés csak angolul jelenik meg, ezért döntöttem úgy, hogy egy kis mankót készítek, hogy pontosan megértsd, hogy mi mit jelent, amikor különböző üzeneteket kapsz a beállításoddal kapcsolatosan. A lista nem teljes, a fordítás inkább értelemszerű, mint szószerinti. A hozzászólásokban közölheted észrevételeidet, fordítási javaslataidat.

A Keresőoptimalizált szövegírás – ahogy a Google szereticímű videós blogbejegyzésésemben részletesen bemutattam, hogy hogyan tudod használni ehhez a fent említett plugint (bővítményt), amelyet az alábbi linkre kattintva le is tölthetsz a honlapodhoz: Yoast SEO.

Yoast SEO magyar fordítás – Oldalcím

The page title is wider than the viewable limit. | Yoast SEO Hungarian translation →
Az oldal címe túl széles, ezért egy része nem lesz látható
The focus keyword '.....' does not appear in the SEO title. | Yoast SEO Hungarian translation →
A „…” kulcsszó nem jelenik meg a SEO címben.

Yoast SEO magyar fordítás – Alcímek

The focus keyword appears in 1 (out of 10) subheadings in the copy. While not a major ranking factor, this is beneficial. | Yoast SEO Hungarian translation →
A központi kulcsszó megjelenik 1 alcímben (kiemelésben) ( a 10-ből) a bejegyzésben. Bár ez nem elsődleges rangsorolási tényező, de előnyös.
The amount of words following each of the subheadings doesn't exceed the recommended maximum of 300 words, which is great. | Yoast SEO Hungarian translation →
A központi kulcsszó megjelenik 1 alcímben (kiemelésben) ( a 10-ből) a bejegyzésben. Bár ez nem elsődleges rangsorolási tényező, de előnyös.
You have not used the focus keyword in any subheading (such as an H2) in your copy. | Yoast SEO Hungarian translation →
Az alcímekben (pl. H2) nem szerepel a kulcsszó.

Yoast SEO magyar fordítás – URL

The focus keyword does not appear in the URL for this page. If you decide to rename the URL be sure to check the old URL 301 redirects to the new one! | Yoast SEO Hungarian translation →
A központi kulcsszó nem jelenik meg az oldal URL-ben. Ha úgy dönt, hogy átnevezi az URL-t, ellenőrizze, hogy be legyen állítva  a régi URL-301 átirányítás  az újra!
The focus keyword appears in the URL for this page. | Yoast SEO Hungarian translation →
Ennek az oldalnak a fő kulcsszava megjelenik a URL-ben.

Yoast SEO magyar fordítás – Meta leírás

In the specified meta description, consider: How does it compare to the competition? Could it be made more appealing? | Yoast SEO Hungarian translation →
Vegye fontolóra: a  megadott meta leírás hogyan viszonyul a versenytársakéhoz? Lehetne ezt  esetleg még vonzóbbá tenni?

 

A meta description has been specified, but it does not contain the focus keyword. | Yoast SEO Hungarian translation →
A meta leírás meg lett adva, de nem tartalmazza a központi kulcsszót.
The meta description contains the focus keyword.| Yoast SEO Hungarian translation →
A meta leírás  tartalmazza a központi kulcsszót.
The specified meta description is over 156 characters. Reducing it will ensure the entire description is visible. | Yoast SEO Hungarian translation →
A meta leírás meghaladja a 156 karaktert (leütést). Ahhoz hogy a teljes leírás látható legyen, csökkentenie kell a leütések számát.

Yoast SEO magyar fordítás – Linkek

No links appear in this page, consider adding some as appropriate. | Yoast SEO Hungarian translation →
Nem jelenik meg link az oldalon. Vegye fontolóra néhány ideillő link hozzáadását.

 

This page has 0 nofollowed link(s) and 1 normal outbound link(s). | Yoast SEO Hungarian translation →
Ez az oldal 0 nofollow attribútummal ellátott linket és 1 normál kimenő linket (más oldalra való hivatkozást) tartalmaz.

 

Yoast SEO magyar fordítás – Tartalom

The text contains ... words. This is far below the recommended minimum of 300 words. Add more content that is relevant for the topic. | Yoast SEO Hungarian translation →
A szöveg …. szót tartalmaz. Ez messze elmarad az ajánlott minimum 300 szótól. Adjon hozzá még több -a témához kapcsolódó –  tartalmat!

 

The text contains 309 words. This is more than or equal to the recommended minimum of 300 words. | Yoast SEO Hungarian translation →
A szöveg 309 szót tartalmaz. Ez több vagy megegyezik az ajánlott minimum 300 szóval.
You've never used this focus keyword before, very good.| Yoast SEO Hungarian translation →
Eddig még soha nem használta ezt a központi kulcsszót , nagyon jó.

 

No focus keyword was set for this page. If you do not set a focus keyword, no score can be calculated. | Yoast SEO Hungarian translation →
Nincs központi kulcsszó  beállítva ezen az oldalon. Ha nem állít be központi kulcsszót, nem lehet eredményt számítani.

 

The focus keyword doesn't appear in the first paragraph of the copy. Make sure the topic is clear immediately.
The központi kulcsszó nem jelenik meg az első bekezdésben. Fontos, hogy a téma világos legyen már a legelején.
The keyword density is 1.8%, which is great; the focus keyword was found 5 times. | Yoast SEO Hungarian translation →
A kulcsszó sűrűség 1,8%, ami kiváló! A  kulcsszó 5 alkalommal jelenik meg a szövegben.

Yoast SEO magyar fordítás – Képek

No images appear in this page, consider adding some as appropriate. | Yoast SEO Hungarian translation →
Az oldalon nem jelennek meg képek. Kérjük, fontolja meg az ide illő képek beillesztését!
The images on this page contain alt attributes with the focus keyword. | Yoast SEO Hungarian translation →
A képekhez tartozó „alternatív szövegek”  tartalmazzák a kiemelt kulcsszót ezen az oldalon.
Antal-Pap Judit

Antal-Pap Judit

SEO szakember,  keresőoptimalizálás szakértő, web-designer

Saját honlapok:

AntikaotikaAntikaotika-designAntikaotika-SEORetro-Vintage