Taktikker for utgivervekst i valgkampen | WEBINAR
Taktikker for utgivervekst i valgkampen | WEBINAR
Etter å ha lest denne veiledningen, skal du kunne forstå hvordan eksisterende nyhetsartikler endres og opprettes ved hjelp av sideoppsettdesign som forbedrer Googles evne til å gjennomsøke og forstå sidens innhold.
Videoens varighet
15:35
Svar på quiz
Ta quiz for gjeldende modul
Materialer
Klar til bruk maler
Ressurser
Rapporter og ressurser
2.1.1 Hva er design og layout?
Utformingen og layouten til nettstedet ditt bestemmer hvordan det fremstår for sluttbrukeren. Dette er viktig fordi Google til syvende og sist drives av en brukerfokusert filosofi. Nettsider som tilfredsstiller brukerens behov først, raskest og på enklest mulig måte, belønnes med høyere SERP-rangeringer.
Nettstedets design og layout avgjør også hvor enkelt webcrawlere, som Google bot, gjennomsøker og indekserer det. Et enkelt og optimalisert design og layout betyr rask og enkel gjennomsøking, noe som igjen fører til bedre rangeringer.
Så hva hindrer utgivere i å implementere beste praksis for design og layout? Utgivere møter oftest disse smertepunktene:
For å svare på dette spørsmålet utførte vi et enkelt Google-søk og skrev inn nøkkelordene «Charlie Puth News» i søkefeltet.
Her er hva søkeresultatene ga:
På andreplass på Top Stories SERP-rangeringen, rett over en artikkel fra NME, finner du Daily Illinis artikkel om Charlie Puths nyeste utgivelse.
Det faktum at Daily Illini, en studentavis for universiteter, rangerer bedre enn verdens største frittstående musikknettsted, reiser noen viktige spørsmål
Hvordan klarer en studentavis i en by med rundt 40 000 innbyggere i det amerikanske Midtvesten å overgå verdens største musikknyhetsnettsted? Nysgjerrige bestemmer vi oss for å undersøke litt mer.
Først sjekket vi ut NMEs side om Charlie Puth.
Det første vi legger merke til med en gang er popup-videoen som prøver å lastes inn nederst til høyre på skjermen. Den gjør tydeligvis ikke en særlig god jobb med å laste inn. Bufringen av videoen skjuler også deler av nyhetsoverskriften og brødteksten.
Deretter legger vi merke til at det første visningsområdet stort sett er opptatt av ting som ikke er relevante for nyhetsartikkelen. Det er en stor bannerannonse som dekker omtrent halvparten av siden, og selvfølgelig er det videoen.
Faktisk, når vi blar nedover siden, ser vi flere videoer, flere store, innholdsrike bilder, flere popup-annonser og mange hyperlenker. Gitt hvor medierikt siden er, tok det ikke overraskende ganske lang tid å laste.
Deretter inspiserte vi Daily Illini, og her er hva vi fant.
Siden er ryddig, ren og oversiktlig. Den har sin andel av annonser og en stor Doner-knapp øverst, men det er ingen videoer eller popup-vinduer som dekker visningsområdet eller blokkerer nyhetsoverskriften. Vi kan se overskriften med en gang, og det er svært sannsynlig at det samme gjelder Googles webcrawler.
Alt i alt er siden lett, minimalistisk og lynrask å laste.
Vi bestemte oss for å kikke litt nærmere inn i den underliggende koden. Ved å høyreklikke på siden og velge Vis kilde (mens vi bruker Chrome), kan vi se sidens kode.
Dette er hva vi så på NME-siden:
To ting fanget oppmerksomheten vår her:
Dette er ikke det beste for en side av to grunner:
Da vi derimot så på koden for Daily Illini-siden, så vi dette:
Dette er veldig enkel HTML-kode. Det er heller ingen skript som kjører i<head> del.
Hvordan legger alt dette seg opp til at Daily Illini overgår NME?
Det er sannsynligvis en rekke faktorer som spiller inn her, og en av dem er design og layout. Daily Illini-siden bruker visse design- og layoutteknikker som selv små utgivere enkelt kan kopiere for å forbedre sin generelle SEO-strategi.
Disse inkluderer bruk av ren, enkel HTML-kode, unngå skript i overskriftsdelen, holde siden lett og rask å laste inn, og ikke stole for mye på popup-vinduer og mellomliggende annonser.
Guiden nedenfor går nærmere inn på hver av disse, samtidig som den forklarer flere andre teknikker du kan implementere for å forbedre SERP-rangeringene dine betydelig.
Semantikk forholder seg til betydningen av ord. Semantiske HTML-tagger er de som tydelig definerer betydningen deres både for leseren og en webcrawler.
For eksempel, når vi bruker en tagg som<header> , vi vet hva den inneholder – informasjon om overskriften.
På samme måte<h1> er en semantisk tagg som forteller Googlebot at det som følger er den viktigste overskriften i artikkelen.
I motsetning til dette, når vi bruker en tagg som<div> , betydningen er ikke umiddelbart åpenbar. I HTML<div> står for divisjon, og alt det antyder er at en ny kodedel har begynt, uten nødvendigvis å avsløre noen informasjon om innholdet i denne delen.
Nettroboter som Googlebot er bygget med kunstig intelligens og maskinlæringsalgoritmer som prøver å simulere hvordan den menneskelige hjernen fungerer. Dette betyr at de forstår tekst på omtrent samme måte som den menneskelige hjernen gjør.
HTML-kode som er lett for mennesker å forstå, bør også være lett for Googles webcrawler å forstå.
Som et eksempel, se på de to HTML-kodene nedenfor:
Kilde: https://www.pluralsight.com/guides/semantic-html
Denne siden bruker<div> tagg for alt, fra topptekst til hovedinnhold til bunntekst. Det er ikke umiddelbart tydelig ved å lese taggene hva innholdet er.
Siden nedenfor bruker derimot semantisk markup. Overskriften plasseres innenfor<header> taggen, bunnteksten i<footer> taggen, og hoveddelen av artikkelen går innenfor<main> tagg.
Kilde: https://www.pluralsight.com/guides/semantic-html
Siden dette er lett for Googlebot å lese og forstå, har denne siden større sjanse for å rangere høyere enn den forrige, alt annet likt.
For å se om siden din bruker semantisk markup, høyreklikker du bare på siden hvis du bruker Google Chrome, og klikker på Inspiser. Du vil kunne se HTML-kildekoden til siden. Vanlige semantiske elementer inkluderer<author> ,<video> ,<article> ,<form> ,<header> osv.
Vi vet nå hva semantisk markering er og hvorfor det er viktig. Men hvordan bruker vi det til å forbedre SEO?
Det er enkelt – bruk alltid semantisk markup for å markere viktig informasjon om artikkelens design og layout. Dette inkluderer følgende artikkelinformasjon:
Sørg for at sidens layout er velordnet for å forbedre gjennomsøkingen
Du designer nettstedet ditt slik at det kan leses av både mennesker og webcrawlere, og derfor bør design og layout gjenspeile dette.
Nedenfor finner du noen tips som kan hjelpe deg med å oppnå målbare resultater for nettstedet ditt.
Du kan bruke HTML, CSS, Javascript eller et hvilket som helst annet frontend-språk for å lage rike og interaktive sider. Husk imidlertid at jo mer avansert språket er, desto større er dets kompleksitet, og desto større er sjansen for at en webcrawler kan finne det vanskelig å lese, tolke og kompilere.
Alt som er kodet i HTML er kanskje ikke det peneste å se på, men det vil både laste raskere og være mer optimalisert for søkemotorer av den enkle grunn at søkemotorer kan lese og forstå det raskere.
Tenk på ren HTML som det grunnleggende skjelettet til nettsiden din. Du kan legge til CSS og Javascript for å gi den et mer fyldig og dynamisk utseende, men det ville være bedre å beholde det viktigste innholdet i skjelettet i stedet for å plassere det i fysisk form.
Så hvordan implementerer vi ren HTML? En enkel måte å gjøre det på er å plassere hoveddelen av innholdet ditt inni<article> HTML-tagger.
På denne måten, når webcrawlere støter på<article> taggen, vet de umiddelbart at det som følger er det viktigste innholdet på siden din – nyhetsartikkelen. Dette hjelper søkemotoren med å forstå at innholdet som er pakket inn i denne taggen må tillegges større vekt.
Vanlig HTML<article> taggen er en semantisk markør som ser slik ut:
Kilde: https://en.wikipedia.org/wiki/Artikkel_element
Det neste åpenbare spørsmålet? Hvis jeg bruker et CMS som WordPress, hvor setter jeg inn disse taggene?
Slik gjør du dette: Hvis du bygger et tilpasset nettsted med HTML, kan du sjekke kildekoden for å sikre at den bruker ren HTML, spesielt på kritiske områder. Vi anbefaler at du snakker mer detaljert med en utvikler for å sikre at du ikke hemmer funksjonaliteten ved et uhell.
Hvis du bruker WordPress, kan du se denne veiledningen . Du kan også finne denne veiledningen om hvordan du setter inn HTML i innlegg og sider som en nyttig referansekilde.
Disse instruksjonene gjelder for WordPress, ettersom WordPress fortsatt er det mest populære CMS-et for utgivere. Hvis du bruker et annet CMS, for eksempel Wix, kan du se på støtte- eller dokumentasjonssiden for CMS-et ditt.
Hvis du har tilgang til et team med webutviklere, er det best å la dem gjøre det, ettersom redigering av HTML-kode kan være tidkrevende.
Test for å sikre at innholdet ditt vises riktig i alle nettlesere, enheter og størrelser. Dette er mer åpenbart, men blir ofte oversett. Hvis innholdet ditt ikke vises slik du ønsker det på tvers av alle nettlesere og enheter, vil det påvirke brukeropplevelsen og i det lange løp SERP-rangeringene dine.
Slik gjør du dette: For å teste innhold på tvers av plattformer må du åpne siden din på forskjellige enheter og i forskjellige nettlesere for å se hvordan den gjengis.
Som et minimum bør du teste følgende:
HTML-markeringer bidrar til å fremheve de ulike elementene på siden din. Strukturerte data hjelper søkemotorer med å lese hva som er inni de ulike elementene på siden din og bedre forstå innholdet.
Strukturerte data er rett og slett en serie instruksjoner skrevet i et enkelt språk, for eksempel JSON-LD, som kan settes inn i den eksisterende HTML-koden på nettsiden din. Tenk på det som en metabeskrivelse, men for individuelle innholdsdeler på siden din.
I eksemplet nedenfor hjelper strukturerte data Google med å identifisere fem attributter om en dbpedia-side om John Lennon:
Kilde: https://json-ld.org/
Som du kan se, er koden på et enkelt språk som er lett å forstå for både en menneskelig leser og en webcrawler.
Her er et annet eksempel som viser hvordan strukturerte data kan passe rett inn i nettsidens eksisterende HTML-kode. Instruksjonene for strukturerte data er uthevet med grønt.
Kilde: developers.google.com
I dette eksemplet forteller strukturerte data Googlebot at dette er en oppskriftsside om kaffekake fra noen som heter Mary Stone.
Bruk av strukturerte data i nettstedets layout gir målbare resultater. For eksempel kan bruk av strukturerte data øke et nettsteds klikkfrekvens (CTR) med opptil 30 %.
Bruk av strukturerte data hjelper også siden din med å rangere bedre på Googles karuseller, fremhevede utdrag, videoer og kunnskapspanelfunksjoner.
For SEO i Google Nyheter er det viktig å inkludere følgende elementer når du oppretter strukturerte data for å gi ekstra verdi:
Slik gjør du dette: Du kan legge til strukturerte data/skjemaer i innholdet ditt enten manuelt eller ved å bruke en plugin for ditt spesifikke CMS.
Alle elementene i nyhetsartikkelen din bør ordnes i en bestemt rekkefølge for å muliggjøre raskere og enklere gjennomsøking. Rekkefølgen er som følger:
Sideopplevelse er et mål på hvordan brukere opplever siden din. Google har et sett med parametere for å kvantifisere sideopplevelsen. Vi har dedikert en hel modul til sideopplevelsesfaktorer , så vi skal bare kort se på hver av dem her.
Slik gjør du dette: Du kan teste sideopplevelsen både manuelt og ved å bruke programtillegg eller tredjepartsapper. For eksempel Page Speed Insights et nyttig verktøy som hjelper deg med å analysere nettstedets ytelse basert på CWV og andre parametere, og tildeler en poengsum basert på analysen. Det tester også både mobil- og skrivebordsresponsivitet.
Nyhetsutgivere bør ikke publisere flere nyhetsartikler under samme URL. Dette vil hindre Google i å indeksere dem. Hver nyhetsartikkel bør ha sin egen unike URL.
Videre bør disse URL-ene være permanente. Det betyr at den samme nyhetsartikkelen bør vises på en bestemt URL. Hvis nyhetsartikkelen som er knyttet til en bestemt URL endres ofte, vil ikke Google kunne gjennomsøke og indeksere den. Utgivere bør imidlertid oppdatere nyhetsartikkelen så ofte som nødvendig.
Hvis det er behov for å bruke omdirigeringer for nyhetsartikler, bør de implementeres i henhold til følgende beste praksis:
Selv om handlingspunktene som er oppført i denne delen ikke er like viktige som de ovenfor, anbefaler vi likevel å implementere så mange av disse som mulig når de forretningskritiske punktene som er oppført ovenfor er adressert.
De<head> Elementet på en side inneholder viktig informasjon om siden som faktisk ikke vises på siden. Det som inngår er metadata som hjelper Googlebot med å identifisere innholdet på siden og klassifisere det.
Som regel, den<head> Elementet bør bare inneholde de viktigste taggene og ingenting annet, slik at et innlegg kan gjennomsøkes og gjengis riktig. Disse inkluderer:
Alt annet som finnes i<head> elementet vil sannsynligvis forvirre webcrawlere.
For eksempel er det vanlig at nybegynnere forveksler titteltaggen med<h1> og plasser sistnevnte innenfor<head> elementet. Som tidligere forklart,<head> Elementet kan bare inneholde metadata som ikke vises på siden.
Selv om tittel og<h1> bør i hovedsak inneholde den samme informasjonen, førstnevnte er metadata ment for webcrawlere og som skal vises i SERP-resultatene og nettleserfanen, mens sistnevnte er informasjon som skal vises på siden.
Koden nedenfor viser hvordan du plasserer tittelen i<head> element.
Kilde: developer.mozilla.org
Å bruke sideelementer som gjør det enkelt å skanne innhold og gjør navigasjonen til en friksjonsfri opplevelse for brukeren, påvirker også SEO.
En side som er lett å navigere vil inneholde disse elementene:
Med mindre du er en erfaren webutvikler, er det best å konsultere en ekspert om den beste måten å implementere en brukervennlig brukeropplevelse.
Google ønsker at utgivere skal vise annonser uten å forstyrre brukeropplevelsen. Av denne grunn kan de straffe nettsteder som viser for mange påtrengende annonser. Selv om brukeropplevelse er en subjektiv målestokk, har Google visse retningslinjer og beste praksis når det gjelder annonser.
Noen av dem er relatert til:
Hvis du vil ha mer informasjon om annonser og popup-vinduer, kan du se vår detaljerte modul .
Javascript er flott for å lage dynamisk og interaktivt innhold, men webcrawlere kan ha problemer med å gjengi det.
Dette er fordi:
Med nyhetsartikler er det lurt å unngå avbrudd som for eksempel karuseller med relaterte artikler eller bildegallerier.
Mange utgivere som gjør det bra blir bekymret når de lanserer/redesigner nettstedet sitt på nytt, da det krever at Google gjennomsøker nettstedet på nytt. Følg disse beste fremgangsmåtene for å sikre en smidig overgang til normalen etter redesign/relansering:
Hold artikkelsidene dine så lette som mulig. Vi har allerede sett på hvordan man unngår Javascript i artikler, men det er også god praksis å unngå å bruke tungt HTML-innhold.
Dette er fordi når Googlebot gjennomsøker siden din, kan den bare laste ned maksimalt 15 MB med sidedata i den første gjennomsøkingen. For de fleste sider er ikke dette et stort problem, ettersom tunge elementer som videoer og bilder refereres separat i koden som Googlebot indekserer senere, og dermed er utenfor rammen av denne grensen på 15 MB.
Dette peker imidlertid nok en gang på det faktum at jo lysere siden din er, desto lettere vil det være for Googlebot å gjennomsøke og indeksere den.
Tips: Hvis du vil sjekke størrelsen på siden din, går du til nettleserens Utviklerverktøy-side, bytter til Nettverk-fanen og laster deretter siden inn på nytt. Dette viser alle forespørslene nettleseren din har gjort for å gjengi siden fullstendig. Den første forespørselen på denne listen viser størrelsen på siden din under Størrelse-kolonnen. For de fleste sider på internett er dette tallet vanligvis i kilobyte.
Artikkelutdrag gir leserne en forhåndsvisning av innholdet på siden før de klikker på det. Google bestemmer utdraget som skal høre med hver artikkel ved å gjennomsøke teksten i hoveddelen av artikkelen rett under tittelen.
For å unngå at Googlebot inkluderer feil kodeutdrag, må du sørge for at:
Noen ganger kan Googlebot enten mislykkes i å indeksere bildet ditt, eller indeksere et annet bilde enn det du hadde tenkt å vise i artikkelen din. Følg disse anbefalte fremgangsmåtene for å unngå dette:
Googlebot bruker artikkelens tittel til å identifisere og indeksere den riktig. Bruk disse beste fremgangsmåtene for å sikre at den leser tittelen din nøyaktig:
La oss se på to casestudier av nettsteder som allerede har implementert trinnene som er omtalt i denne artikkelen.
Moderne nyhetsnettsteder er komplekse og omfattende, og det ville være urealistisk å forvente at de skal følge disse retningslinjene strengt. I denne delen prøver vi imidlertid å demonstrere hvordan det å følge retningslinjene kan føre til forutsigbare, målbare resultater.
Manly Observer er en hyperlokal nyhetsnettside som henvender seg til et publikum i en populær forstad til Sydney, Australia. Nedenfor ser du hvordan en typisk nyhetsartikkel på nettstedet ser ut:
Vi ser følgende designelementer tydelige og tilstedeværende ved første øyekast:
Når vi ser på sidens HTML-kode, kan vi se bruken av semantisk markup.
Dette er kode som er lett lesbar for et menneske. Det er trygt å anta at en webcrawler vil kunne lese og tolke denne koden med like stor letthet.
Nettstedet bruker https://-skjemaet og har ingen popup-annonser eller mellomliggende annonser som lastes inn i det første visningsområdet.
Entrepreneur er et populært magasin for gründere og bedrifter. Slik ser hjemmesiden ut.
Nettsiden lastes lynraskt, og det er ingen popup-annonser eller videoer på selve hjemmesiden. Mesteparten av annonseplasseringen skjer på individuelle nyhetsartikler.
Når vi klikker på «vis kildekode», ser vi følgende HTML-kode:
Ved første øyekast kan vi se følgende fra denne koden:
Når vi blar nedover, ser vi følgende kodeelement:
Vi har diskutert bruken av schema.org og Opengraph (OG) for bilder. For å oppsummere er schema.org og OG typer strukturerte data som hjelper webcrawlere med å identifisere spesifikke elementer i koden lettere. Vi ser schema.org og OG implementert her.
Lenger nede ser vi også strukturerte datakoder som vist nedenfor:
Som med vårt forrige eksempel bruker entrepreneur.com også https://-skjemaet i lenken sin, har ingen forstyrrende mellomrom eller popup-vinduer, og lastes raskt. Nyhetsartiklene følger et fast format med tittel, bilde, forfatterattribusjon, dato og hovedinnhold. Dette resulterer i en bedre sideopplevelse og dermed forbedret teknisk SEO.
Etter å ha jobbet deg gjennom denne leksjonen, skal du kunne gjennomgå og oppdatere eksisterende nyhetssider for å optimalisere design og layout, slik at de overholder beste praksis for teknisk SEO.
