Senast uppdaterad: januari 27, 2023
När du lägger till länkar till sociala inlägg i HubSpot visas en förhandsgranskning med en bild, sidtitel och sidbeskrivning.
De sociala förhandsgranskningarna baseras på metataggar i <head>-avsnittet i sidans HTML. Dessa taggar talar om för plattformarna för sociala medier vad de ska fokusera på när de skapar en förhandsvisning av din delade länk. De grundläggande metataggarna är följande:
- og:title: titeln på ditt innehåll.
- og:type: typen av ditt innehåll, till exempel en video eller en webbsida.
- og:image : webbadressen för den bild som representerar ditt innehåll.
- og:url: innehållets unika webbadress som används som permanent ID.
- og:description: Beskrivning som sammanfattar bilden.
Titeln, metabeskrivningen och den presenterade bilden anges automatiskt för blogginlägg.. För landningssidor och webbsidor ställs titeln och metabeskrivningen också in automatiskt, men den presenterade bilden måste ställas in manuellt.
Observera: LinkedIn visar din presenterade bild, sidans titel och URL i förhandsgranskningen, men inte din metabeskrivning.
Den presenterade bilden, sidans titel eller sidbeskrivning visas inte i förhandsgranskningen av inlägget.
Om förhandsgranskningen av ditt sociala inlägg inte visar den förväntade bilden, sidtiteln eller sidbeskrivningen kan du felsöka i HubSpot eller använda externa felsökningsverktyg.
Felsökning i HubSpot
Om du länkar till ett blogginlägg, en landningssida eller en webbsida som är värd i HubSpot, ska du se till att en presenterad bild är inställd i sidan eller inläggets inställningar.
Du kan också manuellt ställa in en og:image taggen för att lägga till en bild:
-
I ditt HubSpot-konto, navigera till dina landningssidor eller webbsidor.
- Håll muspekaren över en sida och klicka på Redigera.
- I innehållsredigeraren klickar du på fliken Inställningar och sedan på Avancerade alternativ.
- I avsnittetYtterligare kodutdragskriver du in det härkodutdrageti fältetHead HTML:
<meta property="og:image" content="IMG URL">
- Ersätt IMG URL med URL:en för din bildfil.
- Om du vill optimera en bild ytterligare för Twitter skriver du in det här kodutdraget i HTML-fältet Head :
<meta name="twitter:card" content="summary_large_image">
- Klicka på Publicera eller Uppdatera i det övre högra hörnet för att sätta ändringarna i verket.
Felsökning med verktyg för webbläsarutvecklare
Om du delar en extern sida i ditt sociala inlägg kan du använda webbläsarutvecklingsverktyg som Chrome Developer Tools för att se till att metataggarna för sidan är korrekt konfigurerade. Visa sidans källa och kontrollera och bekräfta sedan följande:
og:imageoch andra metataggar visas korrekt.- Detaljerna för varje tagg är korrekta. Kontrollera t.ex. att URL:en för den presenterade bilden för
og:imageär korrekt. - Det finns bara en förekomst av varje typ av metatag. Om det finns flera förekomster av samma metatag kan det hända att de sociala nätverken inte väljer rätt tagg när de genererar en förhandsgranskning av länken.
- Dina metataggar finns nära toppen av HTML-koden. Om du har extra kod eller markeringar före dina metataggar kan det hända att de sociala nätverkens crawlare inte kan hitta dessa taggar.
Felsökning med verktyg för felsökning av sociala nätverk
Om du ser en diskrepans mellan din sociala förhandsgranskning och metataggarna kan det sociala nätverket behöva söka upp sidan på nytt. Använd följande valideringsverktyg för varje socialt nätverk för att upptäcka eventuella fel eller för att utlösa en ny sökning av sidan:
- Facebook Sharing Debugger: Facebook tar automatiskt fram nytt delat innehåll var 24:e timme. Om du vill utlösa en ny utgrävning manuellt klickar du på Skrapa igen i delningsfelsökaren.
- Validering av Twitter-kort: Twitter cachas innehåll i 7 dagar efter att ha publicerat ett inlägg. Klicka på Förhandsgranska kort i kortvalideringsprogrammet för att utlösa en ny sökning av ditt innehåll.
- LinkedIn-inspektör för inlägg: LinkedIn lagrar innehåll i 7 dagar efter att ett inlägg har publicerats. Klicka på Inspektera i postinspektören för att utlösa en ny sökning av ditt innehåll.
Generellt sett kommer alla inlägg som publicerats innan sidan återskapas att ha kvar den felaktiga bilden. Om taggen og:image inte har ställts in för en sida kommer det sociala nätverket att söka igenom sidan för att hitta den lämpligaste bilden att inkludera i sociala inlägg, vilket vanligtvis är den första bilden som hittas. Det kan hända att en förhandsgranskningsbild för en länk inte visas alls om en robots.txt-fil eller säkerhetsprogram används för att förhindra att sidan kryssas.
Problem med visning av bilder
Om förhandsgranskningen av ditt sociala inlägg visar den förväntade bilden, men bilden visas felaktigt kan du kontrollera följande.
Bildens storlek eller förhållande är felaktigt
Om den presenterade bilden inte visas korrekt i förhandsgranskningen av det sociala inlägget (t.ex. om bilden skärs av eller förhållandet är felaktigt) kan du behöva redigera bilden så att den har rätt dimensioner för det sociala nätverk som du publicerar i och sedan publicera sidan på nytt.
Följande dimensioner rekommenderas för optimering av bilder i varje nätverk:
- Facebook: 1.91:1
- Twitter: 16:9 för fotoinlägg och 1,91:1 för bilder i länkinlägg.
- Instagram (fyrkantigt): 1:1
- Instagram (porträtt): 4:5
- Instagram (landskap): 1.91:1
- LinkedIn (landskap): 1.91:1
Se till att alla medier som ingår i dina sociala inlägg följer riktlinjerna för filstorlek för varje nätverk. Om HubSpot fastställer att en fil är för stor för att publiceras i ett visst nätverk visas en varning när du skapar det sociala inlägget. Detta är de maximala filstorlekarna för varje socialt nätverk:
- Facebook: 8 MB (under 1 MB rekommenderas för PNG-filer för att undvika pixling).
- Instagram: 8 MB
- Twitter: 8MB: 5 MB (15 MB för GIF-filer)
- LinkedIn: 10MB
Skillnader i bildfärg
Inbäddade färgprofiler kan påverka hur den presenterade bilden visas i det sociala inlägget. Olika system bearbetar ovanliga färgprofiler på olika sätt, vilket är anledningen till att färgerna kan se annorlunda ut när du förhandsgranskar bilden i din filhanterare.
Du kan köra din bild-URL genom ett externt verktyg för att se om den använder en ovanlig färgprofil. Vid behov kan du ta bort den störande färgprofilen i ett externt bildredigeringsverktyg som Photoshop och sedan publicera sidan på nytt innan du publicerar ditt sociala inlägg.
Skillnader i bildens klarhet
HubSpots filhanterare använder bildkomprimering på JPEG- och PNG-filer för att optimera laddningshastigheterna på ditt HubSpot-hostade innehåll. Nätverk på sociala medier använder också bildkomprimering i inlägg som kan variera i kvalitet jämfört med vad du ser i HubSpot.
Därför rekommenderas det att du använder bilder med relativt hög upplösning för varje nätverk. Om din bild inte uppfyller kraven i ett socialt nätverk visas en varning i HubSpot-verktyget för social publicering så att du kan justera bilden i enlighet med detta.