Elit Hardver
Gyártók
A PC komponensek piacának meghatározó szereplői kategóriánként rendezve. Oktatási célból különböző link attribútumokat alkalmazunk.
SEO, Belső hivatkozások, Carousel és JavaScript oktatás
HTML head SEO elemek:
- <title> - Az oldal címe (böngésző fül, keresési találatok címe)
- Max 50-60 karakter (hosszabbat levágja a Google)
- Egyedi minden oldalon, tartalmazza a kulcsszavakat
- Példa ezen az oldalon: "Gyártók - Elit Hardver"
- <meta name="description"> - Rövid leírás az oldalról
- Max 150-160 karakter (hosszabbat levágja a Google)
- Megjelenik a keresési találatok alatt (snippet)
- Befolyásolja a kattintási arányt (CTR)
- Példa ezen az oldalon: "PC komponens gyártók bemutatása..."
- <meta name="viewport"> - Reszponzív megjelenítés mobilon
- content="width=device-width, initial-scale=1"
- Kötelező a mobil-barát weboldalakhoz
- <meta charset="UTF-8"> - Karakterkódolás (ékezetes betűk)
- UTF-8 univerzális, minden nyelvet támogat
- <link rel="icon"> - Favicon (böngésző ikonka)
- Megjelenik a böngésző fülön és a könyvjelzőkben
- 32x32 vagy 16x16 pixel PNG/ICO formátum
- <html lang="hu"> - Oldal nyelve
- Segíti a keresőmotorokat és képernyőolvasókat
- hu = magyar, en = angol, de = német
Open Graph Protocol (Social Media SEO):
Az Open Graph (OG) meta tag-ek szabályozzák, hogyan jelenik meg az oldal közösségi médiában (Facebook, LinkedIn, Discord stb.) amikor valaki megosztja a linket.
- <meta property="og:title"> - Cím social media kártyán
- Lehet eltérő a <title> tag-től, optimalizálható közösségi médiára
- Példa: "Elit Hardver - PC Komponens Gyártók Áttekintése"
- <meta property="og:description"> - Leírás a social kártyán
- Hasonló a meta description-höz, de lehet hosszabb
- Vonzó, rövid összefoglaló a megosztott tartalomról
- <meta property="og:image"> - Előnézeti kép URL-je
- 1200x630 pixel ajánlott méret (Facebook, LinkedIn)
- Abszolút URL szükséges (https://domain.com/image.jpg)
- Ez jelenik meg a link megosztásakor nagy képként
- <meta property="og:url"> - Kanonikus URL
- Az oldal pontos címe (canonical URL)
- Duplikált tartalom elkerülése
- <meta property="og:type"> - Tartalom típusa
- website = normál weboldal
- article = cikk/blog poszt
- product = termék oldal
- <meta property="og:site_name"> - Weboldal neve
- Példa: "Elit Hardver"
- Branding célú, megjelenik a social kártyán
Miért fontos? Közösségi média megosztásnál professzionális megjelenés, növeli a kattintási arányt (CTR), ellenőrizhető a Open Graph Preview eszközzel.
Belső hivatkozások (Anchor linkek):
Az oldal tetején található tartalomjegyzék és az oldal alján lévő "Vissza a tetejére" link belső hivatkozásokat használnak az oldal különböző szakaszaihoz való gyors ugráshoz.
- ID attribútum - Minden címsornak és a body elemnek egyedi azonosítója van
- Példák: id="processzor-gyartok", id="top" (body elem)
- Az ID egyedi kell legyen az egész oldalon
- URL-barát formátum: kisbetűk, kötőjel, ékezet nélkül
- Hash (#) hivatkozás - Az anchor link # karakterrel kezdődik
- Szakasz link példa: <a href="#processzor-gyartok">Processzor gyártók</a>
- Oldal tetejére ugrás: <a href="#top">Vissza a tetejére</a>
- Kattintásra az oldal automatikusan a megfelelő ID-jú elemhez görgeti a tartalmat
- Előnyök:
- Jobb felhasználói élmény (gyors navigáció hosszú oldalon)
- SEO előny (Google megjeleníthet "Jump to" linkeket)
- Akadálymentesség (képernyőolvasók számára hasznos)
- Shareable linkek (megosztható konkrét szakasz, pl. example.com/page#section)
- <nav> elem - Szemantikus navigációs konténer
- aria-label attribútum az akadálymentességhez
- Segíti a keresőmotorokat és képernyőolvasókat
Link attribútumok (SEO):
- rel="nofollow" - A keresők ne kövessék a linket (nincs link juice átadás)
- rel="noopener" - Biztonsági védelem (új ablak nem fér hozzá az eredeti oldalhoz)
- rel="noreferrer" - Nem küld referrer információt a céloldalnak
- Dofollow (alapértelmezett) - A keresők követik a linket (link juice átadás)
Carousel (Körhinta) komponens:
- Struktúra:Wrapper > Carousel konténer > Elemek (manufacturer-item)
- Nyilak: Bal és jobb navigációs gombok (carousel-arrow)
- ARIA attribútumok: aria-label="Előző/Következő" az akadálymentesítéshez
- CSS: Overflow hidden, flex layout, smooth scrolling animáció
- Reszponzív: Mobilon kevesebb elem látszik, különböző képernyőméretekhez igazodik
JavaScript funkciók (carousel.js):
- Scroll animáció: scrollBy() metódus smooth viselkedéssel
- Eseménykezelés: addEventListener() a nyilak kattintására
- DOM lekérdezés: querySelectorAll() az összes carousel megtalálásához
- Dinamikus számítás: offsetWidth méretmérés a görgetési távolsághoz
