Hvordan ser søkemotorer

Hvordan kan søkemotorer se og hva ser de? 👀

Mengden og typene informasjon en søkemotor kan se og forstå påvirker om nettsiden kan dukke opp i søkeresultatet i det hele tatt, rangering og hvordan informasjonen vises til folk.

Du må forstå dette om folk skal kunne finne din nettside og du skal oppnå dine mål med nettstedet. Alle utviklere bør forstå hva søkemotoroptimalisering er og det er også nyttig for designere og forfattere.

I dette innlegget ser vi på både søkemotorer som “crawlers” og inkluderer Twitter og Facebook. Vi går gjennom hva de ser og noen verktøy og metoder du kan bruke for å se nettsider slik de gjør.

Den statiske weben

I begynnelsen av internett bestod nesten alle nettsidene kun av innhold skrevet i HTML. Det var vanskelig å lage et program som kunne kravle gjennom alle nettsidene og forstå de, men det var mulig fordi innholdet var nesten alltid tilgjengelig i HTML. Det gjorde det mulig å “skrape” det, det vil si å kopiere innholdet og fortolke informasjonen etterpå.

For å se ditt nettsted fra perspektivet til en søkemotor så kan du åpne en terminal og bruke curl som dette

curl https://www.google.com/

Da får du dette resultatet

<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="no"><head><meta content="Velkommen til Google S?k. Finn det du leter etter p? nettet p? et blunk." name="description"><meta content="noodp" name="robots"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image"><title>Google</title>

Dette er informasjonen tilgjengelig for Google, Bing, Baidu, Yandex, Facebook og Twitter. Enkelt rett og slett.

Hvis din nettside kan lastes ned på denne måten og du får forståelig tekst tilbake så får du nok alle de fine gratistjenestene søkemotorene tilbyr deg uten noen problemer. Dersom du istedet får kode i javascript tilbake så har du en ekkel overraskelse foran deg.

Google kan skryte på seg at Googlebot både leser og forstår javascript. Noen ganger kalles dette at Google er “evergreen”.

Dette betyr at Google kan forstå nettsider som krever javascript for å laste ned og vise data på siden, inkludert tekst, bilder, styling, video og lyd.

Idag 19 juni 2020 så har ingen andre søkemotorer denne funksjonaliteten og det er virkelig viktig. Det betyr at ingen andre søkemotorer kan forstå nettsider som vises med javascript.

De mest populære rammeverkene for å bygge nettsider er React og Vue, og begge er laget for å bygge nettsider med javascript. I over 6 år så har dette skapt utrolig mange problemer for folk som bygger disse sidene og selvsagt for de som prøver å finne de.

Siden Googlebot er den eneste søkemotoren som kan lese javascript så har de en klar fordel i tillegg av sitt nesten-monopol på søkemotorer i den vestlige verden.

Det er ikke sannsynlig at andre søkemotorer og andre sosiale medie crawlers vil begynne å lese og forstå javascript med det første så webutviklere må forstå hvor viktig det er å tilby din informasjon og data som statisk informasjon.

I mitt neste innlegg om å gjøre React sider statiske så forklarer jeg alternativene for å gjøre dette med server-side rendering og static site generation.

Hvordan besøker crawlers siden din

Så hva gjør egentlig en søkemotor crawler når den besøker siden din?

Jeg jobber ikke for Google men jeg leser guidene deres for søkemotoroptimalisering, og jeg anbefaler at du gjør det samme.

Dette er deres introduksjon til søkemotoroptimalisering og dette er deres retningslinjer for webmastere.

Så hvordan fungerer dette?

Kort oppsummert så vil søkemotoren først prøve å finne instrukser for å forstå hva som er tillatt og forbudt på ditt nettsted. Disse instruksene gjelder kun roboter.

Deretter vil søkemotoren prøve å følge alle lenkene på sidene den kan finne på egenhånd i tillegg til å følge alle sidene du har gitt i dine lister til søkemotoren. Denne listen er ditt sitemap, et nettstedkart for søkemotoren.

Merk at alle slags bots og søkemotorer kan ikke kjøre javascript og vurderer derfor ikke javascript lenker eller knapper som lenker. Det er mye bedre å bruke enkel HTML script tags for lenker

<a href="https://tobiasmcvey.com/nb">Norsk 🇳🇴</a>

Etter å ha gått gjennom dataene på din side så vil søkemotoren prøve å forstå innholdet og fortolke det.

Robots.txt

Googlebot og Bingbot oppdager din side først ved roten, og der ser den etter for en robots.txt fil. Roten er toppen av domenet. Du kan se min fil her.

