A keresőbarát weboldal

Gyorsan betöltődik

A felhasználó akkor elégedett, ha egy weboldal 3 mp alatt teljesen betöltődik!

Keresőoptimalizált

Az organikus találati lista első 3 helyezettje viszi az interneten böngésző felhasználók 55%-át.

Felhasználóbarát

Egy jó honlapon könnyen kiigazodnak a látogatók és azt találják meg, amit valóban keresnek.

Professzionális

A siker a meghatározott technikai feltételek és azok megvalósulásának visszaellenőrzésében rejlik.

Nem vagy elégedett weboldalad teljesítményével? Kérj egy ingyenes állapotfelmérést!

Milyen a keresőbarát weboldal készítés?

A weboldalaknak csupán annyi a rendeltetésük, hogy segítségükkel elérjük a számunkra fontos célközönséget. Lehetünk vállalkozók, bloggerek, vagy magánszemélyek, az interneten történő megjelenés mindenképpen valamilyen gazdasági célt szolgál. Egyszerűen fogalmazva: Szeretnénk, ha közvetlenül, vagy akár közvetett módon honlapunk bevételt termelne.

Keresőbarát weboldal készítéssel jobban szerepel a weboldal a találati listánA kérdés csupán az, hogy mennyi pénzt szeretnénk – kell - kiadnunk, míg weboldalunk elkezd bevételt termelni. Pénzzel sok mindent meg lehet oldani, de akik minőségi weboldalt szeretnének magukénak tudni, azoknak a keresőbarát weboldal készítés a megoldás.

Manapság nagyon sokan készítenek gyönyörű weboldalakat. Azonban a szépség nem minden. Egy keresőbarát weboldal nem csak szép, hanem jó is. Az egyetlen probléma az, hogy a megrendelők nagy része csak a dizájn alapján tudja megítélni a munkákat. Ez teljesen természetes. Nem érthet hozzá mindenki. Azonban a tényleges munka során a színfalak mögött sok minden előre eldől. Azokat később megváltoztatni sokszor többe kerül, mint új weboldalt készíteni.

A következtetéseket levonva, nem árt, ha szakmai segítséget kérünk még a weboldal készítés megkezdése előtt…

Szakmaiság a weboldal készítés során

Mint említettem, a weboldalak sorsa már a tervezés alatt eldőlhet. Amennyiben a weboldal készítés szakmai felügyelet alatt zajlik, úgy a megrendelő valóban azt kapja a pénzéért, amit megrendelt. Egyéb esetben kénytelen elfogadni, anélkül, hogy megbizonyosodhatna az elvégzett munka valódi minőségéről.

Számomra mindig az ügyfél érdeke a legfontosabb, így minden egyes lépés a weboldal készítés folyamatában pontosan meg van határozva. Mivel a megrendelt weboldal elkészítését az a kivitelező végzi, aki a meghatározott feltételeket meg tudja valósítani, így a munka ténylegesen minőségi lesz. Miért mondom ezt? Lássuk, miként zajlik egy általam kezelt projekt kivitelezése:

  1. Elképzelés megfogalmazása az ügyfél által;
  2. Részletek pontosítása, szakmai tanácsadás;
  3. Végleges elképzelés összeállítása;
  4. Technikai követelmények meghatározása a kivitelezők felé;
  5. Pályáztatás;
  6. Javaslat a legjobb kivitelezők kiválasztására;
  7. Árajánlatkérés (közvetlenül az ügyfél kéri);
  8. Weboldal készítés (a kivitelező által);
  9. Elvégzett munka ellenőrzése, javaslat a hibák, hiányosságok javítására;
  10. Javaslat az elkészült weboldal átvételére.

Mindez nagyon szépen hangzik, de azért nézzük, hogyan váltom készpénzre a fent említett folyamatot. Miképpen érem el, hogy ügyfeleim gyors, keresőoptimalizált és minőségi weboldalak birtokosai legyenek.

Tartalom:

Weboldal készítés és keresőoptimalizálás

A weboldal készítés szempontjából kiemelten fontos a keresőoptimalizálás. A SEO segítségével érhetjük el, hogy honlapunk előkelő helyen jelenjen meg az organikus keresési találatok között. Ahhoz, hogy megalapozzuk, honlapunk eredményes szereplését, számos tényezőt kell figyelembe venni a weboldal készítés során. Ezeket a tényezőket a későbbiekben javítani sok pénzbe kerül. No, de miről is van szó pontosan?

