Hur man visar liveförhandsgranskning av länkar i WordPress (2 enkla sätt)

Om du har märkt att besökare skrollar förbi dina länkar utan att klicka, då är du inte ensam. Erfarenhetsmässigt är vanliga textlänkar ofta för subtila för att fånga uppmärksamhet, vilket innebär att läsare missar de hjälpsamma resurser och verktyg du rekommenderar.

Det är där live länkförhandsgranskningar kan hjälpa. Istället för att bara visa en URL kan du visa en förhandsgranskning med en bild, titel och kort beskrivning – liknande hur länkar visas på sociala medieplattformar.

I den här guiden visar jag dig hur du visar liveförhandsgranskningar av länkar i WordPress, steg för steg.

I slutet av den här handledningen kommer du att kunna förvandla enkla länkar till attraktiva förhandsgranskningar som fångar uppmärksamhet och uppmuntrar till fler klick.

Varför visa live länkförhandsgranskningar i WordPress?

Live-länkförhandsvisningar gör länkar mer användbara, mer synliga och lättare att klicka på.

Istället för att visa en vanlig URL ger de besökarna användbar kontext innan de bestämmer sig för att öppna en länk.

Här är varför jag rekommenderar att använda live länkförhandsgranskningar på en WordPress-webbplats:

• Fånga uppmärksamhet: En länkförhandsgranskning med en bild och titel sticker ut mer än vanlig text, särskilt i längre blogginlägg.
• Hjälper till att få fler klick: När läsarna kan se vad en länk handlar om, är de mer benägna att klicka på den.
• Förbättra läsupplevelsen: Besökare behöver inte gissa vart en länk leder. Förhandsgranskningen skapar tydliga förväntningar.
• Perfekt för att dela verktyg och resurser: Länkförhandsvisningar fungerar särskilt bra när du rekommenderar produkter, plugins eller användbart externt innehåll.
• Få innehållet att se modernare ut: Jag upptäckte att lägga till länkförhandsgranskningar ger din webbplats en polerad, professionell känsla. Det får ditt innehåll att se liknande ut som det folk ser när de delar länkar på sociala medier.

Om du ofta delar länkar i handledningar, blogginlägg eller landningssidor, kan live-länkförhandsvisningar hjälpa till att hålla läsarna engagerade och uppmuntra dem att utforska mer.

Nu ska vi visa dig hur du enkelt lägger till live länkförhandsgranskningar i WordPress med 2 enkla metoder.

Vilken metod ska du välja?🤔

Innan jag går igenom steg-för-steg-handledningarna är det bra att välja den metod som passar din webbplats och dina mål.

Vissa plugins visar automatiskt förhandsgranskningar när besökare för muspekaren över länkar, medan andra låter dig skapa stilade förhandsgranskningskort för specifika länkar.

Tabellen nedan gör det enkelt att se vilket alternativ som fungerar bäst för dig:

Plugin / Metod	Bäst för	När du ska använda
Linkz.ai (Metod 1)	Automatiska live-länkförhandsvisningar vid hovring	Bloggar, handledningar, resursintensiva webbplatser, webbplatser med många externa länkar
Visual Link Preview (Metod 2)	Förhandsgranskningar av länkar i Facebook-stil	Affiliatesidor, WooCommerce-butiker, kuraterade länkar, sidor där du vill lyfta fram specifika länkar

Nu när du vet vilken metod som passar dina behov, låt oss hoppa in i handledningarna och ställa in dina live-länksförhandsgranskningar:

Metod 1: Visa live-länksförhandsgranskningar vid hovring med Linkz.ai

Jag rekommenderar att använda Linkz.ai om du vill att live-länkförhandsvisningar ska visas automatiskt när besökare svävar över länkar på din webbplats.

Den här metoden fungerar särskilt bra för bloggar, handledningar och resursintensiva webbplatser där du delar många interna och externa länkar.

Linkz.ai extraherar och visar automatiskt länkat innehåll, inklusive artiklar, blogginlägg, videor, presentationer, PDF-filer och över 1 000 andra webbinbäddningar. Den använder ett skript för laddning vid behov, vilket innebär att förhandsgranskningen bara laddas när en användare interagerar med länken för att hålla din initiala sidvikt lätt.