Robots.txt filen inneholder som nevnt instrukser for hva crawlers får lov til å se og hva som ikke er tillatt å se. Du kan nevne spesifikke sider eller mapper med flere side. Det er også mulig å sette robots instrukser i HTTP header på hver side for å sende samme instrukser, men det er litt merarbeid for deg som utvikler.

Du kan også endre på hvor ofte en nettside blir scannet av søkemotorer og andre crawlers.

Denne er verdt å merke siden noen crawlers er veldig grådige og tar seg til rette, så av og til er det verdt å begrense hvor ofte de kan besøke nettstedet. Instruksene kan gjelde alle crawlers eller bare enkelte. Kanskje du ikke ønsker å bli scannet hver uke fordi du har et budsjett med data på din server.

User-agent: Baiduspider 

Disallow: /eksempel-mappe/

I dette eksempelet sier vi at Baidu ikke skal besøke en side som inneholder /eksempel-mappe/.

Robots-filen er også det beste stedet å lenke til din sitemap-fil.

Etter å ha lest robots.txt filen så vil søkemotor crawleren begynne å besøke sidene på nettstedet som det har funnet allerede og de du har nevnt i ditt sitemap.

Hvis du virkelig ikke ønsker at søkemotorer skal vise ditt nettsted i søkemotorer så anbefaler jeg å blokkere alle roboter med en instruks som treffer alle user-agents med *.

En ting til: Ikke alle bots og crawlers oppfører seg pent. Å følge robots.txt er en konvensjon og det betyr at ikke alle crawlers følger den til punkt og prikke.

På grunn av dette så hender det at folk som skraper andre sine nettsider for ofte blir forbudt fra å besøke nettstedet med sin IP-adresse.

Sitemap

Ditt sitemap er rett og slett et kart over nettstedet og inneholder en liste over alle nettsidene du ønsker skal dukke opp i søkeresultatet. Typisk så er dette kun en XML fil, men for store nettsteder så kan man både ha en index-fil samt mange XML filer for å liste alle sidene man har.

Søkemotoren legger alle disse sidene til sin index. Dette er listen over alle sidene i databasen som kan bli potensielle søkeresultater.

Merk at du får ingen fordeler av å legge innloggede sider her så ikke gjør det.

Hvis ditt nettsted har tusener av nettsider så kan det være lurt å organisere de etter tema eller språk, eller begge. For eksempel

Organisert etter kategorier som mapper

www.domene.com/robots.txt -> www.domene.com/sitemap-index.xml

innhold i sitemap-index.ml
www.domene.com/sitemap-book.xml
www.domene.com/sitemap-movies.xml

innholdet på domenet og deres sitemap-filer
www.domene.com/books -> sitemap-books.xml
www.domene.com/movies -> sitemap-movies.xml

Organisert etter språk i mapper, for eksempel norsk og engelsk

www.domene.com/robots.txt -> www.domene.com/sitemap.xml

www.domene.com/english -> www.domene.com/sitemap-en.xml
www.domene.com/norsk -> www.domene.com/sitemap-nb.xml

Merk at alle domener trenger sitt eget sitemap så hvis du har innhold på domene.com og sub.domene.com så bør du ha et sitemap for begge. Dette er simpelthen hvordan konvensjonen for sitemap-filer fungerer.

Du bør også vite at alle søkemotor crawlere og bots har mye å gjøre så de besøker nettstedet ditt for bare en kort periode per besøk. Hvis de ikke finner noe nytt så legger de ikke noe til på indeksen.

Det betyr at dersom du legger til nye sider på ditt nettsted eller sletter noen gamle sider så bør du oppdatere sitemap. Da vil søkemotorene oppdatere søkeresultatet for ditt nettsted.

Du kan påvirke dette ved å legge til ditt sitemap via verktøyene nevnt under: Google Search Console og Bing Webmaster Tools.

Lenker

Søkemotorer oppdager også ditt nettsted og sider ved at andre lenker til det.

Verktøy for utviklere

Det finnes flere gratis verktøy fra søkemotorer og fra sosiale medier som kan brukes for å forhåndsvise og teste nettsidene dine live. I anbefaler å bruke de på det sterkeste.

Først og fremst så kan du bare slå opp sidene dine på Google og Bing for å se hva de forbinder med nettstedet og søkeordene. Du burde bruke dette som en metode generelt sett.

For å se en spesifikk side i søkeresultatet så holder det å søke på addressen til siden i Google og Bing, og det vil alltid dukke opp på toppen av søkeresultatet. Dette er spesielt nyttig når du skal teste en ny side du har lagt ut.

Disse verktøyene er nyttige for å grave dypere om hva søkemotorer vet om ditt nettsted

