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.: http://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épátméretezés – képoptimalizálás – SEO tippek 4.

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

 

Ha keresőbarát weboldalt szeretnél, akkor a képeket is optimalizálni kell.  Az elnevezés és az alt attribútum meghatározás mellett nagyon fontos a megfelelő méretű fotók és egyéb illusztrációk alkalmazása. Ebben az esetben gyakori megoldás lehet a képátméretezés. 

Multimédiás tartalmak optimalizálása

 

felhasználói élmény szempontjából fontos, hogy képekkel, videókkal és egyéb interaktív multimédiás tartalommal szemléltessük mondanivalónkat a szöveges tartalom mellett .

A keresők a képeket nem képesek feldolgozni, ezért fontos, hogy kellő információt biztosíts a számukra, mivel ezek értelmezése a legokosabb robotoknak is nehézséget okozhatnak.

 

Van megoldás: alternatív szöveg

 

Az úgynevezett alt attribútum (alternatív szöveg/alt tag/alt tulajdonság) kitöltésével kiegészítő leírásokat adhatsz a multimédiás fájloknak. Elvileg kötelező megadni minden médiaelemhez alt tagot, de ez sok weboldalon elmarad.

A képek kikapcsolásakor például az alt tulajdonságban elhelyezett szöveg a kép helyettesítő szövegeként szerepel  az oldalon.

Az optimális alternatív szöveg:

  • lényegre törő
  • szerepel benne a kulcsszó, de nem mindig kell erőltetni
  • egyedi
  • segíti a médiatartalom megértését
  • utal az anyag tartalmára

A másik fontos elem, ami alapján a  keresők a képek tartalmát azonosítani tudják:  a kép elnevezése: a fájlnév egyezzen meg a kulcsszóval, vagy legalábbis tartalmazza azt.

Ugyancsak kiemelt keresőoptimalizálási szempont a képek betöltődésének sebessége. A találati eredményt képek betöltődési ideje is döntően befolyásolja.

 

Az ideális fotóméret webre – képátméretezés

Mindenki rohan, senkinek semmire sincs ideje! Ha a felhasználó az oldaladra bukkan, mit akar?

Megoldást azonnal!

Ha a weboldalad a nagy felbontású, több megabyte-ot foglaló képek miatt lassan töltődik be, akkor megnő az esélye annak, hogy a látogatók idő előtt elhagyják a honlapodat, mondván máshol gyorsabban hozzájutnak az általuk keresett információhoz.

A Google is komoly figyelmet fordít a weboldalakon megtalálható képek méretére. Olyannyira, hogy a betöltődési sebesség fontos szempont a találati listán elfoglalt helyezéseink meghatározásában.

Minél nagyobb méretű képet akarsz feltölteni a weboldaladra, akkor a látogatónak  annál nagyobb erőforrásra lesz szüksége a kép megtekintéséhez.

A nagy méretű kép viszi a memóriát, a sávszélességet, és egy gyengébb eszköz esetén a felhasználó lelép.

Sajnos ezt a hibát én is elkövettem a webdesigner honlapomnál annak idején. Tökéletes képeket szerettem volna megmutatni, amelyek akkora méretben kerültek fel a weboldalamra, hogy a 2 GB tárhely is kevésnek bizonyult. Ha túl jó a géped és a neted, akkor ez a probléma lehet, hogy fel sem tűnik.

A jelenlegi cikk írásakor még a tömeges képátméretezés nem történt meg, emiatt lassan töltődik a honlap. (A fenti állítás akkor igaz, ha még mindig a barna dizájnt látod.) Itt megnézheted: Antikaotika-design. Bár gyorsítót és képtömörítőt is tettem fel, látszik, hogy amikor a honlap készült, a képoptimalizáláshoz még nem igazán értettem.

Ne ess abba a hibába, amelybe én is beleestem, hogy a saját képeimet nagy méretben töltögettem fel a honlapomra, aztán tárhelyet is kellett bővítenem és bizonyára látogatókat is veszítettem….

 

