Hur man visar liveförhandsvisning av länkar i WordPress

Har du märkt hur osäkra läsare kan vara när det gäller att klicka på länkar? Länkförhandsvisningar löser detta genom att ge dina besökare en förhandstitt på vad som väntar dem på andra sidan 💡

Vi har sett den här tekniken mycket på innehållstunga webbplatser som wikis, där visuella länförhandsgranskningar hjälper läsarna att navigera mer effektivt genom sammankopplade artiklar.

När läsare kan se vad som finns inuti en länk innan de klickar, är de mer benägna att utforska relaterat innehåll som intresserar dem. Dessutom hjälper det dem att undvika att klicka på länkar som inte är relevanta för deras behov.

Många WordPress-användare frågar oss hur man lägger till vackra länförhandsvisningar utan att röra koden. Efter att ha testat olika lösningar har vi hittat en enkel metod utan kod som fungerar utmärkt för nybörjare.

När ska man lägga till en liveförhandsgranskning av länkar på din WordPress-webbplats 🤔

På en typisk WordPress-webbplats visar länkar inte vad som finns inuti dem. Detta kan frustrera besökare när de klickar på en länk och upptäcker att den inte är vad de förväntade sig. Det är där live-länkförhandsvisningar kommer till nytta.

Förhandsvisningar av live-länkar ser vanligtvis ut som verktygstips. Detta WordPress-designefter dyker upp när någon för musen över en länk och visar en förhandstitt på innehållet.

För onlinebutiker innebär det att du kan få dina länkar att visa produktbilder eller korta detaljer för att öka försäljningen.

Om du driver en WordPress-blogg, kan du visa förhandsgranskningsbilder av inlägg eller kort text för att få läsarna att vilja se mer. Och för externa länkar hjälper dessa förhandsgranskningar i förklaringsrutor folk att bestämma om de vill lämna din webbplats.

Var dock försiktig när du använder liveförhandsvisningar. För många kan förvirra besökare. Det är bäst att bara använda dem för viktiga länkar där de hjälper mest.

Med det i åtanke, låt oss titta på ett enkelt sätt att lägga till live-länkförhandsvisningar på din WordPress-webbplats. Den här metoden fungerar oavsett om du använder Gutenberg-blockredigeraren, den klassiska redigeraren eller till och med en temabyggare. Du kan använda snabblänkarna nedan för att navigera genom den här handledningen:

• Steg 1: Installera pluginet Bright Link Previews
• Steg 2: Anpassa designen på förhandsgranskningen av länken
• Steg 3: Konfigurera länkens live-förhandsgranskningsinställningar
• Steg 4: Se din länkförhandsvisning i praktiken
• Bonus Tip: Clean Up Your WordPress Link Previews With Schema Markup

Steg 1: Installera pluginet Bright Link Previews

Det enklaste sättet att lägga till en förhandsgranskning av verktygstips för en länk i WordPress är med pluginet Bright Link Previews. När detta WordPress-plugin för länförhandsgranskning är aktiverat lägger det automatiskt till en live-förhandsgranskning av dina interna och externa länkar i dina inlägg och sidor.

Gå först och installera pluginet i ditt adminområde. För steg-för-steg-instruktioner kan du läsa vår nybörjarguide om hur man installerar ett WordPress-plugin.

När du är klar, gå till Inställningar » Bright Links. Det är här du kommer att kunna konfigurera pluginets inställningar.

Steg 2: Anpassa designen på länkens tooltip-förhandsvisning

Låt oss först ställa in designen för liveförhandsvisningen under fliken Utseende.

Överst kan du välja bakgrundsfärg (vänster sida) och textfärg (höger sida).

Klicka bara på färgfältet så visas ett färgväljarverktyg.

Du kan också välja färgen på hotspot, som automatiskt kommer att visas för e-handelslänkar från WooCommerce, Amazon och Shopify-webbplatser.

Precis som med verktygstipset väljer du helt enkelt bakgrundsfärgen för hotspoten till vänster och textfärgen till höger.

Nedanför det finns 'Välj storlek', där du kan göra tooltippen mindre eller större genom att dra pricken i storleksfältet.

Ett större verktygstips är lättare att läsa, men du vill se till att det inte överlappar eller döljer viktiga delar av din sida.

Vi rekommenderar att du förhandsgranskar det på din webbplats för att hitta den perfekta storleken som passar din design.

Genom att scrolla ner kan du ändra stilen på själva förklaringsrutan. Det finns 3 standardalternativ, och du kan alltid byta dem senare.

När du är nöjd med hur förklaringsrutan ser ut, klickar du bara på 'Spara' längst ner.

Steg 3: Konfigurera länkens live-förhandsgranskningsinställningar

Byt nu till fliken 'Inställningar'.

Det är här du kan konfigurera hur live-förhandsvisningar för länkar beter sig.

Bright Links Preview låter dig tillämpa förhandsgranskningarna av verktygstips på länkar i dina inlägg, sidor och till och med i kommentarsfältet.

