Munkám során gyakran találkozom olyan ügyfelekkel, akik nagy energiát fektetnek az oldal elkészítésébe és határozottan tudják is, hogy mit hogyan akarnak, de a meta tagek kitöltésére már nem fordítanak elegendő figyelmet. Ez egy elég súlyos probléma. Meta tagek fontos funkciót töltenek be a keresőoptimalizálás során. Ne sajnáljuk a kitöltésükre az időt.
Meta tagek fontossága
Véleményem szerint a meta tagek fontossága a keresőoptimalizálás során nem lebecsülendő. Az igaz, hogy régebben sokkal nagyobb szerepet töltöttek be, de ha megfelelő módon állítjuk be, akkor több látogatók tudunk vonzani az oldalunkra. Segítségükkel elérhetjük, hogy minden egyes oldalunk önállóan is megnyerő legyen a látogatók számára a keresőkben.
Meta tag definiciója
Meta tagek a weblap html kódjának head részében található kódrészletek, melyek fontos információt szolgáltatnak a weblap tartalmáról. Nem fognak megjelenni magán a weblapon, de a keresőrobotok számára fontos információkat tartalmaznak, ezért a kitöltésük erősen ajánlott, ha olyan weblapot szeretnénk készíteni, amivel jó helyezést érünk el a keresőkben. Az alábbi meta tagek beállítását és használatát fogom részletezni: meta title, meta description, open graph.
Meta title tag
Title tag nem más, mint az aktuálisan megnyitott weblap címe. Érdemes minden oldalnak más és más címet adni. Lehetőség szerint ide is helyezzünk el legalább egy kulcsszót, amire optimalizáljuk a weblapot. Tehát az itt megadott kulcsszó vagy kulcsszavak jelenjenek meg a fő tartalmi részben is.
Meta title tag maximális hossza 75 karakter legyen. Nem érdemes ennél hosszabbat választani. Az itt megadott szöveg fog megjelenni a keresőkben címként, ezért próbáljunk meg figyelemfelkeltő címet választani. Ha a keresőben feljön a látogatóknak a weblapunk, akkor elsősorban a cím és a helyezés alapján fog eldölni, hogy melyikre kattintanak. Adjunk egyedi, érdekes és tömör címet, ami az adott oldalra jellemző.
Ha sikerül jó címet megadni, akkor a látogató pontosan tudni fogja, hogy az adott oldal miről szól, így a meglátogatása után nem fog csalódottan visszafordulni, mi meg szereztünk magunknak egy értékes látogatót.
Title tag megadása
Title taget a következőképpen kell definiálni a html kód head részében:
1 | <title>Meta tagek beállítása - meta title, meta description, open graph</title> |
Meta description tag
Meta description tag tartalmazza az oldal leírását, bemutatását. Az optimális hossza 150-200 karakternek kell lennie és mint a meta title tag esetében, itt is fontos, hogy tartalmazza az oldalhoz kapcsolodó, releváns kulcsszót vagy kulcssszavakat.
Description tag jelenik meg a találati listában a cím alatt, így érdemes itt is érdekes, a látogatók számára hasznos információkkal ellátott leírást készíteni. Gyakorlatilag ezzel a szöveggel tudjuk reklámozni az oldalunkat. Gondoljunk rá így is. Kerüljük a száraz, mindenki másnál is fellelhető unalmas leírásokat. Megfigyelhető, hogy a találati listát a meta title és a meta description határozza meg. Úgy állítsuk be őket, hogy egységes és vonzó képet kapjon a látogató az oldalunkról.
Description tag megadása
Description taget a következőképpen kell megadni:
1 | <meta name='description' content='Tudja meg, hogyan kell a meta tagek beállítását elvégezni: meta title, meta description, opengraph.' /> |
Open graph tag
Open graph tag-ek jelölik a forráskódban a facebook meta tag-eket. Akkor érdemes használni, ha a weboldal tartalmaz facebook megosztási lehetőséget. Segítségükkel megadhatjuk, hogy megosztás esetén milyen kép, milyen cím és milyen leírás jelenjen meg a facebookon. Érdemes használni, hiszen ezek alapján fogjan az emberek a weblapunkra jönni a facebookon keresztül.
Facebook meta tag-ek megadása
Az alábbi facebook meta tag-eket használhatjuk a leggyakrabban:
1 2 3 4 5 6 7 | <meta property="og:site_name" content="Nextdesign - a web világa" /><meta property="og:title" content="Meta tagek beállítása - meta title, meta description, open graph" /><meta property="og:description" content="Tudja meg, hogyan kell a meta tagek beállítását elvégezni: meta title, meta description, opengraph." /><meta property="og:url" content="https://nextdesign.hu/blog/meta-tagek-beallitasa-meta-title-meta-description-open-graph" /><meta property="og:image" content="https://nextdesign.hu/files/images/1434183571/meta-tagek.jpg" /><meta property="og:locale" content="hu_HU" /><meta property="og:type" content="website" /> |
Ezeket a meta tag-eket hasonlóan kell beállítani, mint a weblapokét. Ha akarjuk, akkor más értékeket is megadhatunk, mint amiket a weblap esetében.