När användare hovrar över en länk visas ett popup-fönster med en sammanfattning av innehållet, vilket ger besökarna kontext utan att lämna din webbplats.

Du måste skapa ett Linkz.ai-konto för att använda pluginet. Gratisplanen låter dig lägga till hovringsförhandsgranskningar direkt för både interna och externa länkar, vilket räcker för de flesta bloggar och små webbplatser.

För dem som behöver fler funktioner som analys, extra teman och rikare innehåll, börjar premiumplanen 'Blog' på 60 USD per år (5 USD per månad).

Sammantaget tycker jag att det är en bra lösning eftersom den är automatisk, nybörjarvänlig och håller läsarna engagerade med minimal installation.

Steg 1: Installera Linkz.ai och skapa ett konto

Först måste du installera och aktivera Linkz.ai-pluginet. Om du är osäker på hur du gör det, oroa dig inte, jag har dig täckt.

Följ bara vår steg-för-steg-guide om att installera ett WordPress-plugin.

När pluginet är aktiverat ser du en menyflik för Linkz.ai i din WordPress-adminpanel. Klicka på den och klicka sedan på knappen 'Registrera dig'.

Detta kommer att dirigera dig till Linkz.ai-webbplatsen, där du måste skapa ett konto genom att ange din e-postadress och välja ett lösenord.

Klicka sedan på knappen 'Fortsätt'.

Du har nu framgångsrikt skapat ditt Linkz.ai-konto. Som standard kommer du att vara på gratisplanen, som låter dig lägga till upp till 2 500 länförhandsvisningar per månad på en webbplats.

Den visar automatiskt förhandsvisningar när användare för muspekaren över länkar och kan visa rika förhandsvisningar vid klick, med Linkz.ai-varumärke inkluderat.

Denna plan är perfekt för att komma igång, och du kan alltid uppgradera senare om du vill ha extra funktioner som analys, ytterligare teman eller fler länförhandsvisningar per månad.

Steg 2: Anslut Linkz.ai till din WordPress-webbplats

Nu när du har skapat ditt Linkz.ai-konto är det dags att ansluta det till din WordPress-webbplats. Efter registrering kommer Linkz.ai automatiskt att öppna en installationsguide i sitt instrumentpanel.

Din webbplats-URL kommer redan att vara tillagd, så allt du behöver göra är att klicka på knappen 'Lägg till' för att ansluta din webbplats till Linkz.ai.

Därefter kommer guiden att fråga vilka hyperlänkar som ska visa länkförhandsvisningar. Om du bara vill ha förhandsvisningar för externa länkar kan du välja det alternativet.

Jag rekommenderar personligen att välja både externa och interna länkar om du vill att allt ditt innehåll ska kännas mer interaktivt och engagerande för besökare.

När du har gjort ditt val klickar du på knappen 'Nästa'.

Därefter måste du välja ett tema och en stil för dina förhandsgranskningskort för länkar.

På gratisplanen kan du bara använda temat 'Klassiskt', som visar en stor framhävd bild tillsammans med ett utdrag ur inlägget. Premium-användare har tillgång till ytterligare teman och fler anpassningsalternativ.

För stilen måste du välja mellan ljus och mörkt läge.

Jag rekommenderar personligen alternativet 'Automatisk ljus/mörk' eftersom det anpassar sig automatiskt för att matcha besökarens webbplatsläge, även om den här funktionen endast är tillgänglig med premiumplanen.

När du har gjort dina val klickar du på knappen 'Nästa'.

Detta leder dig till det sista steget, där du måste klicka på knappen 'Aktivera Linkz.ai'.

Du kommer sedan tillbaka till din WordPress-instrumentpanel. Här kommer din webbplats att listas under Linkz.ai-inställningarna med växlingsknappen aktiverad.

Detta innebär att dina förhandsgranskningskort för länkar nu är aktiva och kommer att visas som standard på din webbplats.

Steg 3: Testa dina första live-länkförhandsvisningar