A képméret – pixelek és byte-ok

– Honnan tudjam, hogy mekkora az ideális képméret a weben?

Képátméretezés előtt jogos a kérdés.

A képpontméretek/ pixelek azt határozzák meg, hogy egy kép hány képpont széles és hány képpont magas. A felbontás egy bitkép részletgazdagsága, amely képpont/hüvelyk (ppi) mértékegységben adható meg. Minél nagyobb a hüvelyenkénti képpontok száma, annál nagyobb a felbontás.

Képátméretezés különböző képernyőn

Egy 620 x 400 képpontos kép különböző méretű és felbontású képernyőkön megjelenítve.

 

FIGYELEM!

1 képpont4 byte-ot foglal el a memóriából 8 bites színmélységnél.

  • 100 x 100px méretű kép  10,000 képpont (vagyis pixel)
  • 10,000 pixel x 4 bytes = 40,000 byte
  • 40,000 byte / 1024 = 39 KB

A kis matek után látható, hogy egy 100 x 100-as kép 39 KB-ot foglal el. Ez a méret természetesen nem alkalmas arra, hogy a képernyő teljes szélességében megcsodáljuk a fotót, mert a kép túl pixeles lesz.

A lenti táblázatból jól látható, hogy mekkora fájlméretre számíthatunk nagyobb méret esetén.

Méret Képpontok Fájlméret
100 x 100 10,000 39 KB
200 x 200 40,000 156 KB
300 x 300 90,000 351 KB
500 x 500 250,000 977 KB
800 x 800 640,000 2500 KB

 

A képméret meghatározása során azt is vedd figyelembe, hogy mekkorában fog maximálisan megjelenni.

 Fejléc, vagy háttér képek esetén ideális a  1920 px szélesség.

Ha ennél kisebb a képed, akkor nagy monitoron nem tölti ki az oldalt, ami csúnya, amatőr hatást eredményez.

Normál monitoron a posztok optimális szélessége továbbra is 600-800 px

Ennyit tud befogni a szemünk egyszerre kényelmesen, így az abban elhelyezett képeket ennél sokkal szélesebbre nem igazán van értelme venni, a felbontás csökkenésével ezek is arányosan csökkennek.

Rohamosan nő a retina /HD  kijelzők száma, amelyek lényege a tökéletesen tiszta kép, amely még nagyobb felbontást kíván.
 
 
 
képátméretezés Retina kijelzőn
 

Amint látod, nem is olyan egyszerű meghatározni a megfelelő képméretet. Neked kell eldöntened, hogy melyik a fontosabb:  a kis fájlméretet vagy a kiváló képminőség.

Válaszd az elváráshoz leginkább illő méretet és kiterjesztést!

Egyszerű ábrákhoz jó lehet a .gif is, színes, részletgazdag képekhez használj magas minőségű .jpg, vagy .png formát!

 
 

Képátméretezés – Hogyan?

A cél tehát az lesz, hogy az adott képet a lehető legkisebb fájlméretűre csökkentsd, hogy ezzel is gyorsítsd az  oldaladat. Ráadásul, ezt úgy kell elérni, hogy közben a képminőség szemmel láthatóan ne romoljon. Szerencsére, erre rengeteg online és offline képszerkesztő program áll rendelkezésedre.

 

Olvasd el a Képszerkesztő programok – SEO tippek 5. című írást!

 

Antal-Pap Judit

Antal-Pap Judit

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

Saját honlapok:

AntikaotikaAntikaotika-designAntikaotika-SEORetro-Vintage

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!

É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 800x600)
  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.

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:

 http://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

 

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, mert látom is az eredményt tömörítés közben. A WordPresshez pedig a TinyPNG plugint használom.

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

Multimédia: képek és videók szerepe a weboldalon – SEO tippek 3.

Multimédia: képek és videók szerepe a weboldalon – SEO tippek 3.

