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? 😉

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.

Anchor link

Anchor link

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.

Anchor link på en long tailed artikel

Anchor link på en long tailed artikel

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

Ulemper

Mens vi synes, at profferne absolut opvejer ulemperne, er der et par tilbageslag, du måske vil overveje.

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. 😁

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.

Opret et anchor link med HTML

Opret et anchor link med HTML

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>

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.

TinyMCE Advanced WordPress plugin

TinyMCE Advanced WordPress plugin

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.

Tilføj anchor navn

Tilføj anchor navn

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.

Tilføj anker

Tilføj anker

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.

Anchor ID

Anchor ID

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.

En bedre brugeroplevelse starter med en bedre webstedshost. Prøv Kinsta gratis.

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.

Easy Table of Contents WordPress plugin

Easy Table of Contents WordPress plugin

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.”

Easy Table of Contents indstillinger

Easy Table of Contents indstillinger

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.

EZ-TOC-kortkode

EZ-TOC-kortkode

Indholdsfortegnelsen genereres derefter automatisk for alle headers i indlægget. Hvor fantastisk er det ik?

WordPress table of contents

WordPress table of contents

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.

WP Anchor Header-plugin

WP Anchor Header-plugin

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.

Automatiske anchor-ed på headers

Automatiske anchor-ed på headers

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.

Tilføj HTML-anker i Gutenberg-editoren

Tilføj HTML-anker i Gutenberg-editoren

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.

Tilføj anchor link i Gutenberg

Tilføj anchor link i Gutenberg

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.

Chrome-extension tilføj anchor link

Chrome-extension tilføj anchor link

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.

Kopieret til udklipsholderen

Kopieret til udklipsholderen

Trin 2

Gå derefter til den tekst, du vil tilføje anchor linket til, opret et hyperlink som normalt, og tryk på “Indsæt”.

Tilføj anchor link

Tilføj anchor link

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.


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer