HU

 

Mire ügyeljünk tartalomfeltöltéskor?

Huszár Ágnes

A tartalmakat a legjobb teljesítmény érdekében a részletekre is ügyelve kell feltölteni a webhelyre. Ezzel nemcsak SEO-szempontból teszünk jót az oldalnak, hanem az akadálymentességéhez is hozzájárulunk.

A tartalomfeltöltési optimalizálási feladatok közé tartoznak technikai SEO jellegű tevékenységek, amelyeket a SEO-beállítások oldalon sorolunk fel, valamint a szöveg és a képek megformázásával, elemeivel kapcsolatos tevékenységek – ezeket szedtük össze itt.

 

 

Ha megvan a minőségi szempontoknak eleget tevő tartalmunk, akkor a nehezén már túl vagyunk. Ha a feltöltés során ügyelünk az alábbiakra, azzal feltesszük rá a koronát:

 

Formázás törlése

A külső forrásból, például szövegszerkesztőből (Word- vagy Google-dokumentumból stb.) másolt, Ctrl + V-vel beillesztett tartalmak magukkal hozzák az eredeti dokumentum formázási stílusait, ami a forráskódban nagy rendetlenséget (sok inline CSS-t, beszúrt formázási kódot) okoz.

A Ctrl + Shift + V billentyűzetkombinációval való beillesztés helyett ilyenkor jobb az, ha a Ctrl + V-vel való beillesztés után megnyomjuk a formázás törlése gombot a HTML szerkesztő eszköztárában:

A gombon egy nagy T, alsó indexben egy × szimbólummal

Az utóbbi megoldás azért jobb, mert így megmaradnak a címsorok, a linkek és a bekezdések, csupán az eredeti dokumentum szövegstílusai „vesznek el”, és veszi fel a szöveg a cél, vagyis a webhely szövegformázási stílusát.

A Ctrl + Shift + V-vel beillesztett szövegekben ellenben minden „normál” stílusú lesz, beleértve a címsorokat is, a linkekből egyszerű szöveg lesz, a bekezdések pedig sortörésekké válnak.

„Tördelés”, layout

Sok webhelynek, amely tartalomkezelő rendszeren alapul, van oldalépítő funkciója (ilyenek a mi Flexi Build weboldalaink, vagy például az Elementor vagy a WPBakery pluginok a Wordpresshez).

A tartalom feltöltői az ilyen webhelyeken egyedi oldalelrendezéseket tudnak építeni különféle oldalelemekből (szövegdobozokból, slideshow-kból, galériából stb.), és kedvük szerint színezhetik őket.

Ez nagy teret ad a kreativitásnak, de érdemes ügyelni rá, hogy az elrendezés, a szövegformázás megkönnyítse a látogatóknak a befogadást.

Például: 

  • a célnak, a szöveg, tartalom értelmének legmegfelelőbb oldalelemeket használjuk a layout felépítésekor,
  • az elrendezés áttekinthető és logikus legyen, 
  • a szöveg és a háttér színe között megfelelő legyen a kontraszt
  • a formázások, a kiemelések összhangban legyenek a mondanivalóval, 
  • a betűtípusok, betűméretek, betűszínek és általában a színek pedig a branddel, arculattal,
  • mobilon is minél könnyebben lehessen használni a weboldalt és értelmezni a tartalmat.

Címsorok (headingek) és más HTML címkék megfelelő használata

A weboldalak felépítése, elemeinek hierarchiája és jelentése ránézésre egyértelmű lehet pusztán a formázás miatt is. Például:

  • a legnagyobb betűkkel írt sorról sejthető, hogy a címsor 1 lesz az oldalon, a valamivel kisebb a címsor 2, és így tovább,
  • a kötőjellel vagy gondolatjellel kezdődő formázás ránézésre egyértelműen felsorolás,
  • egy vízszintesen és függőlegesen bármilyen módon (pl. szóközökkel) egy vonalba rendezett adathalmaz pedig táblázat.

Azonban a gépek, így a keresőrobotok és a vakok által használt képernyőolvasó programok nem látják a formázást. Miattuk fontos, hogy a megfelelő HTML címkékkel jelöljük meg ezeket a szövegelemeket. 

A helyes HTML elemekben való elhelyezéssel segítjük a gépeket annak értelmezésében, hogy mi is az oldalunk valódi témája, melyek a legrelevánsabb és legfontosabb elemei, és az egyes elemek hogyan viszonyulnak egymáshoz.

A tartalomkezelő rendszerek HTML szerkesztőjével ez igazán könnyű: úgy működik, mint egy szövegszerkesztő dokumentumban.

A CKEditor eszköztára

Címsorok

A címsor 1, címsor 2 stb. (vagy fejléc 1, fejléc 2 stb.) kiválasztásával egyszerűen létrehozhatjuk a címsorszerkezetet, ami a kódban, a HTML-ben is helyes (szemantikus) lesz, vagyis a megfelelő <h1>, <h2> stb. címkét kapja.

A CKEditorban a Bekezdésformátum lenyílóból lehet kiválasztani a normál formátumot és a fejlécszinteket 1-től 6-ig

SEO és akadálymentességi szempontból is ideális, ha a fejlécek (headingek) sorrendben követik egymást:

  • a címsor 1-ből (fejléc 1-ből) egy darab van (Heading1, a HTML-ben a <h1> címke tartalma), a tartalom élén. Az 1. szintű fejléc összefoglalja, miről szól az adott oldal egésze,
  • a tartalmat alszekciókra oszthatjuk címsor 2-k (Heading2, a HTML-ben a <h2> címke tartalma) használatával,
  • ha a címsor 2 szintű szövegrészeket további alszekciókra bontjuk, címsor 3-akat (Heading3, a HTML-ben a <h3> címke tartalma) használunk, stb.

