HTML Meta Tagek és a <head> Szekció

A HTML head szekció és a meta tagek kapcsolata a Google keresővel

Eddig szinte kizárólag a <body> szekcióval foglalkoztunk, azzal a résszel, amit a látogatók a képernyőn látnak. Most azonban felemeljük a motorháztetőt, és belenézünk a weboldal "agyába": a <head> szekcióba. Az ide írt kódok láthatatlanok a felhasználó számára, de a Google és a Facebook számára ezek a legfontosabb információk az egész oldalon.

A kötelező technikai Meta Tagek

A <meta> tagek (metaadatok) adatokat szolgáltatnak magáról a HTML dokumentumról. Két olyan meta tag van, ami nélkül ma már nem létezhet weboldal:

<!-- 1. Karakterkódolás -->
<meta charset="UTF-8">

<!-- 2. Reszponzív nézet (Viewport) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

charset="UTF-8": Ez biztosítja, hogy a böngésző helyesen jelenítse meg a speciális karaktereket és az ékezetes betűket (á, é, ő, ű). Ha ezt kihagyod, a szöveged olvashatatlan krikszkrakszokká eshet szét.
viewport: Ez a sor mondja meg a mobiltelefonok böngészőinek, hogy ne egy hatalmas asztali monitort próbáljanak meg bezsúfolni a kis képernyőre, hanem a weboldal szélessége igazodjon az adott eszköz (telefon, tablet) képernyőjének szélességéhez. Enélkül nincs mobilbarát weboldal!

A SEO Szent Grálja: Title és Description

Amikor rákeresel valamire a Google-ben, a találati listán (SERP) kék, kattintható linkeket és alattuk rövid, fekete szöveges leírásokat látsz. Ezeket az információkat a Google a te <head> szekciódból olvassa ki.

<!-- A böngésző fülén és a Google kék linkjeként jelenik meg -->
<title>Profi Weboldal Készítés Budapesten | CégNév</title>

<!-- A Google találat alatti rövid leírás -->
<meta name="description" content="Vállaljuk prémium, villámgyors weboldalak és webshopok készítését garanciával. Kérjen ingyenes árajánlatot még ma!">

SEO Aranyszabályok:

A <title> a legfontosabb rangsorolási tényező az oldalon (On-Page SEO). Mindig tartalmaznia kell a legfőbb kulcsszavadat, lehetőleg minél közelebb az elejéhez. Hossza maximum 60 karakter legyen, különben a Google levágja a végét.
A <meta name="description"> közvetlenül nem javítja a helyezésedet, de ez a te "reklámszöveged". Ha jól írod meg (tartalmaz egy Call to Action-t, azaz cselekvésre ösztönzést), sokkal többen fognak rákattintani a te linkedre, mint a konkurenciáéra. Ideális hossza 150-160 karakter.

Közösségi Média: Az Open Graph (OG) Tagek

Biztosan láttad már, hogy ha megosztasz egy linket a Facebookon vagy a LinkedIn-en, automatikusan megjelenik egy szép nagy kép, egy cím és egy leírás. Ezt a varázslatot az úgynevezett Open Graph meta tagek végzik.

Ha ezeket nem állítod be, a Facebook véletlenszerűen kiválaszt egy képet az oldaladról (például egy apró ikont), ami borzalmasan fog kinézni.

<!-- Open Graph tagek a Facebook és LinkedIn számára -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://teoldalad.hu/cikk-url">
<meta property="og:title" content="A cikked figyelemfelkeltő címe">
<meta property="og:description" content="Rövid, izgalmas leírás, ami kattintásra ösztönöz.">
<meta property="og:image" content="https://teoldalad.hu/kepek/facebook-boritokep.jpg">

A legfontosabb az og:image. Ide egy 1200x630 pixel felbontású, figyelemfelkeltő képet érdemes betenni, mert ez fogja elfoglalni a legnagyobb helyet a felhasználók hírfolyamában.

← Előző lecke Vissza a Főoldalra →