När du skapar och publicerar ett socialt inlägg i HubSpot, kommer det motsvarande sociala nätverket att försöka generera en förhandsgranskning av bilden för ditt inlägg. Baserat på den länk du angav för inlägget kommer det sociala nätverket att skanna metataggarna i källkoden på din sida och genomsöka din webbplats robots.txt-fil.
Om du har din webbplats hos en extern leverantör som WordPress och förhandsgranskningen av ditt inlägg inte visas som förväntat ska du följa instruktionerna nedan.
En robots.txt-fil informerar sökmotorer om hur de ska indexera din webbplats. Om du inte har lagt till eller konfigurerat din robots.txt-fil på rätt sätt kommer sociala nätverk inte att kunna analysera innehållet på dina sidor. Facebook och X tillhandahåller båda de user agent-strängar som du måste lägga till i din robots.txt-fil:
User-agent: facebookexternalhit
Disallow:
User-agent: Twitterbot
Disallow:
LinkedIn tillhandahåller ingen dokumentation för sin user agent-sträng, men du kan använda LinkedIn post inspector för att bekräfta om LinkedIn kan genomsöka innehållet på din webbplats.
Sökmotorer och sociala nätverk analyserar head-avsnittet i din HTML för att leta efter de metadata som behövs för att generera en förhandsgranskning av sidan. Du bör inkludera metadata för Facebook och X efter dina primära metataggar:
<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Title of your Website Page">
<meta property="og:description" content="Description of your Website Page">
<meta property="og:image" content="https://example.com/image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/">
<meta property="twitter:title" content="Title of your Website Page">
<meta property="twitter:description" content="Description of your Website Page">
<meta property="twitter:image" content="https://example.com/image.png">Fyll i innehållsattributen för var och en av metataggarna ovan med motsvarande värden för din sida. Du kan validera dina metataggar med Facebook Debugger Tool, X Card Validator och LinkedIn Post Inspector.
Om den utvalda bilden för en länk du infogat inte visas korrekt i din sociala förhandsgranskning (t.ex. om bilden är avklippt eller om förhållandet är fel) kan du behöva redigera bilden så att den har rätt dimensioner för det sociala nätverk du publicerar på och sedan publicera sidan på nytt. Om du publicerar på Facebook kan du läsa mer om deras krav för utvalda bilder i deras dokumentation.
Följande dimensioner rekommenderas för optimering av utvalda bilder på varje nätverk:
Se till att all media som du inkluderar i dina sociala inlägg följer riktlinjerna för filstorlek för varje nätverk. Om HubSpot bedömer att en fil är för stor för att postas på ett visst nätverk visas en varning. Maximala filstorlekar för varje socialt nätverk listas nedan:
Inbäddade färgprofiler kan påverka hur din utvalda bild visas i ditt sociala inlägg. Olika system behandlar 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. Om det behövs kan du ta bort den störande färgprofilen i ett fotoredigeringsverktyg som Photoshop och sedan publicera om sidan innan du publicerar de sociala inläggen.
HubSpots filhanterare använder bildkomprimering på JPEG och PNG för att optimera laddningshastigheterna på dittHubSpot-hostade innehåll. Sociala medier använder också bildkomprimering i inlägg, vilket kan variera i kvalitet från vad du ser i HubSpot. Av den anledningen rekommenderar vi att du använder relativt högupplösta bilder (i rekommenderat bildförhållande) för varje nätverk. Om din bild inte uppfyller kraven för ett socialt nätverk visas en varning i HubSpots sociala publiceringsverktyg för att hjälpa dig att justera din bild i enlighet med detta.
Om du fortfarande har problem med att dina länkförhandsvisningar inte visas korrekt, kolla in vår felsökningsguide.