Anchor link er ikke et emne, der diskuteres meget, men vi har haft fremragende resultater med dem! I dag dykker vi ned i, hvordan du opretter anchor links i WordPress og undersøger, hvorfor du måske vil begynde at bruge dem. Fra vores erfaring kan anchor link hjælpe med at forbedre brugeroplevelsen, gøre det lettere at navigere i long tailed indhold og endda give dig en lille fordel i Google. Hvem ønsker ikke en gratis fordel i Google? 😉
Hvad er anchor link?
Anchor link, også kaldet jump menu links eller indholdsfortegnelse, er links, der straks fører dig til en bestemt del af siden (eller en ekstern side). Anchor-destinationerne specificeres typisk ved hjælp af enten A-elementet (navngivning med navnattributten) eller af ethvert andet element (navngivning med ID-attributten). Begge metoder er fuldt ud i overensstemmelse med W3C-standarder (kilde).
Eksempel på et anchor link
Hvis du stadig er lidt forvirret over, hvad anchor link er, skal du ikke bekymre dig. Se eksemplet nedenfor. Vi bruger anchor link på hvert af disse punkt listeelementer. Når du klikker på dem, tager det dig direkte ned til H2-headeren, der indeholder dette indhold. Du kan tjekke disse selv længere nede i posten. Anchor link kan bruges på alt, f.eks. tekst, billeder og H1-H6-headers.
På mange sider bruges anchor link kun til at oprette en indholdsfortegnelse i begyndelsen af long tailed indlæg. Hvis du kender lidt CSS, kan du blive kreativ og få dem til at se lidt mere stilfulde ud, som vi har gjort på vores landing pages.
På andre websteder kan du muligvis ikke se anchor linket, men i stedet bruges de på headers, så de kan dele links direkte til de specifikke sektioner.
Fordele og ulemper ved anchor links
Bare fordi vi laver noget, betyder det ikke altid, at du bør. Her er et par fordele og ulemper at overveje, når du bruger anchor link på dit WordPress-websted.
Fordele
- En af de største fordele ved anchor link er at skabe en bedre brugeroplevelse, når du gennemsøger dit websted. Dette gælder især når det gælder long-form artikler. Vi udgiver meget dybtgående indhold (4.000+ ord), og scrolling kan blive en hovedpine. Brug af anchor link giver brugeren mulighed for med det samme at springe til det afsnit, de er interesseret i. Lad dine brugere finde det, de har brug for hurtigere.
- Brug af anchor link på headers giver dig mulighed for at dele direkte links til forskellige sektioner i en artikel. Dette er fantastisk til sociale medier og endda supportteam. For eksempel er vores supportteam hos Kinsta stærkt afhængig af anchor link i vores Vidensbase-artikler, så vi kan sende brugeren til det nøjagtige fejlfindingstrin, de skal følge. Vores salgsteam bruger disse også til hurtigere at besvare Kinsta-relaterede forespørgsler.
- Når det kommer til resultatsider for søgemaskiner (SERP’er), kan resultaterne altid variere afhængigt af, hvad der vises. Vi har dog set gang på gang anchor links (jump menuer) vises på vores SERP-liste, fordi vi har brugt dem i vores artikler. Disse er fantastiske, fordi de i det væsentlige giver dig en ny tekstlinje til din organiske liste. De kan også hjælpe med at øge CTR, da brugeren muligvis ser noget relateret til deres forespørgsel, som du ikke formidlede i metabeskrivelsen eller titlen.
anchor links i Google-eksempel - Anchor link kan også bruges til andre ting såsom “return to top” -linket, som Wikipedia bruger sammen med sit citat ^ eller fodnoter. [1]
Ulemper
Mens vi synes, at profferne absolut opvejer ulemperne, er der et par tilbageslag, du måske vil overveje.
- anchor link eller en indholdsfortegnelse kan reducere den gennemsnitlige tid på webstedet besøgende. Hvorfor? Fordi de springer lige over til det indhold, de ønsker, i stedet for at læse hele artiklen. Men hvis du glæder din besøgende med det samme, kan dette resultere i, at de tilmelder sig dit nyhedsbrev eller undersøger mere om, hvad du sælger. Så dette kunne ses som en fordel eller en ulempe.
- Direkte relateret til ovenstående problem kan anchor link muligvis påvirke din annonceomsætning. Besøgende, der springer direkte over til en bestemt sektion, kan mindske visninger og klik. Websteder, der er stærkt afhængige af reklame, vil muligvis A/B-teste ved hjælp af anchor link og indholdsfortegnelse.
- Hvis du skifter domæner eller har brug for at tilføje 301 omdirigeringer, er det vigtigt at bemærke, at fragment-id’en (#) aldrig sendes til serveren. Dette kan komplicere tingene, hvis du skifter ting langs vejen med dine anchor link. Der er måder at komme rundt på dette med JavaScript, men dette er på ingen måde en let opgave.
Anchor link overgang
Du vil måske også overveje at ændre overgangen til anchor linket. Anchor link hopper som standard pludselig til ID længere nede på siden. Dette kan være skurrende for nogle. Du kan ændre dette, så det er en jævn rulleovergang. Dette er faktisk hvad vi gør på Kinsta-bloggen. Du kan bruge et gratis plugin som Page scroll til id eller tilføje noget CSS til dit websted, såsom scroll-behavior: smooth;. Dette Stack Overflow-indlæg har nogle yderligere tip til udviklere.
Som med de fleste WordPress-tip er der et par forskellige måder, du kan gå til at tilføje anchor link i WordPress. Tjek disse fire forskellige nemme metoder. Og ja, disse links direkte nedenfor bruger ankertekst. 😁
- Sådan oprettes manuelt anchor link i WordPress
- Sådan oprettes anchor links i WordPress med et plugin
- Sådan oprettes anchor links i WordPress med Gutenberg
- Sådan oprettes anchor link i WordPress med Chrome-extension
Sådan oprettes manuelt anchor link i WordPress
Den første måde at oprette anchor link på WordPress på er at gøre det manuelt med HTML i hvert af dine indlæg. Lad os oprette en, så du kan se, hvordan de fungerer.
Trin 1
Opret teksten til dit link, og tilføj et hyperlink til det, som du normalt ville gjort for ethvert andet link.
Trin 2
I stedet for at linke det til en URL, et indlæg eller en side; du tildeler det et anchor navn. URI’er, der angiver anchor, indeholder et “#” tegn efterfulgt af anker navnet. Du kan navngive dette, hvad du vil, selvom vi typisk anbefaler at holde dem korte og relaterede til det faktiske navn på headeren.
Hvis du ser på tekstvisningen (HTML), ser det sådan ud:
<a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a>Her er et eksempel på alle de anchor link, vi bruger i dette indlæg:
<ul>
<li><a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">How to Create Anchor Links in WordPress with a Plugin</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">How to Create Anchor Links in WordPress with Gutenberg</a></li>
</ul>Trin 3
Dernæst skal du tilføje et id på det header, du vil have dit anchor link til at hoppe til. For at gøre dette skal du skifte til tekstvisningen (HTML) i WordPress-editoren. I headeren, i dette tilfælde en H2-header, skal du tilføje ID’et sammen med det anchor navn, du valgte i trin 2. anchor navnet og ID-attributten skal være nøjagtigt det samme, for at linket fungerer.
<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>Sådan oprettes anchor links i WordPress med et plugin
Vil du ikke gider med HTML-kode hver gang? Ingen bekymringer, der er nogle fantastiske gratis WordPress-plugins, du kan bruge til nemt at tilføje anchor link og endda en indholdsfortegnelse til hvert indlæg.
Tilføj anchor link med et plugin
En af de nemmeste måder at tilføje et anchor link på er med det gratis TinyMCE Advanced plugin. Dette plugin tilføjer grundlæggende ekstra funktionalitet til editoren med hurtige genvejsknapper. I skrivende stund har pluginet over 2 millioner aktive installationer med en 4,5 ud af 5-stjernet vurdering.
Trin 1
Når du har installeret og aktiveret pluginet, skal du gå ind i dit indlæg og oprette et hyperlink på din ankertekst. I stedet for at linke det til en URL, et indlæg eller en side; du tildeler det et anchor navn med et # foran det.
Trin 2
Fremhæv den header, du vil linke det til. Klik derefter på “Indsæt” fra knappen øverst, og vælg “Anchor”. Denne knap vises i editoren på grund af TinyMCE Advanced plugin.
Trin 3
Indtast det anchor navn, du gav det i trin 1, og klik på “OK”. Dette plugin sparer dig tid, fordi du aldrig behøver at forlade visuel editor-visning. Hvis du laver det manuelt med HTML, skal du hoppe mellem både visuel editor og HTML-visning.
Tilføj indholdsfortegnelse med et plugin
Måske vil du fremskynde processen endnu mere. 😄 Hvis du skriver meget dybtgående indhold og altid vil medtage en indholdsfortegnelse (anchor link lister / jump menu) i dine indlæg, skal du udnytte et plugin til indholdsfortegnelse.
Et af de bedste gratis plugins som Easy Table of Contents. Dette plugin genererer automatisk anchor link til dine header og lader dig indsætte din indholdsfortegnelse hvor som helst i dit indlæg med en simpel kortkode. I skrivende stund har pluginet over 30.000 aktive installationer med en 4,5 ud af 5-stjernet vurdering.
Trin 1
Når du har installeret og aktiveret pluginet, er der et par indstillinger, du sandsynligvis vil ændre. Disse kan findes under “Indstillinger → Indholdsfortegnelse.”
- Indstillingen “Aktiver support” giver dig mulighed for at vælge, hvilke indlægstyper du vil bruge indholdsfortegnelsen på. Mest sandsynligt er dette dit “Indlæg” type.
- Du kan derefter vælge, om en indholdsfortegnelse automatisk skal indsættes eller ikke, eller om du vil indsætte den manuelt. Vi vil sandsynligvis anbefale at lave manuel, hvis dine indlæg ændrer sig lidt.
- Indstillingen “Vis når” giver dig mulighed for at definere, hvor mange overskrifter posten skal have, før en indholdsfortegnelse vises. For eksempel vil du sandsynligvis ikke have en indholdsfortegnelse, der vises på et kort blogindlæg, så det er sandsynligvis bedst at lave mindst fire eller flere headers.
Trin 2
For at indsætte indholdsfortegnelsen manuelt skal du blot indsætte [ez-toc] kortkoden, hvor du vil have den til at vises i indlægget.
Indholdsfortegnelsen genereres derefter automatisk for alle headers i indlægget. Hvor fantastisk er det ik?
Du kan også foretage flere ændringer i indstillingerne vedrørende hvad der skal vises, ekskluderinger, udseende osv. For eksempel har du måske altid en “Oversigt” -overskrift i slutningen af dine indlæg. Du kan indtaste denne overskrift på listen over udelukkelser i indstillingerne, så den ikke er inkluderet i indholdsfortegnelsen.
Et andet plugin til indholdsfortegnelse, du måske vil tjekke ud, er Shortcode Table of Contents. Dette er et nyere plugin på markedet, men det er udviklet af James Kemp, som vi har haft fornøjelsen af at interviewe.
Tilføj automatisk anchor link på overskrifter automatisk med et plugin
Vil du blot tilføje anchor link på alle dine headers automatisk? Derefter skal du tjekke det gratis WP Anchor Header-plugin. Dette tilføjer anchor link til alle dine H1-H6-headers.
Dette er et meget grundlæggende plugin, og der er ingen indstillinger. Du skal blot installere det, aktivere det, så er du klar. Hver header får automatisk et anchor navn (afledt af headernavnet), og de får endda et sejt lille ankerikon, der vises, når du holder markøren over headeren. Dette gør det muligt for besøgende let at se, at der er et link der, som de kunne kopiere, hvis de ville.
Sådan oprettes anchor links i WordPress med Gutenberg
Den nye Gutenberg editor er lige rundt om hjørnet og forventes leveret med WordPress 5.0. Med det forbedres og indbygget understøttelse af tilføjelse af anker-id’er til headere.
Trin 1
Fremhæv headeren i Gutenberg-blokken, og klik på “Avanceret” i højre side. Du vil derefter se en mulighed for at tilføje et HTML-anchor.
Trin 2
Hvis du vil linke til det, skal du blot oprette et hyperlink på din ankertekst. I stedet for at linke det til en URL, et indlæg eller en side; du tildeler det et anchor navn med et # foran det.
Sådan oprettes anchor link i WordPress med Chrome-extension
Vil du ikke oprette anchor link med HTML eller installere et plugin? Så skal du tjekke den gratis Anchor Links Chrome extension. Dette er fuldt kompatibelt med selv hosted WordPress, WordPress.com og Medium.
Trin 1
Når du har installeret Chrome-extension, skal du blot markere den header, du vil tilføje anchor linket på. Klik derefter på det lille Anchor Link Chrome-extension ikon i din browsers værktøjslinje.
Bag kulisserne opretter det et anker-ID (afledt af headernavnet). I dette eksempel: #Header_1. Når du klikker på ikonet, kopieres det automatisk til dit udklipsholder.
Trin 2
Gå derefter til den tekst, du vil tilføje anchor linket til, opret et hyperlink som normalt, og tryk på “Indsæt”.
Og det var det! Chrome-extension hjælper med at gøre det hurtigt og nemt uden at stole på nogen tredjeparts-plugins.
Resumé
Som du kan se, er der mange kreative måder at tilføje anchor links på WordPress. Nogle er lettere end andre. Hvis du udgiver meget long form content, hjælper dette dine besøgende med det samme at få det indhold, de ønsker. Vi har også set anchor link hjælpe med at få “spring til menuer” i SERP’er, hvilket hjælper med at øge CTR på din organiske fortegnelse.
Bruger du endnu anchor link på dit WordPress-websted? I så fald vil vi meget gerne høre din oplevelse eller tanker.
Brian har en stor lidenskab for WordPress, har brugt det i over et årti og udvikler endda et par premium plugins. Brian kan lide blogging, film og vandreture. Opret forbindelse med Brian på Twitter.
Skriv et svar