Hur man använder Schema.org-markering på din webbplats och varför du borde

Annons

Sökmotorer är otroligt kraftfull 7 Google-sökalternativ och deras varumärkesfunktionerÄr du en hård Google-användare? Prova dessa alternativa sökmotorer. Från sekretess till hjälp av välgörenhetsskäl kan dessa sökmotorer ge dig några skäl att ändra ditt sätt att bläddra. 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 det för oss inom bråk på en sekund.

Google blir till och med riktigt bra på att svara på frågor på sökresultatsidan och undviker behovet av att klicka på någonting. Det till och med anpassar sökresultaten Hur du inaktiverar 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 schemamarkering är ett sätt på vilket du kan hjälpa dig på din egen webbplats.

Vad är schema-markering?

Schemamarkering är ett sätt att lyfta fram specifika bitar av strukturerad data.

Vad är strukturerade data? Dess information som är organiserad och taggad så det kan förstås bättre 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 sina egna interaktivt exempel på schemamarkering som beskriver ett äppelpajrecept:

Ovan kan du se JavaScript som definierar förberedelsetid, total tid, receptutbyte och olika näringsfakta för receptet.

Det bör noteras vid denna tidpunkt att det finns två huvudsakliga sätt att markera strukturerade data: med JSON Vad är JSON? En lekmannsöversiktOavsett om du planerar att vara en 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 runt om på nätet. Läs mer eller med inbyggda HTML-taggar. Google rekommenderar JSON-metoden, men vi kommer att gå igenom båda senare.

Så här drar Google fram den specifika näringsinformationen:

Schema.org har tusentals olika typer av markeringar som du kan använda för att bättre visa sökmotorerna informationen på din sida. TechArticle-typen inkluderar till exempel följande egenskaper:

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

Det finns ett fullständigt schema för bibliotek, logiföretag, lägenheter, visuella konstevenemang, sändningskanaler, leveransmetoder, status för spelserver och mer.

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

Fördelarna med Schema Markup

OK. Schema-markering berättar för sökmotorerna vad som finns på din sida - vad är det som är det bästa?

Google uttrycker det så här:

"När information är mycket strukturerad och förutsägbar kan sökmotorer lättare organisera och visa den 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 den:

Google blir bättre hela tiden med att hitta den här informationen på egen hand, men använder korrekt schema markering underlättar processen och gör det mer troligt att informationen på din sida kommer att vara presenterat.

Och när sökmotorer vet exakt vad som finns på din sida, kan de visa det för personer som söker efter det direkt i 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-markering är det dags att börja dyka in. Vi börjar med det enklaste verktyget runt: Googles datahållare.

Du behöver din webbplats för att vara ansluten till Googles sökkonsol (tidigare känd som Webmasterverktyg Få djupare sökinsikter för din webbplats med Webmasterverktygs sökfrågorÄndringar av verktyget Sökfrågor i Google Webmasters kan ändra hur du gör din ämnesundersökning. Innehållsgenerering på webben involverar kreativitet och användarfokus och mycket sökordsforskning. Läs mer ). Om du behöver hjälp med att få det installerat, kolla in Yoasts användbara genomgång.

När du har gjort det loggar du in i Search Console och klickar på Sök Utseende> Data Markör. Slå Börja markera -knappen på höger sida av skärmen.

Därefter måste du ange webbadressen till en sida som du vill tagga och välja vilken typ av markering du ska göra. I det här fallet kommer vi att använda märkningstypen Artiklar.

Eftersom jag markerar en artikel på en webbplats som publicerar många artiklar, kommer jag att behålla Tagga 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 verkligen enkelt härifrån. Börja bara markera! När du markerar text (eller klickar på en bild) visas en liten meny där du kan välja vilken typ av information du markerade.

Här har jag markerat sidans titel. Allt jag behöver göra är att klicka på "Titel" i menyn.

Nu fylls titeln i den högra rutan.

Jag fortsätter med att markera författaren, publicerat datum, huvudbild och kategori (jag markerade taggarna högst upp i artikeln och alla tre importerades som kategorier).

Och vi är klara! Det är allt som finns åt det.

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

Lägga till mer detalj

Data Highlighter låter dig bara repa ytan på strukturerad datamarkering. Som ni såg ovan kunde jag bara lägga till en handfull attribut till den artikeln. Schema.org: s artikeltyp innehåller mycket fler attribut som kan ställas in.

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

Du måste dyka in i koden just nu. Som jag nämnde tidigare finns det två huvudsakliga sätt att representera strukturerade data: med JSON och med inline HTML-taggar. Eftersom den HTML-taggar 17 enkla HTML-kodsexempel som du kan lära dig om 10 minuterVill du skapa en grundläggande webbsida? Lär dig dessa HTML-exempel och prova dem i en textredigerare för att se hur de ser ut i din webbläsare. Läs mer är lite mer intuitiva, vi kommer att gå igenom de första.

Inline Schema.org HTML-markering

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

Jag bor i Denver.

För att starta markeringen måste vi specificera att den här meningen säger om en person (visas av personens artikeltyp). Så här gör vi:

Jag bor i Denver.

Nu kommer en sökmotor att veta att allt som finns i detta

Därefter lägger vi till ett markeringsattribut: 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:

jag bor i Denver.

Nu "Denver" identifieras som homeLocation egendom, och Google vet att personen som identifieras i detta stycke bor där.

Om vi ​​ändrar meningen till "Jag bor och arbetar i Denver", kan vi också visa att:

Jag bor och arbetar i Denver.

Denver identifieras nu som båda homeLocation och arbetsplats. (Tack till Lloyd Bank och unor på Stack Exchange för som beskriver detta exempel.)

Detta är ett ganska enkelt fall av schemamarkering, men du får idén. Genom att använda och kan du lägga till attribut och egenskaper till vad som helst på din sida.

Schema.org Markup With JSON

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

JSON-markering kräver fortfarande mycket utrymme, men den är separerad från din HTML, vilket gör det lättare att underhålla.

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

Telefonnummer: 555-8710. Adress: 749 Stoker St., Boulder, Colorado. Öppettider: 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 i rubriken på din sida. Som ni ser kommer detta att ta mycket utrymme, eftersom detta innehåll nästan säkert kommer att visas på din sida i HTML. Så allt du vill markera kommer att skrivas två gånger.

Trots den dupliceringen är JSON-metoden emellertid ofta att föredra, eftersom den separerar schemamarkeringen och din HTML. Många Bästa metoder för HTML 9 misstag du inte bör göra när du bygger en webbsidaDessa följande HTML-kodfel är enkla att göra, men om du tar bort dem tidigare snarare än senare kommer din sida att se bättre ut, vara lättare att underhålla och fungera som du vill att den ska. Läs mer verkar lite konstigt tills du inser att de gör webbplatser lättare att underhålla. Detta är detsamma.

Lägga till schema-markering på din webbplats

Nu när du har sett några olika sätt att lägga till strukturerad datanotering 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 den är lite svår att leta igenom.

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

Har du använt Schema.org-markering 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!

Bildkredit: iinspiration via Shutterstock.com