Programmering

Så här använder du Schema.org-märkning på din webbplats och varför du borde

Så här använder du Schema.org-märkning på din webbplats och varför du borde / Programmering

Sökmotorer är fantastiskt kraftfulla 7 Googles sökalternativ och deras varumärkesfunktioner 7 Googles sökalternativ och deras varumärkesfunktioner Är du en svåra Google-användare? Ge dessa alternativa sökmotorer ett försök. Från privatlivet för att hjälpa till med välgörande orsaker kan dessa sökmotorer ge dig några anledningar att ändra hur du bläddrar. Läs mer . De kan tolka det ofta oklara språket vi använder för att ta reda på vad vi letar efter, bestämma den bästa resursen för att svara på våra frågor och visa den inom oss inom en sekund.

Google blir även riktigt bra på att svara på frågor på sökresultatsidan, vilket undanröjer behovet av att klicka på någonting. Det anpassar även sökresultatet Hur du inaktiverar Googles anpassning av sökresultat Så här inaktiverar du Googles anpassning av sökresultat Läs mer. Och det hjälper människor att hitta den information de letar efter snabbare.

Men sökmotorer kan inte göra det här på egen hand - de behöver hjälp från webbplatsägare och utvecklare. Och schema markup är ett sätt att hjälpa dig på din egen webbplats.

Vad är Schema Markup?

Schema markup är ett sätt att markera specifika bitar av strukturerad data.

Vad är strukturerad data? Dess information som är organiserad och taggad så det kan bättre förstås av maskiner. Kort sagt, schema markup är information som hjälper sökmotorer att hitta specifika typer av information på din webbsida. Det är lättast att titta på ett exempel.

Google har ett eget interaktivt exempel på schemamarkering som beskriver ett äppelpajrecept:

Ovan kan du se JavaScript som definierar förberedelsetiden, den totala tiden, receptutbytet och olika näringsfakta för receptet.

Det bör noteras vid denna tidpunkt att det finns två huvudsakliga sätt att markera upp strukturerad data: med JSON Vad är JSON? A Laymans översikt Vad är JSON? En Laymans översikt Oavsett om du planerar att vara webbutvecklare eller inte, är det en bra idé att åtminstone veta vad som är JSON, varför det är viktigt och varför det används över hela webben. Läs mer eller med inline HTML-taggar. Google rekommenderar JSON-metoden, men vi går över både senare.

Så här tar Google ut den specifika näringsinformationen:

Schema.org har tusentals olika typer av markup som du kan använda för att bättre visa sökmotorerna informationen på din sida. TechArticle-typen innehåller till exempel, bland många andra saker, följande attribut:

  • kunskapsnivå
  • antal ord
  • publik
  • skapare
  • Skapat datum
  • datum ändrat
  • datePublished
  • publishingPrinciples
  • typicalAgeRange

Det finns ett fullständigt schema för bibliotek, boende företag, lägenheter, visuella konster händelser, sändningskanaler, leveransmetoder, spel server statuser och mer.

Tanken är att se till att sökmotorer vet vad varje bit av information på din sida faktiskt representerar, så det kan visa informationen till personer som letar efter dem.

Fördelarna med Schema Markup

OK. Schema markup berättar sökmotorer vad som finns på din sida - vad är big deal?

Google lägger det så här:

“När informationen är mycket strukturerad och förutsägbar kan sökmotorerna organisera och visa dem på kreativa sätt.”

Till exempel kan du se turnédatum för den kommande Slayer-turnén som visas direkt i sökresultaten:

Eller få specifik information om en film när du söker efter det:

Google blir bättre hela tiden för att hitta den här informationen på egen hand, men korrekt användning av schemamarkering gör processen enklare och gör det mer troligt att informationen på din sida kommer att visas.

Och när sökmotorer vet exakt vad som finns på din sida kan de visa det för personer som letar efter det precis inuti sökresultaten. Och det är bra för alla.

Komma igång med strukturerade data

Nu när du har sett fördelarna med att använda Schema.org-markup, är det dags att börja dyka in. Vi börjar med det enklaste verktyget runt: Googles Data Highlighter.

Du behöver din webbplats för att vara ansluten till Googles sökkonsol (tidigare känd som Verktyg för webbansvariga) Få djupare sökinsikt för din webbplats med sökverktyg för webbansvariga Få djupare sökinsikt för din webbplats med sökverktyg för webbansvariga Ändringar i verktyget Sökfrågor i Google Webmasters kan ändra hur du gör din ämnesforskning. Innehållsgenerering på webben innebär kreativitet och användarfokus och mycket sökordsforskning. Läs mer). Om du behöver hjälp med att få den inrättad, kolla Yoasts användbara genomgång.

När du har gjort det, logga in på Search Console och klicka på Sökutseende> Data Highlighter. Slå Börja markera knappen på höger sida av skärmen.

Därefter måste du ange webbadressen till en sida du vill tagga och välj vilken typ av markering du ska göra. I det här fallet använder vi artikeluppsättningstypen.

Eftersom jag markerar en artikel på en webbplats som lägger in många artiklar, kommer jag att behålla Tag den här sidan och andra gillar den kontrollerade.

Nu ser du en delad skärm: din sida till vänster och tillgängliga markeringsfält till höger.

