Ellenőrzőlista Webfejlesztőknek 1. rész

Egy weblap elkészítése és közzététele közben (és után) egy webfejlesztőnek rengeteg dolgot kell fejben tartania és ellenőriznie. Megpróbálok egy ellenőrzőlistát készíteni a véleményem szerint leglényegesebb teendőkről. A teljes listát később külön oldalként is elhelyezem a blogon. A végleges lista nem lesz rövid, de rendszeresen aktualizálom.

Nézzük tehát azokat a dolgokat, amikre oda kell figyelnünk egy weblap készítése során.

Alkalmazott technológiák

HTML

  • HTML és CSS: Érdemes a legtöbb eszközön használható, egységes, reszponzív lapot készíteni.
  • HTML: Lehetőség szerint alkalmazzuk az aktuálisan legkorszerűbb, kellően támogatott  leírónyelvet (HTML5).
  • HTML: Használjuk a HTML szemantikus leíró nyelvének lehetőségeit (header, footer, nav, article, section, em, stb.).
  • HTML: A metaadatokkal (pl. Schema.org) a lapunkat a keresők számára könnyebben értelmezhetővé tehetjük.
  • HTML: Ne feledkezzünk meg a helyes rel=”canonical” link helyes beállításáról.
  • HTML: A több oldalas cikkeknél, listáknál használjuk a rel=”prev” és rel=”next” attriútumokat a linkeknél.
  • HTML: Készítsünk a felhasználót segítő 404-es hibaoldalt, ahol nem csak egy hibaüzenet, de megoldási lehetőségek is szerepelnek.
  • HTML: Ha a lapunkon van kereső, akkor használjuk ki az opensearch link lehetőségét (rel=”search”).
  • HTML: Ne csak favicon.ico ikont, hanem egyéb méretű ikonokat is biztosítsunk (pl. rel=”apple-touch-icon”).
  • META: A title és description meta tagek kiemelten fontosak a SEO szempontjából.
  • META: A mobil eszközöknek adjuk meg a viewport meta beállításával a megjelenítés általunk elvárt módját.
  • META: Kerüljük a fölösleges meta tagek használatát (pl. generator).

CSS

  • CSS: CSS esetén is javasolt a legtöbb szolgáltatást nyújtó, kellően támogatott verzióra építkeznünk, amely jelenleg a CSS3.
  • CSS: Lehetőség szerint a méretek megadásánál használjuk a relatív értékeket (% és em a px helyett).
  • CSS: Törekedjünk a lehető legrövidebb CSS kód méretre, nem szükséges minden elemnél minden tulajdonságot megadni, vegyük figyelembe az öröklődést, és vonjuk össze bátran az osztályokat.
  • CSS: Minimalizáljuk a CSS kérések számát, a mindig szükséges elemeket a szerveroldalon is összevonhatjuk.
  • CSS: Használjuk ki a “media query” lehetőségeit, a felhasználó élményt javítják az adott méretű eszközök lehetőségeit jobban kihasználó oldalak.
  • CSS: Készítsünk a lapunkból egy printelhető verziót CSS szinten (@media print{}), ahol megszabadulunk a minden fölösleges elemtől (pl. navigációs sáv, reklámcsíkok), háttérképtől és egyéb tintapazarlástól.
  • CSS: Tisztítsuk meg a CSS fájlunkat a nem használt osztályoktól.

Javascript

  • JS: Használjunk Javascript tömörítést, komolyabb kódnál jelentős lehet a nyereség!
  • JS: Lehetőség szerint kerüljük a Javascript framework-ök (pl. JQuery) használatát. Egy egyszerűbb JS feladat miatt fölösleges letöltetnünk a 100kbyteos JQuery csomagot.
  • JS: A javascripteket lehetőség szerint aszinkron módon töltsük be, ezáltal az oldal megjelenítését nem lassítjuk velük.
  • JS: Kerüljük a fölösleges scripteket, amennyire az lehetséges. Gondoljuk át, hogy tényleg szükséges-e a lapunkat lassítani a bedrótozott a Twitter, Facebook, Google+, Pinterest és egyéb scriptekkel.

Képek

  • IMG: Minden képhez adjunk alt és title attribútumokat.
  • IMG: Az IMG tageknél a méretek megadását ne hanyagoljuk el , adjuk meg a width=”x” és height=”y” attribútumokat.
  • IMG: Lehetőség szerint kerüljük el a képek böngésző általi átméretezését.
  • IMG: Ne feledkezzünk meg a képeknél sem a kis méretű kijelzőkhöz méretezésről! (img {max-width:100%;height:auto})
  • IMG: Ha sok kis képünk van, akkor alkalmazzuk a CSS sprite technikát az összevonásukra.

SEO

  • SEO: Alkalmazzunk lehetőség szerint egy oldalba ágyazott, független forgalmi monitorozó lehetőséget (pl. Google Analytics).
  • SEO: Nem árt egy logelemzésen alapuló forgalmi monitor sem (pl. AWStats).
  • SEO: Regisztráljuk lapunkat a keresők Webmaster Tools eszközeibe.
  • SEO: Hozzunk létre és küldjünk be XML formátumú sitemap-ot a keresőknek.

Egyebek

  • ROBOTS.TXT: A robots.txt állományban tiltásokon kívül néhány robot számára meghatározhatjuk a sitemap címét és az elvárt lekérési gyakoriságot is.

Tesztek és ellenőrzőeszközök

Az ellenőrzőlistát folyamatosan bővítem és aktualizálom, a jelenlegi bejegyzés csak a témaindító. Ha neked is van ötleted, meglátásod az ellenőrzőlistával kapcsolatban, akkor ne habozz hozzászólni!

Kategória: SEO Címke: , , , , , , ,

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

*