Példa a kenyérmorzsa mikrojelölésére. Breadcrumbs mikro-jelöléssel a WordPresshez. A Breadcrumbs hatása a SEO-ra

20.11.2019 Windows oktatóanyagok

"; ) if (($kulcs != $penult_item_key) || $show_last) ( echo "" . $elválasztó . ""; ) echo "";

keresd meg a sorokat:

"; echo "" . $elem->név . ""; echo "

";

és cserélje ki őket a következő sorokra:

// Az utolsó elem renderelése, ha igény. visszhang"

"; visszhang" " . $elem->név .""; visszhang"

";

Kész. Mentse el a felülírást, és miután a keresőmotor újraindexelte az oldalakat, látni fogja az eredményt.

„A Business Motor csapat projektmenedzsere, webmester, szövegíró.
A kenyérmorzsa hasznos a felhasználók és a keresőmotorok számára. A mikrojelölés megkönnyíti a felhasználó számára az oldalon való navigálást, és a keresőmotorok kiterjesztett részlet létrehozására használják. Megmondjuk, hogy mi az"

Még az igen komoly sikereket is kiegyenlítheti az alacsony CTR melletti nem vonzó töredékek a pozíciók növelésében. Ezzel szemben egy érdekes, motiváló részlet kiemelheti a webhelyet a többi közül, még akkor is, ha nem a keresési eredmények első sorában szerepel. Ez az oka annak, hogy a kódrészlet kibővítésére szolgáló lehetőségeket maximálisan ki lehet és kell használni. Az egyik ilyen a „breadcrumb” jelölés, amely lehetővé teszi, hogy a keresési eredmények között megjelenítse azt a rubrikát, amelyhez az anyag tartozik, olvasható és érthető a felhasználó számára forma.

Mi az a "zsemlemorzsa"?

"Breadcrumbs" (zsemlemorzsa) a navigációs lánc általánosan elfogadott neve, amely a webhely ezen oldalához vezető útvonalat tükrözi, figyelembe véve a kategóriák és alkategóriák szerkezetét. Valahogy így nézhet ki:

Az oldal használója számára a "zsemlemorzsa" kényelmes, mert lehetővé teszi, hogy gyorsan visszatérjen ahhoz a rovathoz vagy alcímhez, amelyhez az anyag tartozik, valamint könnyen eligazodhat az oldal szerkezetében. De nem kevésbé fontos a navigációs lánc jelentősége a SEO szempontjából, mert mikro-jelöléssel megtervezhető a részlet későbbi módosításaival. Hogyan kell ezt megtenni - olvassa el alább.

Hogyan néz ki egy kiemelt kivonat?

Illusztráljuk a részletet egy adott webhely példáján a navigációs útvonal jelölés alkalmazása előtt és után. Így nézett ki korábban egy tipikus Google könyvismertető részlet:

De ilyen információk jelentek meg a kérdésben, miután a mikro-jelölést végrehajtották, és a keresőmotor újraindexelte az oldalt:

Mint látható, ebben az esetben a címsor kifejezett feltüntetése segít a felhasználónak gyorsan felmérni a könyv műfaját, ami azt jelenti, hogy több információhoz juthat az oldalról és értelmes választást kell hoznia. A webáruházak esetében ez is segít egy pillantással meghatározni, hogy a katalógus melyik kategóriájába tartozik a termék. A kenyérmorzsa szemantikai kialakításával kombinálva lehetővé teszi a legteljesebb, információban gazdag termékrészletet, amely biztosan nem marad észrevétlen a felhasználó számára.

Breadcrumb jelölés a Google-ban és a Yandexben

Érdemes megjegyezni, hogy a Google és a Yandex navigációs lánca szempontjából kiterjesztett kódrészletnek vannak bizonyos különbségei, amelyeket figyelembe kell venni. Tehát különösen, ha a „morzsa” jelölés használata (feltéve, hogy nincsenek hibák) szinte biztosan megjelenik a Google keresési eredményeiben, akkor ez nem garantálható a Yandexben. A Yandex.Webmaster a következő magyarázatot adja erre:

Nagyméretű, jól definiált szerkezetű webhelyek esetén a részlet alatt megjeleníthető egy navigációs lánc (számos hivatkozás a webhely azon szakaszaira, amelyekhez a talált oldal tartozik). Egy ilyen lánc lehetővé teszi, hogy gyorsan felmérje az oldalon található információ mennyiségét vagy a tartalom típusát, és ha szükséges, egy kattintással a kívánt részre ugorjon.