När Linkz.ai är anslutet och aktivt på din webbplats är det dags att se det i praktiken. Öppna ett inlägg eller en sida på din WordPress-webbplats som innehåller länkar.

Sväva över en länk, och du bör se en liten popup-förhandsvisning visas automatiskt. Denna förhandsvisning visar en sammanfattning av det länkade innehållet, inklusive titel, framhävd bild och utdrag.

Om du valde både interna och externa länkar i steg 2, försök sedan att hålla muspekaren över en intern länk för att se hur den ser ut. Detta är ett utmärkt sätt att göra ditt eget innehåll mer interaktivt och hålla besökarna engagerade på din webbplats.

Om förhandsvisningen inte visas, se till att din Linkz.ai-växel är aktiverad i WordPress-instrumentpanelen under Linkz.ai-inställningar.

Du kanske också vill rensa din webbplatsens cache om du använder ett cache-plugin, eftersom cachade sidor ibland kan förhindra att nya funktioner visas omedelbart.

Efter att ha bekräftat att allt fungerar kan du börja publicera inlägg med förtroende, med vetskapen om att dina länkar nu är mer engagerande.

Metod 2: Skapa länkförhandsgranskningskort med Visual Link Preview

Om du vill ha mer kontroll över hur dina länkar visas är Visual Link Preview ett utmärkt alternativ. Detta plugin låter dig skapa länkförhandsvisningskort i Facebook-stil för alla länkar på din webbplats, så att du kan välja bild, titel och beskrivning som visas.

Du kan till och med skapa din egen anpassade mall eller styla standardmallen för att matcha din webbplats design.

Jag rekommenderar den här metoden om du vill lyfta fram specifika länkar, som affiliate-erbjudanden, WooCommerce-produkter, relaterade inlägg eller kuraterade listor över användbara webbplatser.

Eftersom den sparar förhandsgranskningsdata lokalt på din webbplats, behöver den inte hämta data från den externa webbplatsen varje gång en sida laddas. Detta minskar externa HTTP-förfrågningar, vilket hjälper till att upprätthålla dina Core Web Vitals och den totala webbplatsens hastighet.

Visual Link Preview fungerar med både Classic Editor och Gutenberg, vilket låter dig lägga till förhandsgranskningar med hjälp av block eller kortkoder. Detta gör den flexibel för alla typer av innehåll, oavsett om du driver en blogg, en onlinebutik eller en resursida.

Steg 1: Installera och aktivera Visual Link Preview

För att komma igång måste du först installera och aktivera pluginet Visual Link Preview. Det bästa är att det är helt gratis, så du kan lägga till anpassade länkförhandsvisningskort på din webbplats utan att spendera något.

För att installera den, gå till din WordPress-instrumentpanel, navigera till Plugins » Lägg till ny och sök efter 'Visual Link Preview'.

När du hittar det klickar du på 'Installera nu' och sedan 'Aktivera'. För mer information kan du kolla vår guide om att installera ett WordPress-plugin.

Steg 2: Välj och anpassa en mall för dina länkförhandsgranskningskort

När pluginet är aktiverat går du till sidan Inställningar » Visuell länkförhandsgranskning från din WordPress-instrumentpanel. Det är här du bestämmer hur dina länkförhandsgranskningskort kommer att se ut.

Pluginet erbjuder två typer av mallar: dynamiska och statiska.

Dynamiska mallar är helt redigerbara med mallredigeraren, vilket ger dig fullständig kontroll över layouten, färgerna och designen på dina kort. Statiska mallar är förkodade och tillåter endast små stiländringar, så de är enklare men mindre flexibla.

För att skapa en dynamisk mall måste du öppna ‘Mallredigeraren’.

Jag rekommenderar det här alternativet eftersom det låter dig anpassa dina kort precis som du vill och se ändringarna i realtid.

Först väljer du en standardmallstil och förhandsgranskar den. Klicka sedan på knappen ‘Klona och redigera mall’ för att börja anpassa.

Du måste ge din mall ett namn innan du kan spara den.

Jag brukar välja något beskrivande som gör det lätt att identifiera senare.