A képekre kiéhezett olvasót ki kell elégíteni! Lehet, hogy a szöveges tartalmad a keresőmotorok számára tökéletes,  és egyből az oldaladra repítik a látogatókat, de vajon ott is maradnak?  A jobb eredmény érdekében élj a multimédia csatornáival és eszközeivel! Használj képeket, videókat, infografikát, hanganyagot!

A multimédia jelentése

Napjainkban igen elterjedt, divatos kifejezés  multimédia kifejezés. Mit is jelent pontosan?

A multimédia olyan információs tartalom vagy feldolgozási rendszer, amely többféle csatornát is használ (szöveg, hang, kép, animáció, videó és interaktivitás) a felhasználók tájékoztatására vagy szórakoztatására.

(Forrás: Wikipedia)

A  latin eredetű multimédia kifejezés két részből áll:

MULTI + MÉDIA

MULTI = sok

MEDIUM = közbülső helyen található, általános közeg, közvetítő elem,  nyilvánosság ⇒ MEDIA (többesszám)

 

Ha többesszámban használod: MÉDIUMOK vagy simán MÉDIA a helyes.

Ilyen nincs: MÉDIÁK.

 

 

Maga a multimédia legalapvetőbb jellemzője a digitalizáció. Az először megjelenő hangi és képi felhasználások analóg technológiákon alapultak, míg a számítástechnika a digitális világban élt. A két „oldal” közeledése roppant fontos volt, hogy létrejöhessenek valódi multimédia-alkalmazások.

Napjainkban már inkább az információt közvetítő közeg (információk terjesztésére és bemutatására szolgáló eszköz) értelemben használatos.

A nem szöveges tartalmak szerepe a weboldalon

Ma már szinte elvárás, hogy egy oldalon szerepeljenek  képekvideók illetve egyéb médiaformátumok. Amennyiben lehetséges, mindenképpen törekedj multimédiás tartalomra! Ezek teszik elevenné az oldaladat, és segítenek, hogy előrébb kerülj az internetes keresők találati listáján.

Az első benyomás számít! A multimédia segít!

Ha valaki rákattint az oldaladra, és nem tetszik neki amit lát, gyakran rögtön le is lép anélkül, hogy elolvasná azt a nagyon hasznos cikket, amit írtál. Ha akarsz, te is tudsz pillatatok alatt ingyenes weboldalt létrehozni, de ahhoz, hogy komolyan vegyenek, érdemes a honlapkészítést és  webdesign munkálatokat szakemberre bízni!

A dizájnhoz tartozik az illusztráció. Egy jól kiválasztott kép segít megérteni, hogy miről szól a cikked illetve az adott oldal.

“Egy kép többet ér ezer szónál”.

Nos, valószínűleg  a Google szempontjából ez nem teljesen igaz, de a honlapodra látogatók egy találó ábrát jobban fognak értékelni, mint az unalmas, tagolatlan 1000 szavas blogbejegyzést.

“Egy kép többet ér ezer szónál” SEO tippek - multimédia

Képek, videók, infografikák használata SEO szempontból is javasolt, hiszen oldaladat „felhasználóbarátabbá” tehetik:

  • Az első pillantásra magukhoz ragadják a tekintetet.
  • Tördelik a folyó szöveget, ezzel megkönnyítik az olvasást.
  • Növelik a felhasználói élményt.
  • Növelik az oldalon eltöltött időt.
  • Csökkentik a visszafordulási arányt.

 

A multimédiás tartalmakat  nagyobb eséllyel osztják meg a közösségi médiában. A megosztások és a viszontlinkek pedig tovább növelik a weboldalad PageRankjét.

Képek használata

Ha cikkeket írsz egy online magazinban vagy a saját honlapod forgalmát szeretnéd blogbejegyzésekkel növelni, akkor gyakran megfordulhat a fejedben a következő kérdés:

– Adjak hozzá képet vagy  sem?

A válasz:

– Igen!

 

Animált GIF-ek – vicces mozgóképek

