Videó fejezetek:
Előző videómban bemutattam egy egyszerű weboldalnak az elkészítését, az elejétől a végéig. Egész konkrétan, ennek a csatornának weboldalát készítettem el. Bár a 40 perces videó végeredménye egy jól használható weboldal lett, maradt egy számomra fontos igény, amivel nem foglalkoztam. Ez az igény pedig nem más, minthogy az internetes keresőkben megtalálható legyen a weboldal, méghozzá lehetőleg minél jobb pozícióban. Úgy gondoltam, hogy sokak számára hasznos lehet, ha részletesen bemutom egy gyakorlatias videóban a kivitelezést.
Hasonlóan az előző videómhoz, ez sem tartalmaz semmilyen promóciót, csak ingyenes programokat használok, melyek egy öreg számítógépen is el tudnak futni. A célom eléréséhez nem egy darab nagy feladatot kell majd elvégeznem, hanem sok kicsit. Ezen feladatok jó része nem épül egymásra, de egymást segíti. Más honlap esetében lehet az itt bemutatott technikák csak egy része lesz releváns, illetve, vannak még olyan technikák is melyekkel ebben a videóban nem foglalkozok.
A legtöbb módosítás, bővítés amit ebben a videóban elvégzünk, azt egy átlagos látogatónak a böngészője nem fogja mutatni, vagy legalábbis ritkán lesz szemmel látható. A munkánk lényege, hogy a keresőrobotok számára érthetőbb formában fogalmazzuk meg az oldalaink tartalmát. A feladatok nem bonyolultak, mert jellemzően kis szöveges sablonokat (úgymond metaadatokat) fogunk kitölteni és hozzáadni az oldalainkhoz, de időt viszont igényelnek.
Első lépésként engedélyezni fogom a keresőrobotoknak, hogy a weboldal teljes tartalmához hozzáférjenek. Először létre kell hoznom egy új fájlt a weboldal ugyanazon könyvtárában, ahol a főoldal is található. Ezt a fájlt robots.txt -nek kell elnevezni, mert a keresőrobotok ezt a fájlt keresik a rájuk vonatkozó utasításokért egy adott weboldalon.
A fájl első sorában hozzáadom a User-agent: * kifejezést, ami azt jelenti, hogy mindegyik robotra vonatkozik a következő sorban lévő utasítás. A következő sorba pedig az Allow: /< kifejezést helyezem. Ez annyit tesz, hogy a teljes weboldal tartalmát engedem, hogy átnézzék.
Egy sor kihagyása után pedig megadom neki, hogy hol találja meg a weboldal oldaltérképét. Ezt a fájlt még nem hoztam létre, ez lesz a következő lépés.
User-agent: *
Allow: /
Sitemap: https://www.clpro.org/sitemap.xml
Az oldaltérkép (angolul “Sitemap”) egy fontos eszköz arra, hogy a keresőrobotok meg tudják találni a weboldalunk összes lapját. Itt ki fogjuk listázni az összes oldalunk címét, illetve, megadjuk, hogy mikor volt az adott lap frissítve legutoljára.
Az oldaltérképet sitemap.xml-nek nevezem el és ugyanabba a mappába mentem, ahol a főoldal is található. Ennek az oldaltérkép fájl formátumának van úgymond egy szabványa, amely egy hosszas fejléc megírásával kezdődik. Ezt csupán bemásolom ide. A fejléc megértése nem járna haszonnal számunkra, így nem is fejtem ki. Ha nem szeretnéd kézzel begépelni, akkor nyugodtan másold le ezt a tartalomjegyzék fejlécet a CLPro weboldaláról (https://www.clpro.org/sitemap.xml)
A mi teendőnk, hogy a fájlt záró </urlset> tag és a fejléc közé, a megfelelő formában megadjuk a weboldalunk lapjait. Minden egyes lapot <url> tagek közé teszünk. Az <url> tagen belül használjuk a <loc> taget, amiben megadjuk a pontos címét az adott oldalnak. A <loc> tag után, de még mindig az <url> tagek között, hozzáadjuk a <lastmod> taget. Ebben a <lastmod> tagben megadjuk azt a dátumot, amikor az adott oldal utoljára frissült. Fontos, hogy a dátumot olyan formában add meg, ahogy a képen látod. Azaz Év, Hónap, Nap számokkal írva, kötőjelekkel elválasztva, és a nullát is kell írni az egyszámjegyű napoknál vagy hónapoknál. Ugyanezt a lépést kell megismételni minden egyes oldal esetén.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd
http://www.w3.org/1999/xhtml
http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://www.clpro.org/</loc>
<lastmod>2024-04-02</lastmod>
</url>
<url>
<loc>https://www.clpro.org/szechenyi-istvan/</loc>
<lastmod>2024-04-02</lastmod>
</url>
<url>
<loc>https://www.clpro.org/milton-friedman/
<lastmod>2024-04-02</lastmod>
</url>
</urlset>
A következő lépésben úgymond bemutatkozunk a keresőrobotoknak és megosztjuk az elérhetőségeinket. Ezt úgy tesszük, hogy hozzáadunk egy megfelelő típusú metaadatot a főoldalunkhoz.
Megnyitjuk a főoldalunk weblapfájlját a szövegszerkesztőben és a legaljára navigálunk. A </body> tag elé fogjuk beírni a metaadatot. Bár én most nulláról begépelem az egészet, könnyebb lehet számodra másolni és csak átírni, mert így elkerülheted, hogy kimaradjon pár fontos karakter.
A kezdeti <script type="application/ld+json"> tag elmondja, a következő rész egy meta adat lesz. A "@context": "http://schema.org" definiálja, hogy melyik szabványt használjuk a metaadatok leírására. A "@type": "Organization", elmondja, hogy itt egy szervezetet fogunk leírni. Szervezet alatt természetesen érthetünk brandet, céget, non-profitot stb. A name paraméterben megadom a brand nevét. Az url paraméterben a weboldal teljes címét. A description paraméterben egy rövid leírást adok a brandről, ezt amúgy bármilyen nyelven megtehetem. A logo paraméterben megadom a brand logo fájljának a teljes címét, melyet már korábban fel is töltöttem.
A contactPoint paraméter több alparaméterre bomlik és itt tudunk megadni a kapcsolati információkat. Én most csak email címet adok meg az email alparaméter segítségével. Ugyanakkor meg kell adnom, hogy milyen célú elérhetőség ez. Ezt csak Általánosnak nevezem el, de bárminek hívhatnám.
Az utolsó részben a sameAs paraméter segítségével pedig megadom az összes CLPro-hoz tartozó szociális média csatorna linkjét, s így a robot tudni fogja, hogy ugyanaz az identitás.
Ennyi metaadat elegendő számomra, ugyanakkor még nagyon sok más adat megadható lenne, például cím, telefonszám, vagy más hivatalos adatok is. Ezeket az adatokat felhasználva egy kereső más módokon is meg tudna jeleníteni minket, például térképen.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "CLPro",
"url": "https://www.clpro.org",
"description": "CLPro digital content creator",
"logo": "https://www.clpro.org/clpro-logo-150x150.png",
"contactPoint": {
"@type": "ContactPoint",
"email": "hello@clpro.org",
"contactType": "Altalanos"
},
"sameAs": [
"https://www.tiktok.com/@_clpro_",
"https://youtube.com/@CL_Pro",
"https://www.facebook.com/clpro.org",
"https://www.instagram.com/clpro_org",
"https://twitter.com/@_clpro_"
]
}
</script>
Hogy a weboldalunkra mutató linkeket megfelelő formában tudjuk megosztani szociális media oldalakon vagy üzenetküldő alkalmazásokban, ahhoz a megosztani kívánt oldal fejlécében el kell helyeznünk meta adatokat. Ismét a főoldalon fogok dolgozni, de ezt a teendőt az összes létező oldal elvégzem majd a kamerán kívül. Egy-egy szociális média csatorna más formátumban várja el ugyanazt a meta adatot, ezért azt több példányban is meg fogom adni. A metaadatokat a <head> tagen belül fogom elhelyezni.
Első lépésben megadom az adott oldal íróját, szerzőjét a
<meta name="author" content="CLPro"> segítségével.
Az adott oldal webcímét a
<meta property="og:url" content="https://www.clpro.org/"> segítségével adom hozzá.
Az adott oldal címét kétféle formában adom meg, az egyik általánosan több szociális média csatornának megfelel, míg a másik specifikus a Twitterhez (X-hez):
<meta property="og:title" content="CLPro">
<meta name="twitter:title" content="CLPro">
Az adott oldal leírását is kétféle formában adom meg:
<meta property="og:description" content="Tekintsd meg CLPro tartalmait: hangoskönyvek, fordítások, és ismertetők.">
<meta name="twitter:description" content="Tekintsd meg CLPro tartalmait: hangoskönyvek, fordítások, és ismertetők.">
A következő lépésben megadom annak a képfájlnak az elérhetőség, amit az oldal linkjének megosztásakor az adott platform előképként fel tud használni. Természetesen ezt a képet is fel kell tölteni. Az én esetemben ugyanabba a mappába teszem, ahol a főoldal is található. A kép megadásánál is két formátumot használok.
<meta property="og:image" content="https://www.clpro.org/clpro-elokep.jpg">
<meta name="twitter:image" content="https://www.clpro.org/clpro-elokep.jpg">
A következő két meta tag Twitter specifikus. Először megadom, hogy megosztásnál nagy képes formátumban jelenítse meg a platform a
<meta name="twitter:card" content="summary_large_image"> segítségével. Végül pedig megadom a Twitter felhasználónevet a
<meta name="twitter:site" content="@_clpro_"> segítségével.
Ha szeretnénk, hogy a weboldalunk logoja avagy ikonja meg tudjon jelenni a keresőkben vagy amikor a kedvencek közé menti az oldalt a látogató, akkor két tennivalónk van.
Egyrészt el kell készítenünk a logót több felbontástban is, hogy különböző eszközökkel, böngészőkkel működjön. Az ikonok 1:1-es méretarányban, azaz négyzet alakban készülnek és a kép formátuma png. A méretek amelyekre elkészítem:
A képeket ugyanabba a mappába helyezem, ahol a főoldal is található. A képek neveibe belefoglalom a méretüket, hogy átláthatóbb legyen számomra.
A metaadatokat a <head> tagen belül fogom elhelyezni, a weboldal fejlécében. Ezt minden oldallal majd el fogom végezni, de most a főoldalon mutatom be.
A <link rel="icon"> metataggel definiálom az ikont. A paramétereiben megadom a kép típusát, méretét, és webes címét relatív elérhetőséggel. Ezt több különböző képmérettel is megteszem.
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
Az Apple eszközökkel való kompatibilitás növelése érdekében egy másik meta formátumot is hozzáadok minden egyes képmérethez. Ez a <link rel="apple-touch-icon"> lesz. Itt alapvetően lemásolom a korábban beírtakat, és csak a “rel” részt írom át:
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon.png">
A weboldalaink fejlécében megadhatjuk a kulcsszavak listáját, melyek jól jellemzik az adott oldal tartalmát. Régen a keresőrobotok ennek nagyobb jelentőséget tulajdonítottak annak eldöntésében, hogy mely keresésekre hozza fel oldalunkat. Bár manapság ennek jelentősége nem túl sok, mégis érdemes lehet megadni.
Ezt a metaadatot is a <head> tagen belül fogom elhelyezni, a weboldal fejlécében. A kulcsszavakat vesszővel elválasztva kell felsorolni és tartalmazhatnak szóközöket is. Most a főoldal kulcsszavait adom meg. Természetesen az egyes oldalakra más-más kulcsszó lesz jellemző és célszerű minél specifikusabbnak lenni.
<meta name="keywords" content="CLPro, hangoskönyv, fordítás, előadás, Széchenyi István, Milton Friedman, Utazás, Informatika">
A képek mérete jelentősen befolyásolja egy oldal sebességét és ez által a felhasználói élményt. Az oldal sebessége a keresőrobotok számára is fontos. Ezért a már felhasznált jpg vagy png formátumú képekből készítünk modernebb tömörítési formátummal rendelkező változatokat is, nevezetesen a WebP és AVIF formátumok. Az előző videóban bemutatott Squoosh programot használom, ahol ki tudom választani ezeket a modern formátumokat. Az új formátumú képeket ugyanabba a mappába helyezem, ahol a meglévő változat is található. Mindegyik meglévő képhez készítek új formátumot. Bár ezek a formátumok jelentős csökkentést tudnak elérni a fájlok méretében minimális minőségvesztés mellett, jelenleg csak modernebb eszközök és böngészők támogatják.
Hogy megtartsuk a kompatibilitást is a régebbi eszközökkel, ezért módosítani fogjuk a weboldalunk kódjának azon részeit, amely a képek beillesztésével foglalkozik, azaz az <img> taget. Lényegében tudtára fogjuk adni a böngészőnek, hogy a képből több változat is rendelkezésre áll, s így az újabb böngészők az újabb formátumokat fogják választani.
Ezt úgy tesszük, hogy a meglévő <img> taget körbefogjuk egy <picture> taggel. A <picture> tagen belül létrehozunk egy-egy <source> taget mindegyik alternatív képformátumnak. A <source> tagen belül megadjuk a kép típusát a type pareméterrel és a képfájl elérhetőségét az srcset paraméterrel. Ugyanezt kell tennünk az összes többi képhez tartozó <img> taggel is. Ha megnyitjuk a böngészőben az oldalt, nem fogunk változást látni, de ettől még az oldalunk gyorsabb lesz a kompatibilis eszközökön.
<picture>
<source type="image/webp" srcset="clpro-logo-150x150.webp">
<source type="image/avif" srcset="clpro-logo-150x150.avif">
<img src="clpro-logo-150x150.png" width="80" height="80" alt="CLPro logo">
</picture>
Minden egyes oldalt ami videóval rendelkezik extra metaadattal (úgymond strukturált adattal) fogok ellátni, hogy a keresők jobban megértsék miről is szól a videó. Először is megnyitom az adott oldal weblapfájlját a szövegszerkesztőben és a legaljára navigálok. A </body> tag elé fogom beírni a metaadatot. Bár én most nulláról begépelem az egészet, könnyebb lehet számodra másolni és csak átírni, mert így elkerülheted, hogy kimaradjon pár fontos karakter.
A kezdeti <script type="application/ld+json"> tag elmondja, a következő rész egy metaadat lesz. A "@context": "http://schema.org" definiálja, hogy melyik szabványt használjuk a metaadatok leírására. A "@type": "VideoObject", elmondja, hogy itt egy videót fogunk kifejteni. A ”name” pareméterben megadjuk a videó címét. A description paraméterben egy rövid, összefoglaló leírást vagy bevezetőt adunk a videóról.
A thumbnailUrl paraméterben megadjuk a videó borítóképfájljának az elérhetőségét, webcímét. Az uploadDate paraméterben megadjuk a dátumát és idejét a videó feltöltésének, publikálásának. Nagyon fontos, hogy a formátum a képen látható módon legyen, ami Év-Hónap-Nap és a nullák is kiírásra kerülnek. A dátumot és az időt egy T betű választja el. Az időzónát pedig a végén adjuk meg.
A duration paraméterben megadjuk a videó hosszát. A formátum itt is fontos. Kezdjük PT-vel majd perc és másodperc. A perc után M a másodperc után S kerül.
Végül pedig a contentUrl paraméterrel megadjuk a videó fájljának teljes webes elérhetőségét.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "Széchenyi István: Asszonyokról, férfiaknak",
"description": "Ha kívánjuk hölgyeink megmagyarosodását, tegyük azt, ami magyar, elfogadhatóvá, tetszetővé is. Eszközöljük azt felsőbbségünk által.",
"thumbnailUrl": [
"https://www.clpro.org/szechenyi-istvan/asszonyokrol-ferfiaknak/
asszonyokrol-ferfiaknak.jpg"
],
"uploadDate": "2024-04-02T08:00:00+08:00",
"duration": "PT3M2S",
"contentUrl": "https://www.clpro.org/szechenyi-istvan/asszonyokrol-ferfiaknak/asszonyokrol-ferfiaknak.mp4"
}
</script>
A Google Search Console nevű eszköz segítségével regisztrálhatjuk a weboldalunk a Google keresőbe, illetve így hozzáférést is kapunk a Google kereső ránk vonatkozó adataihoz. Más keresők is biztosítanak hasonló szolgáltatást, felületet. A Google esetén rendelkeznünk kell egy ingyenes Google fiókkal ahhoz, hogy belépjünk a Search Consolba. Itt hozzá tudunk adni új weboldalakat a fiókunkhoz. Azonban először bizonyítanunk kell, hogy tényleg van hozzáférésünk az adott oldalhoz. Ezt többféle módon lehet. Én most azt a megoldást választom, hogy a Google által generált megerősítő fájlt letöltöm és elhelyezem ugyanabba a mappába, ahol a főoldalam is található. Miután ezt a fájlt feltöltöttem a tárhelyre, elindíthatom a verifikációt. A sikeres verifikáció után pedig megadom, hogy az oldaltérkép fájlja hol érhető el. Egyelőre nem láthatok sok adatot a Search Consolban, elsősorban azért, mert a weboldal még nagyon friss.
Ezzel végére is értem a videónak. Napok, hetek, de akár hónapok is eltelhetnek, mire a Google megjeleníti a keresőjében ezt a weboldalt. Bár adottak további lehetőségek, úgy gondolom, hogy ez a weboldal számomra kellően optimalizált. Későbbi videókban pedig további funkciókkal, tartalmakkal fogom az oldalt gazdagítani.