Vi bestämde oss för att lägga till dem bara för våra inlägg och sidor eftersom att lägga till dem överallt kunde störa vår användarupplevelse.

En annan sak du kan konfigurera är om du vill visa klickräknare. Att ändra den här inställningen från 'nej' till 'ja' innebär att verktygstipset kommer att tala om för besökare hur många användare som har klickat på länken de svävar över.

Detta kan vara användbart för dina interna länkar eftersom det fungerar som socialt bevis. När besökare ser att en länk är populär, uppmuntrar det dem att utforska mer av ditt innehåll.

Med det sagt rekommenderar vi inte att aktivera den här funktionen om du vill lägga till liveförhandsvisningar för externa länkar också. Det kan slå tillbaka och få folk att lämna din webbplats.

På tal om det kan du välja om du vill lägga till liveförhandsgranskningar på interna länkar, externa länkar eller båda.

Valet beror på vilken typ av webbplats du driver, men vi föreslår generellt att du bara använder interna länkar för att öka dina sidvisningar och minska din avvisningsfrekvens.

Valet beror på dina mål. Här är en snabb sammanfattning:

• Interna länkar: Detta är utmärkt för att öka engagemanget. Förhandsgranskningar uppmuntrar användare att upptäcka mer av ditt eget innehåll, vilket kan öka dina sidvisningar och sänka din avvisningsfrekvens.
• Externa länkar: Detta hjälper till att bygga förtroende hos din publik. Genom att visa en förhandsgranskning av en extern webbplats, försäkrar du användarna om att länken är relevant och säker, vilket gör dem mer säkra på dina rekommendationer.

Vi föreslår generellt att bara använda interna länkar för att öka dina sidvisningar och minska din avvisningsfrekvens.

Därefter kan du välja att cachelagra förhandsvisningarna för att förbättra din webbplatsens prestanda. Vi rekommenderar starkt att du lämnar detta aktiverat.

Cachning sparar en temporär kopia av länförhandsgranskningarna, vilket förhindrar att din webbplats saktar ner och säkerställer en snabb upplevelse för dina besökare.

Om du visar förhandsvisningar för externa länkar kan du tvinga dessa länkar att öppnas i en ny flik. Vi föreslår att du aktiverar den här funktionen så att användare inte av misstag lämnar din webbplats.

Slutligen kan du välja att inaktivera verktygstipset på mobil, eftersom verktygstips kan ge en dålig användarupplevelse på mindre skärmar. Vi rekommenderar att du testar den här funktionen och ser vad som fungerar bäst för din webbplats.

Du kan kolla in vår guide om hur du visar din WordPress-webbplats på mobilen via datorn för mer information.

När du är nöjd med live-förhandsvisningens inställningar, klicka på 'Spara'.

Steg 4: Se din länkförhandsvisning i praktiken

I det här skedet kan du fortsätta och förhandsgranska din webbplats för att se hur verktygstipset ser ut.

Här är hur vår ser ut utan klickräknaren:

Om du väljer att lägga till en klickräknare, kommer det att finnas en liten notering som visar antalet klick länken har mottagit hittills.

Det valet kommer att se ut så här:

Det fantastiska med Bright Links Preview är att det har en gratis analysfunktion som visar hur många användare som har klickat eller till och med svävat över dina länkar.

Detta kan vara användbart för att se vilka inlägg de flesta användare är intresserade av eller för att bestämma vilka nya inlägg som ska lyftas fram.

För att se dessa siffror, gå bara till Inställningar » Bright Links från din WordPress-admin och byt till fliken 'Statistik'.

Bonustips: Rensa upp dina WordPress-länkförhandsvisningar med schema-markup

När någon delar ditt innehåll hämtar WordPress ofta sidans titel, beskrivning och bild för att visa en förhandsgranskning. Men om den informationen inte är korrekt inställd kan resultatet se oprofessionellt eller trasigt ut.

Pluginet Bright Links Preview hjälper genom att automatiskt generera rika länkförhandsvisningar med hjälp av metadata från dina sidor.

För att styra den metadatan och få dina förhandsgranskningar att lysa rekommenderar vi att du använder All in One SEO.

Det gör det enkelt att ställa in Open Graph-metataggar (används av Facebook, LinkedIn, etc.) och låter dig till och med ställa in en standard-Open Graph-bild, anpassa titel- och beskrivningstaggar och lägga till schema-markup för bättre SEO och kontext.

Genom att kombinera Bright Links Preview med AIOSEO, förbättrar du inte bara din WordPress SEO utan ser också till att dina länkar ser rena och klickbara ut på webben.

👉 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
• Hur man lägger till Facebook Open Graph Meta Data i WordPress

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äkningstajmer-widget för att bygga upp spänning inför speciella evenemang
• Lägg till en läsförloppsindikator till dina inlägg för att hålla läsarna engagerade
• Skapa anpassade formdelare för att göra din webbplatsdesign mer intressant

Vi 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 kolla in 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 då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.