Social

Probleemoplossende link previews in de Social tool

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

Marketing Hub  Professional, Enterprise
Legacy Marketing Hub Basic

Voordat u een sociale post publiceert, kunt u een voorbeeld bekijken hoe de afbeelding in uw post zal worden weergegeven. Leer hoe u problemen met de afbeelding in uw social previews kunt oplossen.

Een social preview is gebouwd op meta-tags in het <head> gedeelte van uw pagina HTML. Deze tags maken deel uit van het Open Graph-protocol, waarmee elke webpagina een rijk object in een sociale grafiek kan worden. Deze tags vertellen sociale mediasites zoals Facebook, LinkedIn en Twitter waar ze zich op moeten richten bij het maken van een preview van uw gedeelde link. De basis meta-tags zijn:

  • og:titel: de titel van uw inhoud.
  • og:type: het type van uw content, zoals een video of een webpagina.
  • og:image: de URL van de afbeelding om uw inhoud weer te geven.
  • og:url: de unieke URL van uw inhoud die als permanente ID zal worden gebruikt.
  • og:description: debeschrijving die uw afbeelding samenvat.

De titel, de metabeschrijving en de afbeelding worden automatisch ingesteld voor blogberichten.. Voor landingspagina's en websitepagina's moet de afbeelding handmatig worden ingesteld.

Aanbevolen afbeelding, paginatitel of paginabeschrijving wordt niet weergegeven in de postvoorvertoning.

Als de preview van uw sociale post niet de afbeelding, de paginatitel of de paginabeschrijving toont die u verwacht, zijn er verschillende debugging-tools die u kunt gebruiken om het probleem op te lossen.

Bevestig dat u een afbeelding hebt opgegeven en dat uw metatags detecteerbaar zijn.

Als u een link maakt naar een blogbericht, een landingspagina of een websitepagina die gehost wordt met HubSpot, zorg er dan voor dat u een afbeelding hebt geselecteerd.

Als u een externe pagina in uw bericht deelt, gebruikt u de ontwikkelaarshulpmiddelen van uw browser, zoals Chrome Developer, om de broncode van de pagina te bekijken en zoekt u vervolgens naar de og:image-tag om te zien welke afbeelding wordt weergegeven.

inspect-for-featured-image

Als u hebt bevestigd dat de og:image-tag aanwezig is en de door u gebruikte URL voor de afbeelding correct is, maar u nog steeds geen voorvertoning van de link in uw bericht ziet, kunt u ook het volgende controleren:

  • Bevestig dat er slechts één exemplaar van elk type meta-tag aanwezig is: als er meerdere exemplaren van dezelfde meta-tag op uw pagina voorkomen, kunnen sommige sociale netwerken niet de juiste kiezen wanneer ze een linkvoorvertoning proberen te genereren.
  • Zorg ervoor dat uw metatags in de buurt van de top van uw HTML staan: als u extra code of markup voor uw metatags hebt, kunnen sommige crawlers van sociale netwerken deze misschien niet vinden.

Gebruik de debugging-tools voor sociale netwerken om uw afbeelding en metatags te valideren

Als je een andere afbeelding ziet in de sociale preview dan wat is ingesteld als de og:image tag, kan het zijn dat het sociale netwerk die pagina moet hertekenen. U kunt de volgende validatiegereedschappen gebruiken om een pagina te herwinnen en eventuele fouten die van invloed kunnen zijn op de publicatie aan de oppervlakte te brengen:

  • Facebook: gebruik de Facebook Sharing Debugger om eventuele waarschuwingen of fouten met uw meta-tags aan de oppervlakte te brengen, of om de URL van de inhoud opnieuw te schrapen zodat het de meest actuele Facebook-linkvoorvertoning genereert.
  • Twitter: gebruik de Twitter Card Validator om waarschuwingen of fouten met uw metatags aan de oppervlakte te brengen, of om de URL van de inhoud opnieuw te schrapen zodat het de meest actuele Twitter card preview genereert.
  • LinkedIn: gebruik de LinkedIn-kaartinspecteur om waarschuwingen of fouten met uw metatags aan de oppervlakte te brengen, of om de URL van de inhoud opnieuw te schrapen zodat het de meest actuele LinkedIn-kaartvoorvertoning genereert.

