Régi oldal, új dizájn

**tom.pannon** · 2011-06-28, 14:12

Üdv Mindenkinek!

Tudom nem egyedi a probléma, de kíváncsi vagyok a véleményetekre.

Adott egy 2007 óta működő oldal, ami szokványosan elavult grafikailag és más szempontokból is. Feladat adott, viszont csak úgy szabad nekiállni, hogy ne legyen 1-2 napnál hosszabb forgalomkiesés. 2-3 fő kulcsszó mellett akad még jó néhány apróbb is, amelyre jelenleg 1-2. helyen áll.

Feltételek:
- ami marad: szövegezés, URL-ek(bár csúnyák), TITLE, meta
- változik: div id-k, elrendezés, H-tagek használata,
- a kezdőlapon: több kép lesz képváltóval, a menü jelentéktelen tagjai a footerben lesznek, a jobb oldali sáv megszűnik(a régi oldalon a forrásban a tartalom előtt volt a jobboldali sáv), minden alkategóriára közvetlen link mutat majd, így a linkek száma jelentősen nő a kezdőlapon.

A terméklapok is jelentősek; nagy hangsúlyt fektettünk arra, hogy bizonyos kulcsszavakra egyenként is jók legyenek. A terméklapokat hasonló változás éri mint a kezdőlapot, annyi különbséggel, hogy slider nem lesz.

Előnyök a régi oldallal szemben:
- W3C valid oldalak (a régi oldal egyetlen lapján több ismétlődő hiba is volt: (Result: 259 Errors, 70 warning(s)) hiányzó alt tagek, ismétlődő div-ek, rosszul egymásba ágyazott, és lezáratlan elemek)
- modern, felhasználóbarátabb, a tervek szerint több időt fognak az oldalon tölteni a látogatók

Mire kellene még odafigyelni? Mire számíthatok?

Hasonló témák:

**FabianGabor** · 2011-07-03, 05:00

Az oldalt nem kell leállítani, vagy csak nagyon rövid időre (1-2 órára), amíg teszteled élesben is. Lehetőleg ne csúcsidőben

A design-t el kell készíteni, le kell kódolni offline, majd mikor minden rendben, akkor feltölteni az újat. Nagy segítség tud lenni a Firebug, hogy tesztelhesd a változtatások hatását. Ha maga a tartalom nem változik, akkor relatív könnyű dolgod van. Átírod a template kódját, új css-t hozol létre, feltöltöd a css-t és az új template-et. Azt is megcsinálhatod, hogy létrehozod a html (php) oldalak másolatát más néven, pl index-v2.php, ezt átírod, majd mikor kész van, a régit átnevezed index-regi.php-ra és az újat index.php-ra. Így kb pár perc fennakadás lehet.

Amire figyelj: html5-be kódolj, nem nehéz az átállás, nincs sok különbség, csak pár szintaktikai. Például menjen a fejléc <header></header>, a menü <nav></nav>, a különböző tartalomrészek <section></section>, a cikkek <article></article>, a lábléc <footer></footer> tagok közé. Használj grid rendszert, megkönnyíti a pontos pozicionálást.

Példa:

HTML kód:

<!DOCTYPE html> 
<html lang="hu"> 
<head>
<meta tagok />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
	<div class="container_x">
		<div class="grid_x">
			<header>
				<nav>
				</nav>
				<egyéb fejléc elemek>
			</header>
		</div>
		<div class="grid_x">
			<section>
				<article></article>
				<article></article>
				<article></article>				
			</section>
			<section>
				<article></article>
				<article></article>
				<article></article>				
			</section>
		</div>
		<div class="grid_x">
			<footer>
			</footer>
		</div>
	</div>
</body>
</html>

Fontos a sebesség is. Előbb a css, legvégén a javascript töltődjön be, ezért mindent a <head>-ben hívj meg sorrendben. Próbáld ki a CloudFlare-t, akár 2-3x sebességnövekedés érhető el ezzel a DNS szolgáltatóval, a beállítása pofonegyszerű, és a legtöbb szolgáltatása ami kellhet ingyenes.

Ha használsz jQuery-t vagy Mootools-t, akkor használd a Google Libraries API-t, ez is gyorsít a scriptek betöltődésén, ráadásul aszinkron módon.

Ha még így sem elég a sebesség, akkor Amazon S3 és CloudFront CDN szervereken tárold a képeket, css-t, scripteket. Nem drága, nekem napi 200 egyedi látogatóval alig éri el a havi 1-2 dollárt. Amúgy is megtérül az ára, ha csökken a bounce rate ezáltal