Természetesen a "struktúra kifejezőképességének" megítélése a Yandex algoritmusaira van bízva, így ennek a keresőmotornak a kiadásában előfordulhat, hogy a részlet a mikroadatok bevezetése ellenére sem változik.

Még egy érdekes megfigyelés. A kiterjesztett Google-részletben a címsor szigorúan a webhelyen megjelölt navigációs láncnak megfelelően kerül felhúzásra. Ugyanakkor a Yandex teljesen figyelmen kívül hagyhatja a „zsemlemorzsát”, és az url-cím szerint jelenítheti meg a szerkezetet (még akkor is, ha a valódi megjelölt navigációs láncban több vagy kevesebb szint van).

A kategóriákhoz tartozó kiterjesztett kódrészlet összes funkciójával a Yandex biztosítja további bónuszok használatától. Keresési eredményeiben a címsornevek kattinthatóak, pl. egy adott termék vagy cikk helyett a felhasználó a katalógusnak és rovatnak az őt érdeklő részére léphet.

Hogyan kell használni a kenyérmorzsa-jelölést?

Számos szabvány létezik, amelyek lehetővé teszik a navigációs lánc megjelölését, és mindegyiket egyformán támogatja mind a Yandex, mind a Google. Ezek közé tartozik az OpenGraph, az RDF, a Schema.org és a mikroadatok. Mindegyiknek nincs jelentős előnye, így használhatja azt, amelyik érthetőbb a webhely adminisztrátora vagy az elrendezéstervező számára.

Példaként vegyünk egy navigációs útvonal jelölést a data-vocabulary.org RDF-jelölők használatával. Ehhez a teljes navigációs láncot címkébe kell foglalnia

, majd jelölje meg minden egyes elemét külön.

A mai cikk a navigációs útvonalak mikroadat-jelölésével foglalkozik a Google számára a http://data-vocabulary.org/ mikroadatok alapján.
Kérdés: miért kell mikrojelölés a zsemlemorzsához?
Válasz: hogy a részlet több legyen gyönyörű kilátás, az információ világosabbnak és kényelmesebbnek tűnik a felhasználó számára, így növeljük a konverziót. Tekintsük a „zsemlemorzsa mikrojelölése” kérés eredményének példáját (1. ábra).

1. ábra Google keresési eredmények (a navigációs lánc mikrojelölését használó webhelyek zölddel vannak aláhúzva)

Amint látja, az általam zöld vonallal kiemelt oldalak navigációs sáv mikro-jelölést használnak.

Hogyan kell használni a mikroadatokat és jelölni a kenyérmorzsát?

Tegyük fel, hogy van egy ilyen láncunk:
Bútor – Szekrénybútor – szekrények
Először csomagolja be az egyes navigációs láncelemeket egy blokkba (pl. div) itemscope itemtype=”http://data-vocabulary.org/Breadcrumb” attribútumokkal.
Az itemscope azt jelenti, hogy ez a blokk írja le az elemet.
Elemtípus milyen típusú elem (esetünkben a navigációs elemünk)
Be kell szerezned egy csomagolóanyagot:

Ezután illessze be a hivatkozást a burkolóba, és adja hozzá az attribútumot itemprop="url". Azt mondja a jelölésnek, hogy ez egy link. A kenyérmorzsa első elemének utolsó lépése pedig egy blokk hozzáadása a hivatkozáson belül az első elem nevével. Adjon hozzá egy attribútumot ehhez a blokkhoz itemprop="title".
Az eredmény a navigációs lánc első eleme:

A mikroadatok telepítése után bejelentkezünk

A Google Search Console-ban van egy "Strukturált adatok" elem.

1. ábra - mikrojelölési hibák

Jobb, ha elkezdi a webhely mikrojelölését ennek a szakasznak a bejelölésével. Gyakran előfordul, hogy a mikroadat-ellenőrző eszközök nem jelenítenek meg semmilyen figyelmeztetést vagy hibát, valójában azonban a keresőmotorok nehezen tudják strukturálni az adatokat az Ön webhelyén.

2. ábra – Hentry-mikroadat-hibák

A mi esetünkben azt látjuk, hogy 106 hiba kapcsolódik a hentry jelöléshez (microformats.org)