Det är väldigt enkelt härifrån. Börja med att markera! När du markerar text (eller klicka på en bild) visas en liten meny där du kan välja vilken information du markerade.

Här har jag markerat rubriken på sidan. Allt jag behöver göra är att klicka på “Titel” i menyn.

Nu befinner sig titeln i den högra rutan.

Jag fortsätter, markerar författaren, datumet publicerat, huvudbilden och kategorin (jag markerade taggarna högst upp i artikeln och alla tre importerades som kategorier).

Och vi är klara! Det är allt som finns där.

När du träffar Gjort, Data Highlighter hjälper dig att tillämpa denna markering på andra liknande sidor på din webbplats.

Lägger till mer detaljer

Data Highlighter tillåter dig bara att klia på ytan av strukturerad data-markering. Som du såg ovan kunde jag bara lägga till en handfull attribut till den artikeln. Schema.orgs artikeltyp innehåller många fler attribut som kan ställas in.

Vad gör vi om vi vill lägga till mer detaljer i schemamarkeringen?

Du måste dyka in i koden vid denna tidpunkt. Som jag nämnde tidigare finns det två huvudsakliga sätt att representera strukturerad data: med JSON och inline HTML-taggar. Eftersom HTML-taggarna 17 enkla HTML-kodexempel kan du lära dig om 10 minuter 17 enkla HTML-kodexempel som du kan lära dig om 10 minuter Om du känner till följande 17 HTML-taggar (och de extra få som går med dem) kommer du att kunna att skapa en grundläggande webbsida från början eller tweak koden skapad av en app som ... Läs mer är lite mer intuitivt, vi går över de första.

Inline Schema.org HTML Markup

Som ett exempel markerar vi en enkel mening: “Jag bor i Denver.” I HTML kommer det att representeras helt enkelt, så här:

Jag bor i Denver.

För att starta uppmärkningen måste vi ange att den här meningen gäller en person (visas av persontypstypen). Så här gör vi det:

 
Jag bor i Denver.

Nu kommer en sökmotor att veta att allt ingår i detta

tagg har att göra med en person.

Därefter lägger vi till ett markupattribut: homeLocation. Schema.org definierar homeLocation som “En kontaktplats för en persons bostad.”

Vi måste lägga till det specifika attributet till HTML. Så här gör vi det:

 
jag bor i Denver.

Nu “Denver” identifieras som homeLocation egendom, och Google vet att personen som identifieras i denna punkt bor där.

Om vi ​​ändrar meningen till “Jag bor och arbetar i Denver,” det kan vi också visa:

 
Jag bor och jobbar i Denver.

Denver är nu identifierat som båda homeLocation och arbetsplats. (Tack vare Lloyd Bank och unor på Stack Exchange för att beskriva detta exempel.)

Det här är ett ganska enkelt fall av schema markup, men du får tanken. Genom att använda

och taggar kan du lägga till attribut och egenskaper till något på din sida.

Schema.org Markup With JSON

Google rekommenderar att du använder JSON-LD (JavaScript Object Notation for Linked Data) för schemaläggning. Den största fördelen med den här metoden är att det håller din HTML mycket renare. Om du går tillbaka för att redigera en sida och du ser dussintals sidor med kod med markering, kommer du inte att bli glad.

JSON-markering kräver fortfarande mycket utrymme, men det är skilt från din HTML, vilket gör det enklare att behålla.

Låt oss säga att du har en bokhandel som heter Harker och du har tagit med följande information på din kontaktsida:

Telefonnummer: 555-8710 Adress: 749 Stoker St., Boulder, Colorado timmar: 10-9 måndag till fredag, 11-8 lördag 12-5 söndag

Så här representerar du det med JSON-LD:

Detta går in i sidhuvudet på din sida. Som du kan se kommer det att ta upp mycket utrymme, för det här innehållet kommer nästan säkert också att visas på din sida i HTML. Så allt du vill markera kommer att skrivas två gånger.

Trots detta dubbelarbete, är JSON-metoden ofta att föredra, eftersom det skiljer scheman markup och din HTML. Många HTML-bästa praxis 9 Fel som du inte borde göra när du bygger en webbsida 9 Fel du inte ska göra när du bygger en webbsida Följande HTML-kodningsfel är enkla att göra, men om du leder av dem tidigare snarare än senare kommer din sidan kommer att se bättre ut, vara lättare att underhålla och fungera hur du vill ha den. Läs mer verkar lite konstigt tills du inser att de gör webbplatser enklare att behålla. Detta är detsamma.

Lägga till Schema Markup på din webbplats

Nu när du har sett några olika sätt att lägga till strukturerad data notering till din webbplats kan du komma igång! Det är en bra idé att börja med Data Highlighter och gå vidare därifrån. Schema.org-dokumentationen är den ultimata resursen, men det är lite svårt att skumma igenom.

Oavsett om du vill gå till grunderna eller börja märka upp allt i sikte, har du nu de resurser du behöver för att komma igång!

Har du använt Schema.org-markup på din egen webbplats? Har du några tips för webbplatsägare eller utvecklare som vill komma igång? Dela dina tankar i kommentarerna nedan!

Bildkrediter: Iinspiration via Shutterstock.com

.