A GIF formátum a képen lévő információt veszteségmentesen tömöríti. Az állóképek tárolása mellett a GIF alkalmas képek animálására is. Weblapokon sokszor találkozhatsz ilyennel. Lényege, hogy megadott időpontokban váltakoznak a különböző képek, így egy animációt hozva létre. Hátránya, – ha ez hátránynak nevezhető –  hogy nincs hangja.

A GIF az internetes társadalom egyik legnépszerűbb szórakozása…

Multimédia - animált GIF - SEO tippek

Videók szerepe

Észrevetted, hogy  a közösségi média  felületeit mennyire elárasztották a mozgóképek az utóbbi években? Egy pár napja arra ébredtem, hogy már a Twitteren is lehet élő adást közvetíteni.

A legújabb webdesign trend  egyik lényeges eleme a videók, parallax videók alkalmazása: belépőoldalon, háttérként és még számtalan formában.

Kösd fel te is a gatyát, mert a videók szerepe a digitális kommunikációban hihetetlenül felértékelődött!

Becslések szerint 2019-re az internetes forgalom 80%-át már a videók fogják jelenteni.

A videók jól mutatnak a weboldalon, egyszerűen beágyazható pl. egy Youtube videó, de ha igazán eredményes szeretnél lenni, akkor készíts saját videókat! 

Ne gondolj nagy technikára! A laptopod vagy a mobilod kamerája megteszi kezdetnek. A lényeg úgyis a hitelesség!

 

Interaktív multimédia

A multimédia és a multimédia-rendszerek legtöbb meghatározásában már szerepel az interaktivitás mint megszorítás is. Ilyenkor a felhasználó „párbeszédet” folytathat a rendszerrel, melynek során befolyásolni képes a rendszer működését, kiválthat hatásokat és felidézhet tartalmakat – mindezt a valós futásidőben. Amikor a végső felhasználó (befogadó) irányítani tudja, hogy mikor és milyen elemeket szeretne megnézni.

Interaktív elemek a weboldalon

  • megrendelések küldése
  • apróhirdetések feladása
  • szavazás
  • játékok (pl.: puzzle)
  • kvíz
  • interaktív térkép
  • hozzászólás lehetősége
  • weboldal ajánlása ismerősöknek
  • keresés a honlapon
  • hírlevél küldés

Még nincs vége…

Remélem, hogy  ezzel a cikkel sikerült  téged meggyőznöm arról, hogy miért fontosak a honlapodon a   képek,  videók  és egyéb média formátumok alkalmazása!

A következő  cikkemben  megmutatom, hogy hogyan tudod beállítani a multimédiás tartalmat úgy, hogy az internetes keresők is szeressék azt. Lesz szó az ideális képméretről, videóbeágyazásról és természetesen keresőoptimalizálásról!

 

Ha nem akarsz lemaradni azokról a keresőoptimalizálás – SEO témájú írásokról, amelyekkel a te weboldaladat is felpörgethetjük, iratkozz fel a hírlevelemre!

Antal-Pap Judit

Antal-Pap Judit

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

Saját honlapok:

AntikaotikaAntikaotika-designAntikaotika-SEORetro-Vintage

Szöveges tartalom optimalizálás – a tartalom a király? – SEO tippek 2.

Szöveges tartalom optimalizálás – a tartalom a király? – SEO tippek 2.

Újabb SEO tippek, hogy a weboldalad bekerüljön a top 10-be a Google kereső találati listáján!   Azt már tudod, hogy milyen az ideális domain név, címsor, metaleírás, URL, és hogy miért kellenek a kifelé mutató linkek. A mostani rendkívül fontos téma: a szöveges tartalom optimalizálás.

Már nem titok, hogy Google rangsorolási algoritmusában a két legfontosabb tényező a linkek és a tartalom.

Éppen ezért úton-útfélen találkozhatsz az ismerős szlogennel:

“Content is king” – azaz –  “TARTALOM  = KIRÁLY”