Az ideális szerkezethez hozzátartozik, hogy „lefelé” nem ugrunk át címsorszinteket, vagyis H1 után nem következhet semmi más, csak H2.

Felfelé persze más  a helyzet, hiszen ha pl. egy H5-ös szintű alszekció végén egyúttal véget ér egy H4-es és H3-as rész is, utána természetesen nyílhat egy új H2-es címszintű szekció.

<H1> Lakberendezés

<H2> Hálószoba

<H3> Komód

<H4> Fiókos

<H4> Polcos

<H3> Éjjeliszekrény

<H3> Ágy

<H4> Matrac

<H5> Habszivacs

<H5> Rugós

<H4> Párna, takaró

<H5> Természetes töltetű

<H5> Poliészter töltetű

<H2> Fürdőszoba

<H2> Étkező

A fejléceket soha nem használjuk formázásra, azaz nem használunk például heading 2-t pusztán azért, mert nagyobb betűméretű szöveget szeretnénk megjeleníteni. 

Ehelyett ilyenkor, ha egyszeri esetről van szó, használhatunk inline CSS-t, azaz forráskód módba váltva, beleírjuk a szükséges formázást a kódba.

Ha többször is szükség lesz ilyen szövegformázási stílusra, javasoljuk a felvételét a stílustárba, hogy a Stílus lenyíló listából választható legyen:

"arany betűszín" mint a stílustárból választható szövegformázás

 

Egyéb HTML címkék

A legjobb megjelenítés és a gépek számára könnyű értelmezhetőség érdekében a felhasználóbarát HTML szerkesztők többi funkcióját is rendeltetésszerűen kell használni.

Például:

  • A táblázat gomb megnyomásával szúrjunk be HTML táblázatot. A táblázat beállításánál tetszőleges számú sort, oszlopot adhatunk hozzá, és egy jelölőnégyzet bejelölésének egyszerűségével elláthatjuk szabályosan megformázott fejléccel.
  • A felsorolás és a számozott felsorolás gombokkal hozzunk létre a kódban is helyesen megformázott – <ul>, <ol>, <li> – felsorolásokat.
  • Használjuk az alsó és felső index gombokat (m3, CO2 stb.).
  • Vízszintes vonalat az „Elválasztóvonal beillesztése” eszköztárgombbal adjunk hozzá az oldalhoz.

Képek szerkesztése, optimalizálása

Hogy a képekből is kihozzuk a maximumot, a weboldalra való beszúrás vagy a médiatárba való feltöltés előtt a képeket is optimalizálni kell:

1. Vágjuk meg őket, ha szükséges (pl. ha egy termékkép körül óriási üres tér van). A vágás arányait érdemes úgy megválasztani, hogy megnézzük, milyen képaránnyal lesz megjelenítve a kép a weboldalon, és ennek megfelelően cropoljuk.

Ha pl. egy webshopba készítünk elő termékképeket, akkor nyissunk meg egy termékoldalt, jobb egérgombbal kattintsunk a termékképre, majd a helyi menüből válasszuk az Inspect opciót:

Ezután a megnyíló ablakban húzzuk a kurzort a kép elérési útvonala fölé, és a popupban látni fogjuk a képarányt (Rendered aspect ratio):

2. Méretezzük át. A fent ismeretett módon tudjuk ellenőrizni a megjelenített képméretet is pixelben (Rendered size). Ennél nagyobb méretben csak akkor érdemes feltölteni a képet, ha szeretnénk, hogy pl. jobb gombbal megnyitva a látogató még nagyobb méretben tudja megtekinteni.

3. Tömörítsük. Erre a célra kiváló például a Tinypng/Tinyjpg

4. Értelemszerűen nevezzük el – pl. img0274636.png fájlnév helyett naplemente.png néven mentsük el, vagy a fájlnév legyen a cikkszám vagy más, értelmes név, ami alapján azonosíthatjuk a fájlt.

Akárcsak más dokumentumok, a képek fájlneveiben se használjunk egyebet, csak ékezet nélküli kisbetűket, számokat és kötőjeleket.

+1: Gondoskodjunk az alternatív leírásról, ha szükséges. Feltöltés után minden képnél kell lennie legalább egy üres alt attribútumnak (“” – a mi webhelyeinken ilyet minden kép automatikusan kap, akkor is, ha nem írnak semmit az alternatív leírás mezőjébe), illetve ahol szükséges, írjunk az alternatív leírást. Az alt attribútumot nem mindig kell kitölteni (például díszítő funkciójú képekhez nem kell írni alternatív szöveget).

Az alternatív leírás azért fontos, mert ha egy képet valamilyen okból nem lehet megjeleníteni, akkor az alternatív szöveg jelenik meg helyette, illetve a képernyőolvasó programok is az alternatív szövegeket olvassák fel ott, ahol kép van a tartalomban.

Az alternatív szövegek ellenőrzése lehetséges akár egy böngészőbővítménnyel is (pl. a SEO Meta in 1 Clickkel), de úgy is, hogy jobb egérgombbal kattintunk az oldalon, a felugró menüből kiválasztjuk a „View page source” menüpontot, majd Ctrl + F-fel rákeresünk: alt=. 

 

Tartalomkezelési árak és havidíjak