Tekintsd meg a fotós weboldalam, ahol fotókat és scripteket tárolok Amazon-on és CloudFlare DNS-t használok. Betöltődési idő átlag 2 másodperc oldalanként, a blog kb 5 másodperc. Még nem tökéletes, naponta fejlesztem

**Kvarclovag** · 2011-07-03, 07:12

Nekem mostanában volt olyan tapasztalatom, hogy a főoldalon a a linkek átrendezése után 5-10 napra kivette a főoldalt az indexből. Gondolom amíg végignézte hova mutatnak az új linkek. Egyszer kiraktam a havi archívumra a linkeket, ettől lett 6 új link (fiatal az oldal), egyszer meg a címkéket rendeztem és vontam össze, ettől a számuk kicsit kevesebb lett, de lettek újak, amik új linkként jelentkeztek. Mindkétszer kivette a Google a nyitólapot az indexből. Egy régi aloldalra is tettem ki linket arra is ugyanúgy reagált, az aloldalt kivette pár napra az indexből.

Az oldal csak fél éves, és nem lehet túl nagy a bizalma benne a Googlenak. Lehet, hogy ezért csinálta, de lehet, hogy a link eladások, a régi oldalakra linkek kirakásának erősödő divatjára reagál így.

**FabianGabor** · 2011-07-03, 15:58

tom.pannon nem akarja átrendezni az URL-ket, úgyhogy ilyen gondja nem lehet. Tulajdonképpen a Google-t nem kéne rossz irányba befolyásolja az új design, hanem segítse az indexelésben.

**Kvarclovag** · 2011-07-03, 16:47

tom.pannon eredeti hozzászólása

minden alkategóriára közvetlen link mutat majd, így a linkek száma jelentősen nő a kezdőlapon

Erre írtam, hogy én, hogy jártam ilyen esetben. Nem lett gond, csak pár napra kikerült az oldal az indexből. És mivel a nyitólapon ez 2x megtörtént, egy aloldalon meg 1x, ezért arra gondoltam, lehet ebben valami módszer a Google részéről.

**tom.pannon** · 2011-07-04, 16:05

Köszönöm a válaszokat!

Az átállással nem lesz problémám, mert ezekben a dolgokban nagy gyakorlatom van.

Az új tagokat viszont kihagytam: pl. <nav></nav>. Utána kell néznem, hogy miként is kell ezt helyesen, okosan.

Cloudfare-t ezúttal nem tudom kipróbálni. Nem az én oldalam, nem variálhatok vele ennyit. Egyébként inkább tároljam a képeket az amazon szerverén mint mondjuk a mediacenterén, domainabc-jén, vagy valami hasonlón? Miért?

Azt nagyon el szeretném kerülni, hogy az indexből eltűnjön a lap. Ha csak a főoldal, akkor is... ha az aloldalak is mennek, akkor jobb ha neki sem állok az egésznek.

ui.: király a fotós oldal, és tényleg gyors! A képeket nézegetve elgondolkodtam: lehet, hogy szakmát váltok.

**FabianGabor** · 2011-07-04, 16:45

A <nav> tagot oda kell tenni, ahol a navigáció van, ebbe jöhet bármilyen más tag, mint pl <div>, <ul> stb.

Amazon szerveren tárolni a képeket több előnye is van. Először is CDN szolgáltatásuk is van, ami ingyen használható az S3 szerverükkel. A másik, hogy nagyon jól lehet állítani a caching-et, akár file-onként vagy mappánként. Én 1&1 hostingon vagyok, de mikor áttértem Amazon-ra, a weboldalam kb 2-3x lett gyorsabb.

CloudFlare dns-re pedig érdemes áttérni, meg kell kérni a domain birtokosát, hogy adjon hozzáférést.

Ha a tartalmat nem változtatod, akkor nem fog eltünni az indexből az oldal.

**tom.pannon** · 2011-07-04, 19:14

FabianGabor eredeti hozzászólása

A <nav> tagot oda kell tenni, ahol a navigáció van, ebbe jöhet bármilyen más tag, mint pl <div>, <ul> stb.
...

Köszi, tanulságos volt. Nem találom, hogy hol lehet pontot adni... csak privátnál van, vagy változtak a szabályok? Pedig adnék...

**FabianGabor** · 2011-07-05, 00:39

Ha a hírnévpontra gondolsz, akkor a bal oldali oszlopban a nevem alatt 3 kis ikon közül a középső (a bogyó és a kresz tábla között) gomb, avagy http://seo.forum.hu/reputation.php?p=237550. A hozzászólás alatt pedig jobb oldalt a sárga mutatóujj és a Thanks feliratú gomb