– De milyen tartalom számít igazán királynak?

– A gondosan felépített, keresőoptimalizált tartalom. Ezért a jelmondatot egy kicsit kiegészíteném:

TARTALOM  + SEO = KIRÁLYSÁG

Hogy mi ennek a szlogennek az értelme, azt az alábbi részben mutatom  be.

Miért fontos a tartalom optimalizálás?

A tartalom optimalizálás azért fontos, mert a kereső rendszerek részben a tartalom, illetve annak minősége alapján rangsorolják a honlapokat a találati listában.

Bármilyen tartalom is kerül fel a honlapodra, fontos, hogy a keresőmotorok és az olvasóid is egyértelműen megtudják, hogy mi az amiről az adott oldal vagy bejegyzés szól.

Mindent kövess el azért, hogy a tartalom világos és minőségi legyen, hiszen ha a felhasználó egyszer értékesnek találta az oldaladat a jövőben is meg fog bízni benne.

A tartalom optimalizálást mindig a felhasználók és a keresőmotorok számára készítjük, sosem csak a keresőmotoroknak, vagyis nem az a cél, hogy telerakd a szövegedet az általad használt  kulcsszavakkal, hanem az hogy értékes tartalmat közölj, ami remélhetőleg sokak hasznára válik.

 

Tartalom típusok

Ha ránézel egy honlapra általában kétféle tartalmat látsz:

  1. szöveges tartalmat
  2. nem szöveges médiatartalmat:  ami lehet képi, videó és zenei tartalom.

 

A legtöbb esetben az oldaladon nem csak szöveget – hanem mintegy kiegészítő vagy magyarázó elemként – egyéb médiumot is fel kell használnod.

Szöveges tartalom optimalizálás

Mivel a keresések kulcsszavak alapján történnek, a szöveges tartalomnak is meg kell felelnie ezen szavaknak. Fontos, hogy nem elég a kiválasztott kulcsszavak felsorolása, hanem élő, értelmes, releváns tartalmat kell adni a felhasználóknak.

Hogyan válasszam ki a kulcsszavakat?

Erre a témára több SEO blog cikket lehetne írni, illetve egy profi tanfolyam is kevés lehet, mivel elsősorban az idő és a tapasztalat fogja megmutatni, hogy melyek a tökéletes kulcsszavak az adott oldalra.

Egy kis mankó a kulcsszó kereséshez:

    1. Gondolj egy problémára, amire válaszolni szeretnél az írásoddal: milyen kérdést tennél fel, ha a felhasználó bőrébe bújnál?

Tartsd szem előtt, hogy az  emberek ugyanazokra a kifejezésekre keresnek rá az interneten, amiket a hétköznapi beszélgetéseik során használnak, tehát ugyanezen kifejezéseket/kulcsszavakat használd te is a honlap szöveges tartalmának optimalizálásakor.

2. Használj Google AdWords kulcsszótervezőt!

3.  Kérj segítséget SEO szakembertől!

Mivel a tartalom optimalizálás alapja a megfelelő kulcsszavak megtalálása és alkalmazása, ami meglehetősen időigényes és nagy szakértelmet igénylő folyamat, bizonyos esetekben érdemes megfontolnod, hogy profi szakemberhez fordulj. Tekints erre befektetésként!

A Google egyre inkább emberi szemüvegen keresztül képes értelmezni a honlap tartalmát. Ennek megfelelően minőségi szöveges cikket kell írni a honlapra.

Kulcsszósűrűség és az egészséges tartalom optimalizálás

A kulcsszó arányának 1-4% között kell mozognia a tartalomhoz képest. Több szakértő állítja, hogy soha nem szabad átlépni az oldalankénti 6%-os határt, mert a keresőmotorok spam-nek minősíthetik a túloptimalizált tartalmat.

Webshopoknál a kulcsszósűrűség magasabb is lehet, mert egy termékkategória oldalon természetes ha ismétlődik egy kulcsszó, pl. online ékszerboltban a “gyűrű” kifejezés.