I redigeraren kan du på vänster sida justera mallens egenskaper som bakgrund, kanter, marginaler och utfyllnad. Du kan också redigera enskilda element som titel, text och bild.

På höger sida ser du en liveförhandsgranskning av ditt länkförhandsgranskningskort medan du gör ändringar. När du är nöjd med designen klickar du på ‘Spara ändringar’ högst upp.

Tillbaka på inställningssidan kommer din nya mall nu att visas i rullgardinsmenyn för dynamiska mallar.

Därifrån väljer du den helt enkelt för att börja använda den omedelbart.

Om du vill ha en snabbare installation kan du istället välja en statisk mall genom att slå på omkopplaren ‘Använd anpassad stil’.

Gör sedan grundläggande justeringar som behållarens bredd, bakgrundsfärg, utfyllnad, kanter och textstilar.

Det är ett snabbare alternativ, men jag föredrar personligen dynamiska mallar eftersom de ger mig mer kontroll och skapar ett mer polerat, professionellt utseende för mina länkförhandsgranskningskort.

När du är klar klickar du bara på knappen 'Spara ändringar' för att lagra dina inställningar.

Steg 3: Lägg till ditt första länkförhandsgranskningskort

Nu är det dags att lägga till ett länkförhandsgranskningskort i ett av dina inlägg. Gå till Inlägg » Alla inlägg och klicka på ‘Redigera’ på inlägget där du vill visa förhandsgranskningskortet.

När blockredigeraren öppnas klickar du på knappen ‘Lägg till block’ för att öppna blockmenyn. Därifrån hittar du blocket ‘Visuell länkförhandsgranskning’ och drar det till en plats du väljer.

Om du vill lägga till en förhandsgranskning för en extern länk, klistra bara in URL:en och klicka på knappen ‘Använd denna URL’. Om du vill lägga till en förhandsgranskning för ett internt inlägg eller en sida, klicka på knappen ‘Sök efter inlägg’.

En popup-ruta visas där du kan skriva titeln på inlägget du vill ha.

När pluginet har laddat resultaten klickar du på ‘Använd det här inlägget’ bredvid det du vill visa i förhandsgranskningskortet.

När förhandsgranskningskortet har laddats kan du anpassa det från blockpanelen till vänster.

Du kan redigera beskrivningen för att göra den mer engagerande och ersätta miniatyrbilden om du vill använda en annan.

Du kan också växla alternativ för att öppna länken i en ny flik eller lägga till ett nofollow-attribut.

Om du använder en extern länk rekommenderar jag att du växlar alternativet nofollow.

Jag har funnit att användning av nofollow för externa länkar hjälper till att skydda din egen webbplats SEO. Det gör att du kan dela användbara resurser med dina läsare utan att överföra din egen sökmotorauktoritet.

När du är nöjd med hur det ser ut klickar du på ‘Uppdatera’ eller ‘Publicera’ för att spara dina ändringar.

Nu är ditt länkförhandsgranskningskort live, vilket ger läsarna ett visuellt, interaktivt sätt att utforska innehåll utan att lämna sidan.

Bonus: Få dina WordPress-länksförhandsgranskningar att se perfekta ut

Metoderna ovan hjälper dig att visa länkförhandsgranskningar på din webbplats, men du vill också att dina länkar ska se bra ut när de delas på sociala medier. En korrekt bild, titel och beskrivning skapar ett professionellt utseende förhandsgranskningskort och gör att folk är mer benägna att klicka.

Om denna information inte är korrekt inställd kan dina länkar se opolerade eller trasiga ut. Jag rekommenderar att du använder All in One SEO (AIOSEO), den bästa SEO-pluginen för WordPress, för att enkelt kontrollera denna metadata och se till att dina länkar alltid ser bäst ut.

Vi använder AIOSEO på WPBeginner för SEO. För att läsa mer om vår erfarenhet, se vår fullständiga AIOSEO-recension.

Med AIOSEO kan du enkelt ställa in Open Graph-metataggar för Facebook, LinkedIn och andra plattformar, anpassa titel och beskrivning, och till och med ställa in en standardbild för Open Graph.

Du kan också lägga till schema-markup för att ge sökmotorer mer kontext om ditt innehåll.

