Keresés a blogban

2011. március 16.

Alt and title for images - Horgonyszöveg a képekhez

Az anchor text=horgonyszöveg fortélyairól már írtam egy posztot, itt a szöveges linkek szövegének fontosságát emeltem ki. Ez az a szöveg, amelyet ráakasztasz a hivatkozásra, és a keresők ez alapján dobják ki a linkelt cikket a megfelelő találati helyen. Ilyen szöveget képre is akaszthatsz, így a keresők a képedet is a megfelelő kulcsszóra való keresésnél előbbre tudják rangsorolni.
Egy kép beillesztése mindig a következő szerkezetű kóddal történik:
<img src="http://akepeleresiutja.jpg" />

Ebben a záró kacsacsőr előtt még sok minden szerepelhet, szélesség, magasság, keret stb. értékének megadása, amely azonban minket nem érint, nem kell foglalkoznunk vele. Ha a képre linket akasztunk, akkor a képre kattintva eljuthatunk egy másik tartalomhoz. Ilyenkor a következő a kód szerkezete:
<a href="http://alinkURLcime.html">
<img src="http://akepeleresiutja.jpg" />
</a>

A képhez rendelhető horgonyszöveget az alt beállítás és a linkhez rendelt title beállítási lehetőség adja.

Az alt az alternatív szöveg rövidítése, ez íródik ki a kép helyén, ha az valami oknál fogva nem tud megjelenni,
a title pedig címet jelent, ezzel adhatjuk meg annak a helynek a címét vagy kulcsszavait, ahová a képet linkeltük.

Használatuk:
Töltsük fel a képet, ahogy szoktuk, majd váltsunk HTML írásmódra, keressük meg a kép kódját, és egészítsük ki a piros részekkel.
<a href="http://alinkURLcime.html" title="a szöveg a kulcsszavakkal" >
<img src="http://akepeleresiutja.jpg" alt="a kép helyén megjelenõ szöveg" />
</a>

Mindkettő mögött használhatunk nagybetűt, szóközt és ékezetet az idézőjelek között. A title tehát mindig az <a href="URL" title="cím"> link kezdőtag-jének az alt pedig mindig az
<img src="kepURL" alt="szöveg" /> a kép beszúrás tag-jének zárókacsacsőre előtt van.

Érdemes ezt a két részt a bejegyzéseinkbe feltöltött képekhez betennünk, megfelelő szöveget írva az idézőjelekbe, olyat, amelyre rá akarjuk haraptatni a keresőket, hogy ránktaláljanak. Sajnos mindkettő beírását egyenként, begépeléssel tudjuk a Bloggerben hozzátenni a képekhez (pl. a Wordpressben ezek a feltöltéskor benne vannak, nekünk csak az idézőjelek közötti részt kell beírnunk).

Végül álljon itt egy példa, hogy értsük, mit kell tennünk. Az alábbi kép alatt láthatjátok, milyen kóddal van a kép belinkelve:

a Büfé logó
<div class="separator" style="clear: both; text-align: center;">
<a href="http://abufe.hu/" title="a Büfé - a gasztrobulvár online magazin"><img border="0" q6="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSkTco4O8_H86DT4qa5941XhTdd-Qve2Wtyr3tfr4BbAlfrQNnaYhmiwijF5MQc1DJESnqAzRciEuDkXWIDBEXwZ20QhczgiLh5o5ddAEbyB7PcvS9GdqBLnT4uCsrF01fwdnOY79lSwc/s1600/nyit%25C3%25A1s.jpg" alt="a Büfé logó"/></a></div>

Ha tetszett és segített neked ez a poszt, kérlek lájkold ezt az oldalunkat is:
LÁJKOLOM
Köszönöm. Wise Lady

3 megjegyzés:

murcielago írta... [Válasz erre...]

Kedves Lédy W! Nagyon köszönöm a posztot!Először ugyan úgy voltam, mint aki felébred a sötét éjszaka legközepén és nem érti hol és mikor, de aztán a kiskályhás módszeremmel rájöttem, hogy 1- helyezzük el a képet beszúrással, 2- egy adott bejegyzésben a szerkesztés üzemmódban kell elhelyezni a javasolt HTML-kiegészítéseket. Mikor ílymódon "normál" felfogó-sebességre sikerült felkapcsolnom, arra is rájöttem, hogy a "title" után következő beírt szöveg hogyanis kapcsolódik a keresőoptimalizációs dolgokhoz...
Én mondom, itt egy tankönyvíró géniusz sziporkáit olvassuk...Köszi mégegyszer!

Wise Lady írta... [Válasz erre...]

@murcielago
Á kösz a kiegészítést, a posztba is beteszem!

Noé írta... [Válasz erre...]

Nagyon hálás vagyok! Tagnap találtam az oldaladra, de már nagyon sokat tanultam Tőled. ennek a cikknek köszönhetem, hogy végre sikerült az alt tag segítségével elérnem, hogy a blogbejegyzésembe szúrt képre kattintva az megnyíljon külön ablakban, nagyobb méretben. Nagyon köszönöm! Lelkes olvasód ... és kérdeződ leszek. :) Ezt ígérhetem. :)

Megjegyzés küldése

Text Widget

Magyar nyelvű Blogger helpblog

-