A WordPress magjába beépített mikrojelölés. Mivel automatikusan be van ágyazva, és nincs hozzáigazítva harmadik felek sablonjaihoz, gyakran nem működik megfelelően, és ez ahhoz vezet, hogy a Google Search Console ilyen hibákat észlel:

2.1. ábra - Hentry hibák: szerző, bejegyzés címe, frissítve

Ugyanakkor a Google jelölés-ellenőrző eszköze teljesen nyugodtan jelzi, hogy nincs hiba és nincs figyelmeztetés ezzel kapcsolatban. ()

3. ábra – A Google nem lát hentry hibákat

Webhelyünkön a schema.org-ot fogjuk használni, amelyet minden keresőmotor egyhangúlag elismer.

Ezt a szabványt a Yandex és a Google is támogatja.

Ezért csak el kell távolítani a beépített hentry jelölést, amely 106 hibát ad a Google Search Console-ban.

Mivel a hentry hozzáadódik a maghoz wordpress - mi lehetővé teszi, hogy szűrőkön keresztül távolítsa el, mert ezek az osztályok nem láthatók a sablonokban.

Forráskód a hentry eltávolításához:

Add_filter("post_class", "fc_remove_hentry", 20); function fc_remove_hentry($classes) ( if (($kulcs = array_search("hentry", $classes)) !== false) ( unset($classes[$key]); ) return $classes; )

A kódot hozzá kell adni a functions.php-hez

Ezt bármilyen kényelmes módszerrel megteheti, például a webhely adminisztrációs paneljének szerkesztőjén keresztül.

4. ábra – A hentry jelölés eltávolítása a teljes webhelyről

Miután elmentette a fájlt, és újra érvényesítette az oldalt a Google mikroadat-ellenőrzőjén keresztül, el kell tűnnie a töprengésnek.

Ellenőrizze néhány hibát, hogy megbizonyosodjon arról, hogy a hentry teljesen eltávolította a webhelyről.

A Google Search Console-ban pozitív tendencia tapasztalható a hibák számának csökkenésében. Idővel teljesen eltűnnek, csak várni kell.

5. ábra – a hentry hibacsökkentés pozitív dinamikája

A hiba eltávolítása:

HIBA: a http://ogp.me/ns#image mező hiányzik vagy üres

6. ábra - Graph megnyitása ns#image hiba

Meg kell értenie, hogy az ilyen hibák a már megírt mikro-jelöléshez kapcsolódnak. Ez azt jelenti, hogy a webhely be van építve, vagy valaki korábbi mikro-jelöléssel van felvéve, amely hibákat tartalmaz.

Ez leggyakrabban akkor fordul elő, ha a mikroadatokért közvetlenül vagy közvetve felelős beépülő modulok helytelenül vannak konfigurálva.

A mi esetünkben a webhelynek van egy beépülő modulja - SEO Ultimate, amelynek van egy speciális szakasza, amely az Open Graph jelöléséért felelős. Ez pedig azt jelenti, hogy a http://ogp.me oldalhoz kapcsolódó hiba a SEO Ultimate bővítményben található.

Menjen a következő útvonalra: SEO Ultimate -> Graph megnyitása -> Alapértelmezett értékek> Alapértelmezett kép

Az alapértelmezett képbeállítást az oldal azon oldalain találjuk, ahol a kívánt kép nem található.

7. ábra – az Open Graph ns#image hiba kijavítása

Adja hozzá a kép URL-jét, amelyet alapértelmezés szerint látni szeretnénk. Hadd emlékeztesselek arra, hogy az Open Graph protokoll felelős a gyönyörű bejegyzések megjelenítéséért a közösségi hálózatokon, a Facebookon, Twitteren, VKontakte-on és így tovább. Vagyis ez a kép, amit alapból beállítottál, megjelenik a bejegyzésekben közösségi hálózatok, újraküldések és így tovább. Válasszon márkás és tekintélyes fotót.

A módosítások mentése után a hiba eltűnik.

8. ábra - Graph megnyitása ns#article hiba

De még mindig van egy hiba az ismeretlen cikkelőtaggal kapcsolatban.

Már tudjuk, hogy webhelyünkön telepítve van a SEO Ultimate bővítmény. Ugyanabban az irányban folytatjuk az ásást.

9. ábra – az Open Graph ns#article hiba kijavítása

Az Open Graph Type telepítése – Webhely.

10. ábra – helyes Open Graph jelölés

Az összes változtatás után a Yandex jelölőellenőrző többé nem generál hibákat:

11. ábra – érvényes Open Graph jelölés

Breadcrumbs jelölés hozzáadása

A navigációs elemek a főoldaltól arra az oldalra mutató linkek lánca, ahol a felhasználó éppen tartózkodik.

Először elemeznie kell a webhelyet a zsemlemorzsa jelenlétére.

12. ábra – zsemlemorzsa a helyszínen

Zsemlemorzsa jelen van az oldalon. Most meg kell értenünk, hogyan jelennek meg. A kenyérmorzsa forráskódjában megtaláljuk annak a beépülő modulnak a nevét, amellyel működnek - Breadcrumb NavXT 4.0.2

13. ábra – Breadcrumb-kimenet a Breadcrumb NavXT-n keresztül

Nyissa meg webhelyünk adminisztrációs paneljét, és lépjen a Breadcrumb NavXT bővítmény szerkesztéséhez.

14. ábra – Breadcrumb NavXT beállítások

Minket a sablonok érdekelnek különböző típusok oldalak: a főoldalhoz, a bloghoz, a címsorokhoz és így tovább. Meg kell értenie, hogy minden webhely más lesz.

Esetünkben a következők érdekelnek minket:

• Blogoldal hivatkozássablonja
• otthoni sablon
• Blog kategória sablon
• Kategória linksablonja

Minden sablon rendelkezik standard nézet típus:

%htitle%

%htitle%

A megfelelő mikro-jelöléshez meg kell jelölnünk ezt a forráskódot a http://schema.org/BreadcrumbList szabvány segítségével

1. Ruhák
2. Igazi ruhák

Nézzük meg, milyen elemeket tartalmaz a jelölés, és hogyan kell őket alkalmazni:

itemscope itemtype=”http://schema.org/BreadcrumbList”

Ez az elem jelzi a jelölési terület kezdetét. Ebben az elemben csak kenyérmorzsa-jelölés lesz.

A példában az elem egy számozott listán belül található - tag

Ez nem kötelező, használhatod

, vagy más hasonló címkéket.
Meg kell vizsgálnia a körülményeket, és emlékeznie kell arra, hogy az ilyen CSS-címke csatlakozik a navigációs útvonalakhoz. Azaz megjelenés a kenyérmorzsa attól függ, hogy milyen címkéket vesz körül http://schema.org/BreadcrumbList .
Esetünkben ezt a kódsort a breadcrumb_navxt_widget.php widget forráskódján keresztül adjuk hozzá
Mivel a szabványos rendszergazdai kódszerkesztőn keresztül WordPress irányítópultok ez a fájl nem elérhető, ftp hozzáférést fogunk használni a filezillán keresztül.


15. ábra – Breadcrumb NavXT Widget beállításai
Találunk egy kódrészletet, amely a mikro-jelölésért felelős, és konkrétan szükségünk van egy címkére, amely keretezi ezt a jelölést.


16. ábra – a Breadcrumb NavXT-t keretbe foglaló kód
A következő kódot találjuk a breadcrumb_navxt_widget.php fájlban:
visszhang"
"; És változtasd meg: visszhang"
"; //A szokásos kimeneti navigációs útvonal megjelenítése bcn_display(false, $példány["linked"], $példány["fordított"]); echo "
";
A fájlt elmentjük és felülírjuk a szerveren, ennek eredményeként azt kapjuk, amire szükségünk van.


17. ábra – BreadcrumbList jelölés
Egy másik adattípushoz – schema.org/ListItem – való új kapcsolódást jelöl
Leír egy tulajdonságot is - itemListElement. Ez a tulajdonság már vonatkozik a navigációs útvonal jelölőelemeire. Ez azt jelenti, hogy ezt a tulajdonságot kell használnunk a forráskódunkban, amikor a navigációs útvonalakat közvetlenül megjelenítjük.
A mi esetünkben ezt a Breadcrumb NavXT bővítményben fogjuk használni.
A kenyérmacskákért felelős kód elejéhez -
%htitle%
Hozzáadunk egy sort:
%htitle%
Meg kell jelölnünk az itemprop=”item” elemet, a példából látjuk, hogy ez felelős a navigációs útvonal URL-jének megjelöléséért.
Adja hozzá a href="%link%" előtt. A végeredmény:
Ezután jelölje meg az itemprop="name" tulajdonságot, amely az általunk már közzétett URL-ünknek megfelelő név. A %htitle%-ot, amely esetünkben a kívánt névért felel, be kell kereteznünk az itemprop=”name” tulajdonsággal.
Kapunk
%htitle%
Végül hozzá kell adnunk az elem pozícióját a hierarchikus rendszerben az itemprop=”position” tulajdonság segítségével.
Ehhez adjon hozzá egy kódsort
A lényeg az, hogy mindent óvatosan és a nyitott határokon belül tegyen.
vagy
És így, a meglévő forráskód alapján:
%htitle%
A példa alapján a következő kódot kapjuk:
%htitle%
Példákat adunk a Breadcrumb NavXT kész jelölőkódjaira is.
%htitle% %htitle%
%htitle%
%htitle%
Mikrojelöléssel:
%htitle%
Ennek eredményeként a mikroadatok sikeres hozzáadása után a következő ellenőrzési eredményeket fogjuk látni a használatával.