A weboldaladon törekedj a természetességre! Az állandó szóismétlés helyett helyezd el a főbb kulcsszavak szinonimáit, illetve a kapcsolódó kifejezéseket is a szöveges tartalomban.

 

A tartalom optimalizáláshoz javaslom a  Yoast SEO bővítményt – amennyiben wordpresst használsz!

A szöveges tartalom hossza

Nincs tuti recept arra, hogy mekkora az ideális hossz. Több szakértő szerint – különösen angol nyelvterületen – minimum 1000 szóból kell állnia egy blogbejegyzésnek.

A fentebb említett Yoast SEO plugin is jelzi, hogy elérted-e az általa minimálisan elvárt 300 szót. 

Ha viszont beírod az internetes keresőbe az általad választott kifejezést, gyakran tapasztalhatod, hogy az adott kulcsszóra nyúlfarknyi cikkek jönnek be a a találati lista első oldalán.

Ebből is látszik, hogy a tartalom hossza nem a legfontosabb tényező, hogy a Google előre soroljon a találati listán.

TIPP: érdemes ellenőrizni, hogy az általad meghatározott kulcsszóra milyen típusú és hosszúságú tartalmak jönnek fel, és aszerint döntsd el, hogy mekkora terjedelmű cikket fogsz írni! Mit preferál a kereső?

Léteznek ellenérvek is a hosszú cikkekkel szemben. Mégpedig az, hogy a 21. század internetes fogyasztói nem szeretnek olvasni.

Ez nem feltétlenül igaz, de azért érdemes a leglényegesebb információt a  cikk elején elhelyezni.

Ha hasznos választ adsz az olvasódnak a kérdésére, akkor értékelni fogja a fáradozásodat, és nem csak, hogy elolvassa az írásodat, hanem meg is osztja a tartalmadat a közösségi média csatornáin, feliratkozik a hírleveledre.

Ha megbízik a termékedben és szolgáltatásodban – vagyis hitelesnek talál – akkor nagy eséllyel válik a weboldalad vásárlójává.

A szöveges tartalom tagolása

Lehet, hogy nagyszerű mindaz amit leírsz, de egy végtelenségig nyúló tagolatlan szöveghalom elrettentően hat a legtöbb olvasóra.

A bejegyzés megírásánál törekedj a megfelelő tagolásra:

  • Használj bekezdéseket! Normális esetben a fontos kulcsszó bekerül az első bekezdésbe.
  • A szöveg további részében is jelenjen meg a kulcsszó legalább  háromszor!
  • Értelemszerűen alkalmazz kiemeléseket, alcímeket: H2/kiemelés 2, H3/kiemelés 3, H4/kiemelés 4
  • H1-et csak az oldal/ bejegyzés címéhez használj!
  • A többszörösen összetett mondatok helyett válaszd a felsorolást!
  • A fontosabb kifejezéseket félkövérrel emeld ki, hogy “villámolvasással” is ki lehessen szűrni a lényeget!
  • Itt-ott érdemes illusztrációval megtörni a szövegfolyamot.

Belső linkek – Keresztlinkelés

Helyezz el a tartalomban szöveges belső linkeket, amelyek a honlapod valamelyik oldalára mutatnak.

Ne csak a bejegyzésekre és termékekre, hanem aloldalakra, kategóriákra, és címke oldalakra is hivatkozz!

Sőt alkalmazz az előbb említett céloldalakon is olyan linkeket, amelyek visszamutatnak a hivatkozó oldalra is. Ezt hívják keresztlinkelésnek (crosslinking).

Ennek a haszna, hogy az olvasó a honlapod többi aloldalára is eljut, így a kiemelten fontos aloldalakra is generálhatsz forgalmat.

Az  anchor text jelentése:  horgonyszöveg  vagy linkre rakott szöveg.  Ha rákattintasz,  eljutsz egy másik információs oldalra.

Még többet tudhatsz meg a témáról, ha elolvasod a Honlapseo blog cikkét itt:

SEO linképítés- horgonyszöveg szerepe

 

A kulcsszógazadag anchor szöveges aloldalak közötti keresztlinkelés segít a felhasználóknak, hogy további érdekes tartalmakat találhassanak a kedvenc témájukban, ezáltal pedig megismerjék és értékeljék az adott weboldalt.

  • A belső linkek alkalmazásával is körültekintően kell eljárni.
  • Törekedj a természetességre!
  • Ne helyezz minden ötödik szóra linket!
  • Erősítheted a többi aloldaladat, ha rájuk mutató linkhez a céloldal kulcsszavát (jobb esetben azok szinonimáit) helyezed.
  • Linket helyezhetsz képre is.

Keresőoptimalizált szövegírásról készítettem egy videót, amelyben a gyakorlatban is bemutatom,  hogy mit jelent a képi és szöveges tartalom optimalizálás.

Kattints Ide: Megnézem a SEO videót!

 

A nem szöveges tartalom optimalizálásról a következő blogbejegyzésemben fogok írni.

Ha nem akarsz lemaradni azokról a keresőoptimalizálás – SEO témájú írásokról, amelyekkel a te weboldaladat is felpörgethetjük, iratkozz fel a hírlevelemre!

Antal-Pap Judit

Antal-Pap Judit

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

Saját honlapok:

AntikaotikaAntikaotika-designAntikaotika-SEORetro-Vintage

Találati lista – jó helyezés – SEO tippek 1.

Találati lista – jó helyezés – SEO tippek 1.

Nincs olyan vállalkozó, aki a honlapjával ne szeretne a Google találati lista első oldalán megjelenni!

Na jó, nem minden vállalkozót érdekel a találati lista,  és sok cégvezetőnek egyáltalán nincs ideje honlappal meg online dolgokkal foglalkozni, sőt valaki a céges weblapot is feleslegesnek tartja!

Egy biztos, minden vállalkozó célja, hogy nyereséget termeljen!

Szerintem  a fenti mondattal te is egyetértesz! Valószínűleg van már weboldalad, vagy tervezed, hogy lesz.  Ha még nincs honlapod, olvasd el a Miért kell a weboldal? Üdv az alagsorban! című írást.

Egy jól beállított honlap megsokszorozhatja a bevételedet!

Ennek az ellenkezője is igaz. Ha nincs honlapod, vagy van, de rosszul lett beállítva, akár milliós nagyságrendű üzleti lehetőségektől eshetsz el!

A találati lista szempontjából mit jelent a jó beállítás?

A honlap beállítás olyan keresőoptimalizálási (SEO) feladat, amellyel elérheted, hogy a weboldalad minél jobb helyezéseket érjen el az internetes keresők találati listáján, és minél több látogatót szerezzen a keresőből.

Amikor valaki rákeres egy kifejezésre a lekérdező felületen, akkor pillanatokon belül megjelenik a  találati lista. Sok múlik azon, hogy a te oldalad megjelenik-e,  ha igen, milyen helyezéssel?

Egy kis ismétlés…

  1.  A keresőrobotok összegyűjtik az információt a linkeken keresztül bejárva a webet.
  2. A keresőmotorok indexelő rendszerei több száz különböző szempontból vizsgálják meg a honlapok aloldalait, azok egymásra hivatkozását(linkeket).

A kérdés már csak az, hogy mi alapján fogja kiválasztani a keresőmotor a releváns találatot az indexállományból, és mi alapján állítják sorrendbe azokat?

A Google például több száz tényezőt vesz figyelembe, és nagy hangsúlyt tesz az oldalra mutató linkek számára.

A Google algoritmusa  folyamatosan változik, így az is folyamatos munkát igényel, hogy megszerezzük a legjobb helyek egyikét az organikus találatok között.

Lássunk néhány SEO tippet!

Találati lista – rangsorolási tényezők

 

1. Domain név