Let op: LinkedIn zal je gekenmerkte afbeelding, paginatitel en URL in hun previewkaart tonen, maar zal je metabeschrijving niet bevatten.

Als de og:image tag niet is ingesteld voor een pagina, zal het sociale netwerk de pagina scannen om de meest geschikte afbeelding te vinden om op te nemen in sociale berichten, wat meestal de eerste afbeelding is die het vindt. Een voorbeeldafbeelding van een link kan helemaal niet verschijnen als een robots.txt-bestand, of bepaalde beveiligingssoftware, wordt gebruikt om het kruipen van de pagina te voorkomen.

Vereisten voor het formaat van de afbeeldingen

Als de afbeelding voor een link die u hebt ingevoegd niet correct wordt weergegeven in uw sociale preview (bijvoorbeeld, de afbeelding is afgesneden of de verhouding is onjuist), moet u mogelijk de afbeelding bewerken zodat deze de juiste afmetingen heeft voor het sociale netwerk waarop u post, en vervolgens de pagina opnieuw publiceren. Als u een bericht plaatst op Facebook, kunt u in de documentatie meer te weten komen over de vereisten voor de afbeelding.

De volgende dimensies worden aanbevolen voor het optimaliseren van de afbeelding op elk netwerk:

  • Facebook: 1.91:1
  • Twitter: 16:9 voor foto's en 1.91:1 voor afbeeldingen in link posts.
  • Instagram (vierkant): 1:1
  • Instagram (portret): 4:5
  • Instagram (landschap): 1.91:1
  • LinkedIn (liggend): 1.91:1

Zorg ervoor dat alle media die u in uw sociale berichten opneemt, de richtlijnen voor de bestandsgrootte van elk netwerk volgen. Als HubSpot vaststelt dat een bestand te groot is om op een bepaald netwerk te posten, wordt er een waarschuwing weergegeven. De maximale bestandsgrootte voor elk sociaal netwerk staat hieronder vermeld:

  • Facebook: 8MB (minder dan 1MB aanbevolen voor PNG-bestanden om pixelvorming te voorkomen)
  • Instagram: 8 MB
  • Twitter: 5MB (15MB voor GIF's)
  • LinkedIn: 10MB

Kleur- en helderheidsverschillen in het beeld

Verschillen in beeldkleur

Geïntegreerde kleurprofielen kunnen van invloed zijn op de manier waarop uw gekenmerkte afbeelding in uw sociale post wordt weergegeven. Verschillende systemen verwerken ongewone kleurprofielen op verschillende manieren, daarom kunnen de kleuren er anders uitzien bij het bekijken van de afbeelding in uw bestandsmanager. U kunt de URL van uw afbeelding via een externe tool laten lopen om te zien of het een ongewoon kleurprofiel gebruikt. Indien nodig kunt u het storende kleurprofiel verwijderen in een fotobewerkingsprogramma zoals Photoshop, en vervolgens de pagina opnieuw publiceren voordat u de sociale berichten publiceert.

Verschillen in beeldhelderheid

Debestandsmanager van HubSpot gebruikt beeldcompressie op JPEG's en PNG's om de laadsnelheid van uw HubSpot-hosted content te helpen optimaliseren. Sociale-media-netwerken gebruiken ook beeldcompressie in berichten, die in kwaliteit kunnen verschillen van wat u ziet in HubSpot. Om deze reden is het aan te raden om voor elk netwerk relatief hoge resolutie afbeeldingen te gebruiken (in de aanbevolen beeldverhouding). Als je afbeelding niet voldoet aan de eisen van een sociaal netwerk, zal er een waarschuwing verschijnen in de social publishing tool van HubSpot om je afbeelding aan te passen.