18. ábra – érvényes navigációs jelölés
Videó
TIN: 772578776588
PSRN: 315774600103615
OKPO: 0194004627
OKTMO: 45914000000
OKATO: 45296559000
számlaszám: 40802810300310000244
a JSCB "BANK OF MOSCOW" (OJSC) "Perovskoe" fiókjában
c/s: 30101810500000000219
BIC: 044525219
Tényleges cím: Moszkva, autópálya Entuziastov, 56, épület 26, iroda 304
Jogi cím: 115191, Moszkva, 4th Roshinsky proezd, 7/16
Először is értsük meg, mi ez - zsemlemorzsa a webhelyen, és miért van rájuk szükség.
Kezdetben a navigációs morzsát használták a felhasználók könnyebb navigálása érdekében. Valójában ez egy linkblokk az oldal tetején, amely megjeleníti a webhely hierarchiáját. Azok. a felhasználó visszatérhet például a katalógus előző oldalára az online áruházban.
Íme egy kiváló példa:

A Breadcrumbs hatása a SEO-ra
Idővel a SEO-optimalizálók észrevették, hogy ez a linkblokk pozitív hatással van az erőforrás népszerűsítésére. És ezért működik:
1. Belső linkelés
Szinte minden webhely hierarchiája szerint - minél alacsonyabb egy szakasz beágyazási szintje, annál fontosabb. Ezért gondoskodni kell arról, hogy az oldal felépítése olyan legyen, hogy a mélyebb oldalakról érkezõ hivatkozások kevésbé mélyre vezessenek. Könnyebb egy példával elmagyarázni.
Amint a képen is látható, minden termék egy kategóriára vonatkozik, és minden kategória utal kezdőlap webhely.
Az ilyen újralinkelés egyfajta szabvánnyá vált a promóció területén, ezért a keresőmotorok saját kiadásaikban is elkezdték közvetlenül használni. Ez a sémajelöléssel történik, de erről később.
2. Viselkedési tényezők
Néhány évvel ezelőtt a keresőmotorok elkezdték elemezni a felhasználók viselkedését az oldalon, és ettől függően az oldalakat egyik vagy másik pozícióba helyezték a lekérdezésekhez. Ahogy el tudod képzelni, egy ilyen viselkedési tényezők- a belső átmenetek száma az oldalon. A kenyérmorzsa bizonyos esetekben komolyan javíthatja ezt a számot.
Séma mikro-jelölés a kenyérmorzsához
A mikrojelölés lehetővé teszi kereső motorok pontosabban meghatározhatja a kenyérmorzsát, és akár bónuszként hozzáadhatja őket a keresési eredményekhez. Valahogy így fog kinézni:
És ha magukat a kenyérmorzsát alapértelmezés szerint leggyakrabban telepítik a webhelyekre, akkor a mikro-jelölést leggyakrabban kézzel kell hozzáadni. Ezért írunk egy kis instrukciót ennek megvalósításához.
itthon
Most pedig nézzük meg, mi az.
Az első dolog, amit tennünk kell, hogy minden hivatkozást egy címkébe csomagoljunk és magában a címkében írd be
itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"
LINK
Ez a címke az alapértelmezett. Ebben azt mondjuk a keresőmotoroknak, hogy ez egy sémajelölés, és ennek a jelölésnek az elemét itemListElementnek hívják. Ez a konstrukció minden hivatkozásnál használatos.
itthon
Ennek megfelelően, ha lenne egy második beágyazási szintünk, akkor a content=”2″-ot kellene írnunk.
2016-05-11