A honlapkészítés és a keresőoptimalizálás kapcsolataA weboldal betöltési ideje nem csak SEO tényező, de a felhasználók szempontjából is kiemelt fontosságú. Manapság a keresések nagy többségét mobilokról indítják. Senki sem vár 10 másodpercet, mire egy weboldal betölt, inkább visszalép egyet, majd átkattint a következő találatra. Ezt a luxust egyetlen honlap sem engedheti meg magának. Ezért a weboldal betöltési idejét csökkenteni kell, amennyire csak lehet. Ezzel párhuzamosan a keresőoptimalizálás segítségével meg kell alapozni a keresőmotorokban való ingyenes átkattintás lehetőségét.

Ahhoz, hogy ezeket a szempontokat kiemelten kezeljük, különböző elvárásokat kell támasztanunk weboldalunkkal szemben. Azonban a megvalósításhoz szakmailag is ismerni kell a folyamatokat, amelyek előre viszik a fejlesztést.

Az alábbiakban megfogalmazott elvárások megvalósítható, tesztelt és bevált „legjobb gyakorlatok”, melyek segítségével egy weboldal betöltési idejét - a GTmetrix mérési eredményei alapján - 3 mp alá lehet tornázni. Ráadásul keresőbarát megoldások, így segítségükkel és egy kis utómunkával a weboldal jól fog szerepelni az organikus keresési találatok között, ami egy vállalkozás életében létfontosságú lehet. Lássuk, melyek az alapvető elvárások:

Alapvető elvárások:

  • Google Analytics használata;
  • A weboldal legyen reszponzív;
  • A honlap legyen Iphone, Ipad-ra is optimalizálva;
  • Az oldal használjon Open Graph Protokollt;
  • Az oldal használjon mikroadatokat (Schema.org) html formátumban;
  • Az oldal ne használjon Plugin-eket (Kivéve: Yoast SEO plugin [WP esetén], illetve amit az ügyfél külön kér);
  • Ne legyen Frame és Flash a weblapon;
  • Kerülje a CSS képek használatát (egy-egy lehet a design miatt!);
  • Ne legyen jelentős szöveges tartalom a képeken (Esetleg egy-két szó kizárólag a design miatt).
  • Legyen szabványos 404-es oldal;
  • Legyen szabványos XML oldaltérkép;
  • Legyen szabványos robots.txt fájl.

Az alapvető elvárások mellett számos szabványnak kell megfelelnie egy oldalnak, amit szintén figyelembe kell venni. Mondhatni, ezek a szabványok azok, amelyek az alapját képezik a webes megjelenésnek. Melyek ezek?

Szabványtesztek:

  • Az oldal legyen mobilbarát (Google mobile-friendly test alapján);
  • W3C szabványhibák ne legyenek az oldalon;
  • Google Structured Data Testing Tool alapján ne legyenek szabványhibák;
  • A Facebook Open Graph objektum-hibakeresőben ne legyenek szabványhibák;

Ezzel meg is fogalmaztuk alapvető elvárásainkat weboldalunkkal szemben. Már csak az a kérdés, hogy miképp valósítsuk meg azokat?

Tárhellyel kapcsolatos elvárások

A webes megjelenés alapja a biztonságos, gyors és megbízható tárhely. Mindenekelőtt a legfontosabb a szerver válaszideje. Ez lényegében egy időintervallum, amely a kattintás és maga a weboldal böngészőben való megjelenítésének megkezdése között van. Tehát, felhasználói szemmel ebben az időszakban semmi sem történik. Ez az időintervallum egy helytelenül kiválasztott szerver esetében elérheti a 0.8 másodpercet is.

Továbbá, számtalan esetben előfordulhat kiesés a szolgáltatásban, amely érthető okokból csökkenti a felhasználói élményt. A felhasználó szimplán megbízhatatlannak fogja tartani a weboldalt, ezzel egyidejűleg az általa kínált szolgáltatást is.

Fontos szempont a tárhely szolgáltató által nyújtott ügyfélszolgálati rendszer működtetésének minősége is. Adott esetben gyorsan és szakmailag megalapozottan kell reagálni bizonyos problémák megjelenése esetén.

Tekintettel a fentiekre, illetve a betöltési idő csökkentésére, szerver szinten az alábbi szempontok kiemelten fontosak:

  • Megfelelő tárhely szolgáltató kiválasztása;
  • SSL (https) tanúsítvány telepítése;
  • Dedikált IP cím biztosítása.