For Google, krever ikke registrering:

For Google, Bing og Yahoo:

For Facebook og Twitter: - Facebook Sharing Debugger, registrering påkrevd - Twitter

Blant disse verktøyenee sverger jeg ved Google Search Console, Bing Webmaster Tools og Google Structured Data Testing Tools.

Dersom du beviser eierskapet til ditt nettsted med Google Search Console så kan du også få Bing Webmaster Tools med samme verifisering.

Google search console og Bing webmaster tools

Google Search Console og Bing Webmaster Tools gir deg informasjon om hva hver søkemotor vet om dine nettsteder. Du kan legge til flere nettsteder og se spesifikke data for hvert domene og subdomene.

Verktøyene forteller deg blant annet hvilke sider har blitt lagt til i indeksen. Dette er listen over alle nettsidene de har i sin database. De kan også vise hvilke sider vises for hvert søkeord, altså ordene folk bruker når de finner ditt nettsted. De forteller deg også hvilke sider de vurderer er canonical. Dette er en definisjon som brukes når det er 2 eller sider med innhold som ser likt ut for en søkemotor. Om den ikke ser forskjell så vil den velge en side og kalle den canonical, mens den andre siden blir skjult.

Du kan få mesteparten av denne informasjonen fra Google Mobile Friendly Test uten å registrere deg med Google Search Console, med unntaket av info om hvilke sider Google har gitt canonical status til.

Det er opp til deg å velge verktøy, men et profesjonelt nettsted bør vite om en produktside eller en offentlig tjeneste er skjult på grunn av hvordan en søkemotor velger hvilken side som skal vises når 2 eller flere ligner på hverandre.

Det er kanskje enda viktigere å bare vite hvilke sider som ikke er i indeksen. Du får hint om hvorfor dette kan hende og tekniske feil som søkemotoren får når den prøver å besøke nettsiden. Det er dette som gjør det verdifult for webanalyse.

Ved å bruke denne informasjonen så kan du forbedre hva som vises til besøkende i søkemotorer, med noen få unntak.

Hvis du ser på søkeresultat for noen søkeord så ser du som regel noe slikt: En liste med nettsider med lenker og en kort tekstsnutt per side som beskriver hver side.

søkeresultat for tobiasmcvey.com

Sidetittelen er stort sett det samme som du oppgir i Title tag i HTML

<title>Tobias McVey | Side og Blog</title>

Til sammenligning kan sidebeskrivelsen bli påvirket både av din bruk av meta description i HTML og det Google tror folk er ute etter på siden.

<meta name="description" content="Hvordan kan søkemotorer se og hva ser de? 👀">

Verktøyene kan også gjøre deg merksom på om det mangler HTML og om det er problemer med å lese og forstå ditt sitemap.

Dette er også viktig for å sikre universell utforming. All tekstdata om ditt nettsted kan brukes av skjermlesere både på siden og i søkeresultatet. De fleste søkemotorer er faktisk helt avhengige av at webutviklere følger W3C Web standardene og belønner deres nettsted for det.

For eksempel så vil brødsmuler hjelpe søkemotorer å forstå strukturen på et nettsted og informasjonsarkitekturen. Dette hjelper de også identifisere hvilke sider er mest besøkt og etterspurt av folk, og derfor promoteres de også i søkresultatet. Bing og Google har gjort dette i flere år nå.

Å se som en søkemotor med Bing og Google

I tillegg til det vi allerede har sett så kan du forhåndsvise dine nettsider med Google Search Console and Bing Webmaster Tools. Dette er nyttig for å vite om søkemotoren finner alle dataene du ønsket å vise på nettsiden. Til syvende og sist så brukes også dette for å rangere siden i søkeresultat.

For eksempel, dette er hva Bing kan forhåndsvise om min nettside med Fetch as Bingbot

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Hugo 0.58.2 with theme Tranquilpeak 0.4.7-BETA">
<meta name="author" content="Tobias McVey &lt;/br&gt;**[English 🇬🇧](/)** **[Norsk 🇳🇴](/nb)**">
<meta name="keywords" content="">
<meta name="description" content="Personal blog about analytics and product development">


<meta property="og:description" content="Personal blog about analytics and product development">
<meta property="og:type" content="website">
<meta property="og:title" content="Tobias McVey | Site and Blog">
<meta name="twitter:title" content="Tobias McVey | Site and Blog">
<meta property="og:url" content="https://tobiasmcvey.com/">
<meta property="twitter:url" content="https://tobiasmcvey.com/">
<meta property="og:site_name" content="Tobias McVey | Site and Blog">
<meta property="og:description" content="Personal blog about analytics and product development">
<meta name="twitter:description" content="Personal blog about analytics and product development">
<meta property="og:locale" content="en">