Az ideális domain név:

  • nem túl hosszú
  • könnyen megjegyezhető
  • a kulcsszó és a márkanév párosítása

2. Title – címsor

Általában ugyanaz, mint az oldalad címe – ha nem állítasz be semmit.

A SEO alapja azonban a helyesen megválasztott címsor:

  • Legyen benne a kulcsszó, lehetőleg minél közelebb  a cím elejéhez!
  • Ne legyen két különböző aloldaladnak vagy tartalmadnak ugyanaz a címe!
  • Mindig törekedj az eredetiségre!

 

Title - találati lista

Ellenőrizd a címsort!

title - google találati lista

WordPressben egyszerűen beállíthatod a főoldal címsorát…

3. Meta description – meta leírás

A meta leírás adott weblap tartalmának rövid összefoglalására szolgál. Fontosságát az adja, hogy a Google kereső gyakran ezt az elemet jeleníti meg a találati listán, tehát a keresőoptimalizálás szempontjából majdnem akkora fontossággal bír, mint a Title elem.

A meta leírás a weboldal HEAD elemében található, és a következőképpen néz ki:

<META NAME="Description" CONTENT=".....itt a leírás.......">

A Yoast SEO bővítmény segít a beállításban, és nem kell kódokat túrni, ha WordPress motort használsz!

 

4. Keresőbarát URL – nice URL  – szép URL – tiszta URL – olvasható URL

Az URL jelentése  – leegyszerűsítve –  internetes cím/webcím, ami alapján egy böngésző be tud tölteni egy aloldalt.

A webcímek  utólag is optimalizálhatók.

Milyen a keresőbarát URL?

  • Szerepel benne az aloldal választott kulcsszava
  • Beszédes a látogatók számára
  • Rövid és egyszerű
  • Könnyen megjegyezhető
  • Nem tartalmaz különleges karaktereket
  • Magában hordozza és leírja a site struktúrát
  • Szóköz helyett kötőjel szerepel

http://seo.antikaotika-design.hu/index.php?cat=8&id=41

helyett

http://seo.antikaotika-design.hu/minta-bejegyzés/

találati lista - keresőbarát URL

WordPressben a “Beállításoknál” válaszd a “Bejegyzés címe” pontot!

 

5. Kifelé mutató linkek

Sok weboldal tulajdonos a mai napig nem szeret kilinkelni az oldaláról, mert  attól félnek, hogy a kifelé mutató linkekkel elveszik az oldal PageRank értéke és ezáltal hátrább sorolódik a keresők találati listáján.

Meg kell szabadulnunk attól az ősi, magyar lélekben meggyökeredzett félelemtől, amely szerint, ha nálunk “okosabbakra” hivatkozunk, akkor attól mi “butábbnak” fogunk tűnni!

Ma már a Google olyan weboldalakra küldi a látogatóit, amelyek információs csomópontokként működnek. Ha a saját témádban magas PageRank értékű oldalakra oldalakra linkelsz, akkor a Google  szemében te is értékesebbnek fogsz tűnni.

Azért azt tartsd szem előtt, hogy lehetőleg ne a konkurenciádat erősítsd a linkekkel!

Hogyan hozz létre keresőoptimalizált tartalmat?

Erről részletesen a következő blogbejegyzésemben fogok írni. Folytatódnak a SEO tippek!

Ha nem akarsz lemaradni azokról a keresőoptimalizálás – SEO témájú írásokról, amelyekkel a te weboldaladat is felpörgethetjük, iratkozz fel a hírlevelemre!

Antal-Pap Judit

Antal-Pap Judit

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

Saját honlapok:

AntikaotikaAntikaotika-designAntikaotika-SEORetro-Vintage

 

 

Kérem a 70 SEO tipp - 30 oldalas eBookot INGYEN!

 

Örülünk, hogy itt vagy! A letölthető ajándékod linkjét email-ben küldtük el. Ha nem találod, nézz szét a SPAM mappádban! Sok sikert kívánunk!

Pin It on Pinterest