htaccess (301) átirányítások:

Keresőoptimalizálás szempontjából, szerver szinten különböző beállításokat kell elvégezni, melyek segítségével megszüntethetjük a duplikált tartalom lehetőségét. Ezek a beállítások a következőek:

  • A weboldal www nélküli verzióját át kell irányítani a www-vel rendelkező verzióra;
  • A dedikált IP címet át kell irányítani a www-vel rendelkező verzióra;
  • A weboldal http verzióját át kell irányítani https verzióra.
  • Az „index”oldalakat át kell irányítani a könyvtárra, a kiterjesztéseket (.html, .php) pedig eltüntetni.
  • Az úgynevezett „Directory browsing”–ot le kell tiltani az index fájllal nem rendelkező mappák esetében (biztonsági tényező).

A fenti beállítások segítségével oldalaink csak egy verzióban fognak megjelenni.

Személy szerint a www előtaggal rendelkező domain neveket preferálom, mivel ebben az esetben lehet a domaint sütimentessé tenni (szintén gyorsítja a betöltési időt).

Azonban még számos dolgot el lehet és el is kell végezni szerver szinten. Ezen beállítások némelyike kiváltja a plugin-ek egy részét, így újfent gyorsabb lesz weboldalunk. Példának okáért, had említsem meg a tömörítést és a böngészők háttértárolójának beállítási lehetőségeit.

A weboldal készítés során számtalan esetben ezeket az egyszerű beállításokat plugin-ek használatával váltják ki, ami dinamikus fájlokat hoz létre és sokszor nem naprakész. Én ezen plugin-ek használatát kizárom. A klasszikus és egyszerű manuális megoldással, sokkal jobb eredményt lehet elérni.

Statikus fájlok kezelése

A statikus fájlok a weboldal alapvető működéséhez és megjelenítéséhez szükséges fájlok. Ezen felül számos felhasználói élményt növelő statikus fájlról is beszélhetünk. Ezen elemek használatának módja nagyban befolyásolja a weboldal betöltési idejét. Amennyiben a helyén kezeljük őket és a legjobb gyakorlatokat alkalmazzuk, úgy a - sebességre nézve - hátrányos hatásaikat a minimálisra csökkenthetjük.

Statikus fájlok kezelése a honlapkészítés soránCsak pár példát említve. Statikus fájlok a stílus és javascript fájlok, illetve a képek, videók, stb. Minél többet használunk belőlük, annál lassabban fog betölteni honlapunk. Minden egyes ilyen fájl betöltése egy-egy http lekéréssel jár. A legfejlettebb böngészők is csak 6-8 ilyen lekérést tudnak egy időben kezelni. Így meg kell ragadnunk minden lehetőséget a http lekérések számának csökkentésére.

Tetézve a problémánkat az sem mindegy, hogy ezeket a fájlokat a saját szerverünkről, vagy esetleg egy másik szerverről tölti le a böngésző. A külső forrásból származó fájlokat ugyanis nem tudjuk tömöríteni és megadni a böngészőnek, hogy mennyi ideig tárolják azt a háttértárolójukban. Van, aki szerint ez így van jól, de én leteszteltem és van gyorsabb megoldás is.

Nagyon sok időt töltöttem a legjobb eljárások gyakorlati megvalósításával és összehangolásával, de az eredmény megérte a fáradságot. Az alábbiakban azokat feltételeket sorolom fel, melyek megvalósulásával egy valóban optimalizált és gyors weboldalt készíthetünk. Lássuk a feltételeket:

  1. A statikus fájlok esetében a Google mode_pagespeed ne legyen alkalmazva;
  2. A statikus fájlok (CSS, JS, képek, videók, pdf, stb…) aldomainről legyenek kiszolgálva;
  3. A statikus fájlok htaccess fájlal (Nem pluginnel!) legyenek tömörítve. A headerek lejárati ideje szintén így legyen beállítva;
  4. Az oldal ne használjon Etag-okat;
  5. Stílus és Javascript fájlok:
    1. Ne legyen sorok közti CSS - JS (Kivétel: Google analytics követőkód);
    2. „Conditional comments”-el ellátott (IE) CSS - JS fájlok kivételével, az összes CSS - JS fájl legyen egy-egy fájlba összevonva (1 db CSS és 1 db JS fájl legyen!);
    3. A CSS fájl ne használjon @import szabályt;
    4. Ne használjon az oldal külső forrásból származó CSS, JS fájlokat (Kivéve: analytics.js). Azok tartalma legyen beillesztve a fő CSS - JS fájlba (Google Fonts, Font Awesome, stb);
    5. A CSS, JS fájl legyen minimalizálva.