<meta name="twitter:card" content="summary">

  <meta name="twitter:site" content="@https://twitter.com/tobiasmcvey">


  <meta name="twitter:creator" content="@https://twitter.com/tobiasmcvey">

Her er Google med URL inspection tool

<!DOCTYPE html>
<html lang="en" class=""><head>
    
    
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="generator" content="Hugo 0.58.2 with theme Tranquilpeak 0.4.7-BETA" />
<meta name="author" content="Tobias McVey &lt;/br&gt;**[English 🇬🇧](/)** **[Norsk 🇳🇴](/nb)**" />
<meta name="keywords" content="" />
<meta name="description" content="Personal blog about analytics and product development" />


<meta property="og:description" content="Personal blog about analytics and product development" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Tobias McVey | Site and Blog" />
<meta name="twitter:title" content="Tobias McVey | Site and Blog" />
<meta property="og:url" content="https://tobiasmcvey.com/" />
<meta property="twitter:url" content="https://tobiasmcvey.com/" />
<meta property="og:site_name" content="Tobias McVey | Site and Blog" />
<meta property="og:description" content="Personal blog about analytics and product development" />
<meta name="twitter:description" content="Personal blog about analytics and product development" />
<meta property="og:locale" content="en" />


<meta name="twitter:card" content="summary" />

  <meta name="twitter:site" content="@https://twitter.com/tobiasmcvey" />


  <meta name="twitter:creator" content="@https://twitter.com/tobiasmcvey" />

Google kan også vise skjermbilde, kildekoden på siden og tekniske feil. Dette er fordi Googlebot kjører en hodeløs nettleser variant av Chrome som kan ta skjermbilder og kjøre javascript.

De tekniske feilene er spesielt nyttige siden du vil støte på disse problemene:

En side, mappe eller en ressurs er på en URL som ikke er tillatt ifølge robots.tcxt filen på nettstedet.

Du kan fikse det problemet ved å endre din robots.txt fil for å slippe crawlers fra Google og andre søkemotorer på nettsiden.

Kode og ressurser på siden laster ikke fordi de er for trege og crawleren gir opp før den går videre.

For å fikse dette problemet så må du rett og slett laste inn koden raskere og ideellt sett gjøre noe med ytelsen på nettsiden.

Merk at det finnes også en industri som selger SEO-verktøy. Jeg anbefaler ikke å bruke de. De er kun nyttige for å scanne ditt eget nettsted og se etter feil i koden, feil i sitemap og lignende.

Du kan også programmere din egen crawler for din nettside og se på koden for dine maler for å se etter feil.

Facebook Sharing Debugger

Facebook Sharing Debugger lar deg se hvordan en side ser ut når den deles på Facebook.

Facebook bruker sin egen konvensjon for HTML som kalles Open Graph. Uten disse så kan de ikke vise nettstedet riktig.

For eksempel så får jeg disse feilene

Warnings That Should Be Fixed
Inferred Property
The provided 'og:image' properties are not yet available because new images are processed asynchronously. To ensure shares of new URLs include an image, specify the dimensions using 'og:image:width' and 'og:image:height' tags. Learn More

Deretter foreslår Facebook disse forbedringene

Based on the raw tags, we constructed the following Open Graph properties
og:url	https://www.tobiasmcvey.com/
og:type	website
og:title	Tobias McVey | Site and Blog
og:description	Personal blog about analytics and product development
og:updated_time	1592578233
ia:markup_url	
ia:markup_url_dev	
ia:rules_url	
ia:rules_url_dev

Før eller siden så fikser jeg dette for min blogg.

Det er en annen sak for et firma. Om dette mangler så vil nettsiden fremstå ganske uprofesjonelt og ligne på en svindelside. Så det er verdt å fikse det. Du kan for eksempel lage et script som dupliserer HTML tags og med prefiks og:

Google Structured Data Testing Tool

Structured Data Testing Tool lar deg teste om lenkede data på nettstedet har gyldig syntaks. Idag er det neste kun søkemotorer som bruker lenkede data men det er laget for å brukes av andre tjenester også.

Dette hjelper ikke nettsiden å rangere høyere enn andre men det lar deg vise ditt innhold på en profesjonell måte som kan være nyttig for folk som leter etter svar i søk.

Du kan bruke flere typer schema for å ta i bruk lenkede data. Google anbefaler JSON-LD men Microdata er også et alternativ.

Schema.org er et prosjekt sponset av Microsoft, Yahoo, Google og Yandex med en liste over alle definisjonene du kan bygge lenkede data med.