Utgiverveksttaktikker for valgsesongen | WEBINAR
Utgiverveksttaktikker for valgsesongen | WEBINAR
Etter å ha gått gjennom denne veiledningen, bør du være i stand til å forstå hvordan eksisterende nyhetsartikler endres og lages ved å bruke sidelayoutdesign som forbedrer Googles evne til å gjennomsøke og forstå sidens innhold.
Videovarighet
15:35
Svar Quiz
Ta gjeldende modulquiz
Materialer
Klar til bruk maler
Ressurser
Rapporter og ressurser
2.1.1 Hva er design og layout?
Utformingen og utformingen av nettstedet ditt bestemmer hvordan det ser ut for sluttbrukeren. Dette er viktig fordi Google til syvende og sist er drevet av en bruker-først-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 bestemmer også hvor enkelt webcrawlere, for eksempel Google bot, gjennomsøker og indekserer det. Et enkelt og optimalisert design og layout betyr rask og enkel gjennomgang, som igjen gir bedre rangeringer.
Så hva stopper utgivere fra å implementere beste praksis for design og layout? Oftest blir utgivere konfrontert med disse smertepunktene:
For å svare på dette spørsmålet utførte vi et enkelt Google-søk og skrev inn søkeordene «Charlie Puth News» i søkefeltet.
Her er hva søkeresultatene viste:
På nummer to på Top Stories SERP-rangeringen, rett over en historie av NME, er Daily Illinis artikkel om Charlie Puths siste utgivelse.
Det faktum at Daily Illini, en universitetsstudentavis, overgår 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 det største musikknyhetsnettstedet på jorden? Spennende bestemmer vi oss for å grave litt mer.
Først sjekket vi ut NMEs side på Charlie Puth.
Rett utenfor balltre, er det første vi legger merke til den popup-videoen som prøver å laste nederst til høyre på skjermen. Det gjør tydeligvis ikke en veldig god jobb med lasting. Den buffere videoen skjuler også en del av nyhetsoverskriften og dens kropp.
Neste gang legger vi merke til at den første visningsporten mest er okkupert av ting som ikke er relevant for nyhetshistorien. Det er et stort bannerannonse som dekker omtrent halvparten av siden, og selvfølgelig er det videoen.
Faktisk, bla nedover siden, møter vi flere videoer, mer store, rike bilder, flere popup-annonser og mange hyperkoblinger. Gitt hvor medie-rik siden er, tok den overraskende ganske lang tid å laste.
Vi inspiserte deretter Daily Illini, og her er hva vi fant.
Siden er ryddig, ren og ryddig. Den har sin andel av annonser og en stor donasjonsknapp øverst, men det er ingen videoer eller popup-vinduer som dekker Viewport eller hindrer nyhetsoverskriften. Vi kan se overskriften med en gang, og det er veldig sannsynlig at det samme gjelder Googles webcrawler.
I det store og hele er siden lett, minimalistisk og lynraskt å lastes.
Vi bestemte oss for å kikke under panseret litt mer på den underliggende koden. Ved å høyreklikke på siden og velge Visekilde (mens vi bruker Chrome), kan vi se sidens kode.
Dette er hva vi så for NME -siden:
To ting fanget oppmerksomheten vår her:
Dette er ikke det beste for en side av to grunner:
Da vi så på koden for Daily Illini -siden derimot, så vi dette:
Dette er veldig enkel HTML -kode. Det er heller ingen skript som kjører innenfor<head> del.
Hvordan legger alt dette opp til den daglige Illini Outranking NME?
Det er sannsynligvis en rekke faktorer på jobb her, og en av dem er design og layout. Daily Illini -siden distribuerer visse design- og layout -teknikker som til og med små utgivere lett kan gjenskape for å øke deres generelle SEO -strategi.
Disse inkluderer bruk av ren, enkel HTML-kode, unngår skript i overskriftsdelen, holder siden lett og raskt å laste, og ikke stole for tungt på popup-vinduer og mellomliggende annonser.
Guiden nedenfor graver seg inn i hver enkelt av disse i detalj, mens du forklarer flere andre teknikker du kan implementere for å forbedre SERP -rangeringen betydelig.
Semantikk forholder seg til betydningen av ord. Semantiske HTML -tagger er de som tydelig definerer betydningen både for leseren og en webcrawler.
For eksempel når vi bruker en tag som<header> , vi vet hva den inneholder - informasjon om overskriften.
Tilsvarende<h1> er en semantisk tag som forteller Googlebot at det som følger er den viktigste overskriften i artikkelen.
Derimot, når vi bruker en tag som<div> , betydningen er ikke umiddelbart åpenbar. I HTML<div> Står for divisjon, og alt det tilsier er at en ny kodeseksjon har begynt, uten nødvendigvis å avsløre informasjon om innholdet i denne delen.
Nettcrawlere som GoogleBot er bygget ved hjelp av kunstig intelligens og maskinlæringsalgoritmer som prøver å simulere funksjonen til den menneskelige hjernen. Dette betyr at de gir mening om 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 enkelt for Googles webcrawler å forstå.
Som et eksempel, bør du vurdere de to delene av HTML -kode nedenfor:
Kilde: https://www.pluralsight.com/guides/semantic-html
Denne siden bruker<div> Merk for alt, fra overskrift til hovedinnholdet til bunnteksten. Det er ikke umiddelbart tydelig ved å lese taggene hva innholdet er.
Derimot bruker siden nedenfor semantisk markering. Overskriften er plassert i<header> Tag, bunntekst i<footer> Tag, og hoveddelen av artikkelen går innenfor<main> tag.
Kilde: https://www.pluralsight.com/guides/semantic-html
Siden dette er enkelt for Googlebot å lese og forstå, har denne siden en bedre sjanse til å rangere høyere enn den forrige, alle andre ting er like.
For å se om siden din bruker semantisk markering, høyreklikk bare på siden hvis du bruker Google Chrome, og klikk på Inspiser. Du vil kunne se HTML -kildekoden på siden. Vanlige semantiske elementer inkluderer<author> ,<video> ,<article> ,<form> ,<header> , etc.
Vi vet nå hva semantisk markering er og hvorfor det er viktig. Men hvordan bruker vi den til å forbedre SEO?
Det er enkelt - bruk alltid semantisk markering for å markere viktig informasjon om artikkelen din design og utforming. Dette inkluderer følgende artikkelinformasjon:
Forsikre deg om at sideoppsettet ditt er velordnet for å forbedre krypingen
Du designer nettstedet ditt for å bli lest av både mennesker og webcrawlere, og som sådan skal designet og utformingen din gjenspeile dette faktum.
Nedenfor er noen tips for å hjelpe deg med å oppnå målbare resultater for nettstedet ditt.
Du kan bruke HTML, CSS, JavaScript eller noe annet frontendspråk for å lage rike og interaktive sider. Husk imidlertid at jo mer avansert språket, desto større er dets kompleksitet, og jo større sjanser er at en webcrawler kan synes det er 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 grunnen som søkemotorer kan lese og forstå det raskere.
Tenk på vanlig HTML som bare beinskjelettet på websiden din. Du kan legge til CSS og JavaScript for å kaste det ut og få den til å se estetisk tiltalende og dynamisk ut, men det ville være bedre å holde det viktigste innholdet i skjelettet i stedet for å plassere det i kjøttet.
Så hvordan implementerer vi vanlig HTML? En enkel måte å gjøre det på er å plassere hoveddelen av innholdet ditt i<article> HTML -tagger.
På denne måten, når webcrawlere møter<article> Tag, de vet umiddelbart at det som følger er det viktigste innholdet på siden din - nyhetsartikkelen. Dette hjelper søkemotoren til å forstå at innholdet som er pakket inn i denne taggen, må tildeles større vekt.
Vanlige HTML -er<article> Tag er en semantisk markør som ser slik ut:
Kilde: https://en.wikipedia.org/wiki/article_element
Det neste åpenbare spørsmålet? Hvis jeg bruker en CMS som WordPress, hvor setter jeg inn disse taggene?
Slik gjør du dette: Hvis du bygger et tilpasset nettsted ved hjelp av HTML, kan du sjekke kildekoden for å sikre at den bruker vanlig HTML, spesielt i kritiske områder. Vi vil anbefale å snakke mer detaljert med en utvikler for å sikre at du ikke hamstrer funksjonalitet ved et uhell.
Hvis du bruker WordPress, kan du se denne guiden . Du kan også finne denne guiden for hvordan du setter inn HTML i innlegg og sider en nyttig referansekilde.
Disse instruksjonene er for WordPress, da WordPress er fortsatt den mest populære CMS for utgivere. Hvis du bruker en annen CMS som WIX, kan du ta kontakt med støtte- eller dokumentasjonssiden for CMS.
Hvis du har tilgang til et team av nettutviklere, er det best å få dem til å gjøre det, da å redigere HTML -kode kan være tidkrevende.
Test for å sikre at innholdet ditt vises riktig i alle nettlesere, enheter og størrelser. Denne er mer åpenbar, men ofte oversett. Hvis innholdet ditt ikke vises slik du vil ha det på alle nettlesere og enheter, vil det påvirke brukeropplevelsen, og på lang sikt, SERP -rangeringene dine.
Slik gjør du dette: For å teste innhold på tvers av plattformer må du åpne siden din i forskjellige enheter og i forskjellige nettlesere for å se hvordan den blir gjengitt.
På et minimum bør du teste for følgende:
HTML -markeringer er med på å fremheve de forskjellige elementene på siden din. Strukturerte data hjelper søkemotorer med å lese hva som er i de forskjellige elementene på siden din og bedre forstå innholdet.
Strukturerte data er ganske enkelt en serie instruksjoner skrevet på et enkelt språk, for eksempel JSON-LD, som kan settes inn i den eksisterende HTML-koden på websiden 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 på John Lennon:
Kilde: https://json-ld.org/
Som du kan se, er koden på enkelt språk som er lett for både en menneskelig leser og en webcrawler å forstå.
Her er et annet eksempel som viser hvordan strukturerte data kan passe rett inn i websiden din eksisterende HTML -kode. De strukturerte datainstruksjonene blir fremhevet i grønt.
Kilde: utviklere.google.com
I dette eksemplet forteller Structured Data til GoogleBot at dette er en oppskriftsside om kaffekake fra noen som heter Mary Stone.
Ved å bruke strukturerte data i nettstedets oppsett leverer målbare utfall. For eksempel kan bruk av strukturerte data øke nettstedets klikkfrekvens (CTR) med opptil 30%.
Å bruke strukturerte data hjelper også siden din rangering bedre på Googles karuseller, med utdrag, videoer og kunnskapspanelfunksjoner.
For Google News SEO er det viktig å inkludere følgende elementer når du oppretter strukturerte data for å gi merverdi:
Slik gjør du dette: Du kan legge til strukturerte data/skjema i innholdet ditt enten manuelt eller ved å bruke en plugin for akkurat CMS.
Alle elementene i nyhetsartikkelen din skal ordnes i en bestemt rekkefølge for å tillate raskere og enklere kryping. Bestillingen er som følger:
Sideopplevelse er et mål på hvordan brukere opplever siden din. Google har et sett med parametere for å kvantifisere sideopplevelse. Vi har viet en hel modul til sideopplevelsesfaktorer , så vi vil bare kort se på hver her.
Slik gjør du dette: Du kan teste sideopplevelse både manuelt og ved å bruke plugins eller tredjepartsapper. For eksempel sidehastighetsinnsikt et praktisk verktøy som hjelper deg å analysere nettstedets ytelse basert på CWV og andre parametere og tilordner en poengsum basert på analysen. Den tester også for både mobil og skrivebords respons.
Nyhetsutgivere skal ikke publisere flere nyhetsartikler under samme nettadress. Dette vil hindre Google fra å indeksere dem. Hver nyhetsartikkel skal ha sin egen unike URL.
Videre bør disse nettadressene være permanente. Noe som betyr at den samme nyhetshistorien skal vises på en bestemt URL. Hvis nyhetshistorien knyttet til en bestemt URL -en endres ofte, vil Google ikke kunne krype og indeksere den. Utgivere bør imidlertid oppdatere nyhetshistorien så ofte som trengs.
Hvis viderekoblinger må brukes til nyhetsartikler, bør de implementeres i henhold til følgende beste praksis:
Selv om handlingselementene som er oppført i denne delen ikke er like viktige som de ovenfor, anbefaler vi fortsatt å implementere så mange av disse som mulig når de oppdragskritiske punktene som er oppført ovenfor er blitt adressert.
De<head> Element på en side inneholder viktig informasjon om siden som faktisk ikke vises på siden. Det det inkluderer er metadata som hjelper Googlebot med å identifisere innholdet på siden og klassifisere det.
Som regel, den<head> Elementet skal bare inneholde de viktigste taggene og ingenting annet, slik at et innlegg kan krypes og gjengis ordentlig. Disse inkluderer:
Noe annet som er inneholdt i<head> Element vil sannsynligvis forvirre nettcrawlere.
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: utvikler.mozilla.org
Å bruke sideelementer som gjør det enkelt å skanne innhold og gjøre navigasjon til en friksjonsfri opplevelse for brukeren, påvirker også SEO.
En enkel å navigere siden vil inneholde disse elementene:
Med mindre du er en erfaren nettutvikler, er det best å konsultere en ekspert på den beste måten å implementere en brukervennlig UX.
Google ønsker at utgivere skal vise annonser uten å forstyrre brukerens opplevelse. Av denne grunn kan det straffe nettsteder som viser for mange påtrengende annonser. Mens brukeropplevelse er en subjektiv beregning, har Google visse retningslinjer og beste praksis når det gjelder annonser.
Noen av dem forholder seg til:
For mer informasjon om annonser og popups, se vår detaljerte modul .
JavaScript er flott for å lage dynamisk og interaktivt innhold, men webcrawlers kan oppleve vanskeligheter med å gjengi det.
Dette er fordi:
Med nyhetsartikler er det god praksis å unngå avbrudd som relaterte artikkelkaruseller eller bildegallerier.
Mange utgivere som gjør det bra blir bekymret når de relanserer/redesigner nettstedet sitt, da det krever at Google rekrutterer nettstedet. Følg disse beste praksisene for å sikre en jevn overgang til normal etter redesign/relansering:
Hold artikkelsidene så lette som mulig. Vi har allerede sett på å unngå JavaScript i artikler, men det er også god praksis å unngå å bruke tungt HTML -innhold.
Dette er fordi når GoogleBot kryper siden din, kan den bare laste ned maksimalt 15 MB sidedata i den første gjennomsøkingen. For de fleste sider er dette ikke et stort problem da tunge vektelementer som videoer og bilder refereres til separat innenfor koden som GoogleBot indekserer senere, og dermed er utenfor formålet med denne 15 MB -grensen.
Dette peker imidlertid igjen på at jo lettere siden din, jo lettere vil det være for Googlebot å krype og indeksere den.
Tips: Hvis du vil sjekke størrelsen på siden din, gå til nettleserens utviklerverktøy -side, bytt til nettverksfanen, og legg deretter last på siden. Dette viser alle forespørslene nettleseren din har gjort om å gjengi siden fullt ut. Den første forespørselen på denne listen viser størrelsen på siden din under størrelseskolonnen. 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 for å følge med hver artikkel ved å krype teksten i hoveddelen av artikkelen rett under tittelen.
For å unngå muligheten for GoogleBot inkludert feil utdrag, sørg for at:
Noen ganger kan GoogleBot enten unnlate å indeksere bildet ditt eller indeksere et annet bilde enn det du hadde tenkt å inneholde med artikkelen din. For å unngå dette, følg disse beste praksisene:
GoogleBot bruker artikkelen til artikkelen din for å identifisere og indeksere den riktig. Bruk disse følgende beste praksis for å sikre at den leser tittelen nøyaktig:
La oss se på to casestudier av nettsteder som allerede har implementert trinnene som er omtalt i denne artikkelen.
Moderne nyhetsnettsteder er sammensatte og rike, og det vil være urealistisk å forvente at de følger disse retningslinjene strengt. I dette avsnittet prøver vi imidlertid å demonstrere hvordan det å følge retningslinjene kan resultere i forutsigbare, målbare utfall.
Manly Observer er en Hyperlocal News-nettsted som serverer publikum i en populær forstad i stranden Sydney, Australia. Nedenfor er hvordan en typisk nyhetsartikkel på nettstedet ser ut:
Vi ser følgende elementer av design klart og til stede ved første øyekast:
Når vi ser på siden på sidens HTML -kode, kan vi se bruken av semantisk markering.
Dette er kode som er lett lesbar av et menneske. Det er trygt å anta at en webcrawler vil kunne lese og tolke denne koden med like letthet.
Nettstedet bruker https: //-ordningen og har ingen popup-annonser eller mellomliggende lasting i den første visningsområdet.
Entreprenør er et populært magasin for gründere og bedrifter. Slik vises hjemmesiden.
Nettstedet er lynrask å laste, og det er ingen popup-annonser eller videoer på hjemmesiden selv. Det meste av annonseplassering skjer på individuelle nyhetsartikler.
Når vi klikker for å "se kilde", ser vi følgende HTML -kode:
På et øyeblikk kan vi finne ut følgende fra denne koden:
Når vi blar ned, ser vi følgende kodeelement:
Vi hadde diskutert bruken av Schema.org og OpenGraph (OG) for bilder. For å gjenskape, 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: //-ordningen i sin lenke, har ingen forstyrrende interstitials eller popup-vinduer, og er raskt å laste. Nyhetsartiklene følger et angitt format for tittel, bilde, forfatterattribusjon, dato og hoveddel av innhold. Dette resulterer i en bedre sideopplevelse og forbedret derfor teknisk SEO.
Etter å ha jobbet gjennom denne leksjonen, bør du kunne gjennomgå og oppdatere eksisterende nyhetssider for å optimalisere design og utforming for å overholde teknisk SEO beste praksis.