A weboldal készítés során a fenti feltételek megvalósítása nagyon időigényes és valóban szakmai tudást igényel. Így az általam kezelt projektek valóban professzionális és kiemelkedő teljesítményt nyújtanak.

Google Analytics követőkód

A látogatók nyomon követése minden weboldal életében kiemelten fontos feladat. Erre szolgál a Google Analytics. A weboldal készítés utolsó fázisában a honlaphoz egy úgynevezett követőkódot adnak hozzá, amely lehetővé teszi az oldalra érkező felhasználók nyomon követését. Lényegében teljesen tisztában lehetünk vele, hogy a felhasználók milyen tevékenységet végeztek, vagy éppen végeznek oldalunkon.

Azonban - mint már megszokható tőlem – meg kell említenem, hogy nagyon nem mindegy a követőkód integrálásának módja. Ugyanis ez a javascript kód minden egyes statikus fájlhoz sütit rendel, ami teljesen felesleges. Bár ezek a sütik kisméretűek, sok statikus fájl esetén, már komoly tényezővé válhatnak.

Mint már említettem, mindent össze kell hangolni, hogy a legjobb eredményt érjük el. Nos, ez tipikus iskolapéldája az összefüggéseknek. Ahhoz, hogy a domainünket sütimentessé tegyük, összesen két dolgot kell elvégeznünk. Az első és legfontosabb a statikus fájlok aldomainről való kiszolgálása. Amennyiben így teszünk, úgy a Google Analytics követőkódjának "cookiedomain" értékét "auto"–ról "www.pelda.hu"–ra állítva megkapjuk a kívánt eredményt. Ebből az okból kifolyólag preferálom a www előtaggal rendelkező domain neveket.

Ezzel be is fejeződött a betöltési idő csökkentése. Lássuk, mit tehetünk még a keresőoptimalizálás területén.

A tartalom felépítése

A weboldal készítés alapját a html kódok képezik. Ez a leírónyelv határozza meg az oldal felépítését. Számos egyéb tulajdonsága mellett a tartalom felépítését is ebben a nyelvben határozzuk meg. Mivel e kódok felvitele képezi az alapokat, így a későbbiekben ezeket rendezni és optimalizálni óriási munkát jelent, így nagyon fontos azokat megfelelően felépíteni.

A keresőoptimalizálás egyik legfontosabb eleme maga a tartalom. Mivel egy weboldalnak informatívnak kell lennie, így címeket és szöveget is tartalmaznia kell, méghozzá az alábbi feltételeknek megfelelően:

  • Minden egyes oldal 1 db <H1> headinget tartalmazzon. Lehet több is, de ha valaki nem tudja, hogy miért, akkor egyet használjon!;
  • A <H1> tag az adott oldalon a tartalom címe legyen! Tehát minden oldalon más lesz a <H1> tag. A szlogen, logo, weboldal címe (cégnév) véletlenül se legyen <H1> tagban;
  • A tagolások legyenek szabványosak és lépcsőzetesek. A <H1> főcímnek <H2> alcímei vannak, a <H2> alcímeknek <H3> alcímei vannak és így tovább;
  • A szöveg paragrafusban <p> legyen;
  • Az oldalsávban az alcímek <H3>, vagy kisebb heading-ben legyenek;

A fentiek megvalósulásával nem csak gyors, de tartalmilag átlátható is lesz weboldalunk, aminek a felhasználók és a keresőrobotok is örülni fognak.

Összegzés

Munkám során mindig az ügyfél érdekeit tartom szem előtt. Közvetlenül neki dolgozom, nem pedig a kivitelezőnek, így folyamatosan, részlehajlás nélkül valósíthatom meg a projekteket. A feltételek meghatározása és azok megvalósulásának következetes visszaellenőrzése garantálja a munka minőségi elvégzését.

Értékelés és hozzászólás

Patak Péter |

Szeretnél hozzászólni a fentiekhez? Az alábbi gombra kattintva a facebookon értékelheted, valamint megoszthatod észrevételeidet az olvasottakkal kapcsolatban...