# 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

## Processzor gyártók

### Intel

x86/x64 CPU

PC processzorok piacvezetője, Core sorozat

Weboldal →

### AMD

x86/x64 CPU, GPU

Ryzen processzorok és Radeon videokártyák

Weboldal →

### Apple

ARM CPU (Apple Silicon)

M1-M5 chipek Mac számítógépekhez

Weboldal →

### Qualcomm

ARM CPU, Modem

Snapdragon mobil és laptop processzorok

Weboldal →

### MediaTek

ARM CPU

Dimensity sorozat mobil és laptop chipek

Weboldal →

## Videokártya és alaplap gyártók

### NVIDIA

GPU, AI chipek

GeForce GPU-k, piacvezető grafikai megoldások

Weboldal →

### ASUS

Alaplap, GPU, Perifériák

ROG és TUF gaming sorozat

Weboldal →

### MSI

Alaplap, GPU, Laptop

Gaming hardverek specialistája

Weboldal →

### Gigabyte

Alaplap, GPU

Megbízható alaplapok, AORUS gaming vonal

Weboldal →

### ASRock

Alaplap

Innovatív és költséghatékony megoldások

Weboldal →

## Memória és háttértár gyártók

### Kingston

RAM, SSD

Memória piacvezető, HyperX gaming

Weboldal →

### Corsair

RAM, SSD, PSU, Ház

Komplett PC komponens portfólió

Weboldal →

### Samsung

SSD, RAM, Monitor

Félvezető vezető, EVO és PRO SSD

Weboldal →

### Crucial

RAM, SSD

Micron chipek, kiváló ár-érték arány

Weboldal →

### Western Digital

HDD, SSD

WD Blue/Black/Red, SanDisk SSD

Weboldal →

### Seagate

HDD, SSD

Nagy kapacitású HDD specialista

Weboldal →

## Tápegység és ház gyártók

### Seasonic

Tápegység

Prémium PSU-k, OEM gyártó

Weboldal →

### be quiet!

PSU, Hűtés, Ház

Csendes működésre optimalizált

Weboldal →

### Fractal Design

Ház, Hűtés

Skandináv minimalista design

Weboldal →

### NZXT

Ház, Hűtés, PSU

Modern RGB házak, CAM szoftver

Weboldal →

## Hűtés gyártók

### Noctua

CPU hűtés

Prémium léghűtők, bézs-barna színek

Weboldal →

### Arctic

Hűtés, Hővezető paszta

Költséghatékony hűtés, MX-4/MX-6

Weboldal →

### Cooler Master

Hűtés, Ház

Lég- és vízhűtők széles választéka

Weboldal →

### Thermalright

CPU hűtés

Nagy teljesítményű léghűtők kedvező áron

Weboldal →

### DeepCool

Hűtés, Ház

Innovatív design, AIO vízhűtők

Weboldal →

### EK Water Blocks

Vízhűtés

Custom loop vízhűtés specialistája

Weboldal →

## Periféria gyártók

### Logitech

Egér, Billentyűzet

Széles termékpaletta, G gaming sorozat

Weboldal →

### Razer

Gaming perifériák

RGB Chroma, mechanikus kapcsolók

Weboldal →

### SteelSeries

Gaming perifériák

Professzionális gaming, Apex és Rival

Weboldal →

### HyperX

Gaming perifériák

Egér, billentyűzet, headset gaming eszközök

Weboldal →

### BenQ

Monitor

Gaming és professzionális monitorok, ZOWIE

Weboldal →

### AOC

Monitor

Gaming monitorok kedvező áron, AGON sorozat

Weboldal →

### LG

Monitor

UltraGear gaming és UltraFine monitorok

Weboldal →

### Dell

Monitor, PC

Alienware gaming és professzionális monitorok

Weboldal →

↑ Vissza a tetejére