Genom att ställa in Open Graph och schema med AIOSEO kommer dina länkar att se rena och klickbara ut över hela webben, samtidigt som de hjälper dig att förbättra din WordPress SEO.

👉 För att lära dig mer, kolla in våra guider:

• Hur man lägger till schema-markup i WordPress
• Hur man korrekt lägger till SEO-vänlig 'How to'-schema i WordPress
• Nybörjarguide för att lägga till Facebook Open Graph Meta Data i WordPress

Vanliga frågor om att visa live-länksförhandsgranskningar i WordPress

Om du fortfarande har frågor om att lägga till förhandsvisningar av live-länkar på din WordPress-webbplats, är du inte ensam. Nedan har jag besvarat de vanligaste frågorna för att hjälpa dig att felsöka problem och få dina länkar att se ut som bäst.

Hur spårar jag länkklick i WordPress?

Du kan spåra länkklick genom att använda plugins som MonsterInsights, den bästa Google Analytics-pluginen för WordPress, eller Pretty Links, den bästa pluginen för länkförkortning för WordPress. Dessa verktyg registrerar specifik data som klickfrekvens (CTR) och konverteringsstatistik utan behov av anpassad kod.

För att komma igång, ta en titt på vår guide om hur man spårar länkklick i WordPress.

Visar WordPress länkförhandsvisningar som standard?

Nej, WordPress visar länkar som vanlig text som standard. Däremot bäddar WordPress automatiskt in innehåll för specifika webbplatser (som YouTube eller Twitter) om du klistrar in URL:en på en egen rad. För vanliga textlänkar behöver du ett plugin som de som nämnts ovan.

Vad är den bästa gratis länkspåraren?

För ett gratis alternativ är Pretty Links Lite ett populärt val. Det låter dig förkorta, spåra och hantera länkar direkt från din WordPress-instrumentpanel utan någon kostnad.

Hur ser jag alla länkar i WordPress?

Du kan se alla länkar genom att installera en länkhanteringsplugin som Pretty Links eller använda WordPress-redigeraren för att kontrollera dina inlägg och sidor. Vissa SEO-plugins ger också en länköversikt i sina instrumentpaneler.

Är URL-förkortare bra för SEO?

Ja, men med viss försiktighet. Förkortade URL:er kan se renare och enklare ut att dela, men se till att de omdirigerar korrekt till den slutliga sidan. Plugins som Pretty Links och ThirstyAffiliates hanterar detta säkert för WordPress.

Vad är skillnaden mellan en URL och en hyperlänk?

En URL är webbadressen till en sida, medan en hyperlänk är den klickbara texten eller bilden som pekar på den URL:en. Enkelt uttryckt är URL:en destinationen, och hyperlänken är det som användarna klickar på för att komma dit.

Hur ändrar jag en URL utan att förlora SEO?

Använd en 301-omdirigering när du ändrar en URL. Detta talar om för sökmotorer att sidan har flyttats permanent och bevarar dina SEO-rankingar samtidigt som besökare skickas till den nya länken.

Upptäck fler WordPress-desigfunktioner

Vill du göra din WordPress-webbplatsdesign ännu mer intressant? Kolla in dessa hjälpsamma guider:

• Använd enkla och eleganta fotnoter i dina blogginlägg för att lägga till extra information
• Visa brödtextnavigeringslänkar för att hjälpa besökare att förstå var de befinner sig på din webbplats
• Skapa en rullande nyhetsflöde för att dela viktiga uppdateringar med dina besökare
• Använd en nedräkningstimer-widget för att bygga upp förväntan inför speciella evenemang
• Lägg till en läsbarhetsframstegsmätare i dina inlägg för att hålla läsarna engagerade
• Skapa anpassade formdelare för att göra din webbplatsdesign mer intressant

Jag hoppas att den här artikeln har hjälpt dig att lära dig hur du visar liveförhandsvisningar av dina länkar i WordPress. Du kanske också vill titta på vår lista över de bästa dra-och-släpp-sidbyggarna i WordPress och vår guide om hur man redigerar en WordPress-webbplats.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.