HubSpot Knowledge Base

Risoluzione dei problemi relativi alle anteprime dei link nei post sociali

Scritto da HubSpot Support | Jan 27, 2021 5:24:18 PM

Quando si aggiungono link ai post sociali in HubSpot, viene visualizzata un'anteprima che include un'immagine in primo piano, il titolo e la descrizione della pagina.

Le anteprime sociali si basano sui meta tag presenti nella sezione <head> dell'HTML della pagina. Questi tag indicano alle piattaforme dei social media su cosa concentrarsi quando creano un'anteprima del vostro link condiviso. I meta tag di base sono

  • og:title: il titolo del contenuto.
  • og:type: il tipo di contenuto, ad esempio un video o una pagina web.
  • og:image: l'URL dell'immagine che rappresenta il contenuto.
  • og:url: l'URL univoco del contenuto che verrà utilizzato come ID permanente.
  • og:description: la descrizione che riassume l'immagine.

Iltitolo, la meta-descrizione e l'immagine in primo piano sono impostati automaticamente per i post del blog. Per le landing page e le pagine web, mentre il titolo e la meta descrizione sono impostati automaticamente, l'immagine in evidenza deve essere impostata manualmente.

Nota bene: LinkedIn mostrerà l'immagine in evidenza, il titolo della pagina e l'URL nella scheda di anteprima, ma non includerà la meta descrizione.

L'immagine in primo piano, il titolo della pagina o la descrizione della pagina non vengono visualizzati nell'anteprima del post

Se l'anteprima del post sui social non mostra l'immagine in primo piano, il titolo della pagina o la descrizione della pagina previsti, è possibile risolvere il problema in HubSpot o utilizzando strumenti di debug esterni.

Risoluzione dei problemi in HubSpot

Se il link è a un post del blog, a una landing page o a una pagina del sito web ospitati da HubSpot, assicuratevi che l'immagine principale sia impostata nelle impostazioni della pagina o del post.

È anche possibile impostare manualmente un tag og:image per aggiungere un'immagine in evidenza:

  • Navigare nel contenuto:

    • Pagine del sito web:
    • Pagine di destinazione:
  • Fare clic sul nome della pagina.
  • Nell'editor dei contenuti, fare clic sul menu Impostazioni e selezionare clic.
  • Nella finestra di dialogo, incollare questo frammento di codice nel campo Head HTML:

 <meta property="og:image" content="IMG URL">

<meta name="twitter:card" content="summary_large_image">

  • In alto a destra, fare clic su Pubblica o Aggiorna per rendere effettive le modifiche.

Risoluzione dei problemi con gli strumenti di sviluppo del browser

Se state condividendo una pagina esterna nel vostro post sociale, potete utilizzare gli strumenti di sviluppo del browser, come Chrome Developer tools , per verificare che i meta tag della pagina siano impostati correttamente. Visualizzate l'origine della pagina, quindi controllate e confermate quanto segue:

  • Il tag og:image e gli altri meta-tag sono visualizzati correttamente.
  • I dettagli di ciascun tag sono corretti. Ad esempio, verificare che l'URL dell'immagine in primo piano per il tag og:image sia corretto.
  • Esiste una sola occorrenza di ciascun tipo di meta tag. Se ci sono più occorrenze dello stesso meta tag, i social network potrebbero non selezionare quello corretto quando generano l'anteprima del link.
  • I meta tag si trovano nella parte superiore dell'HTML. Se prima dei meta tag sono presenti codice o markup aggiuntivi, i crawler dei social network potrebbero non essere in grado di individuarli.


Risoluzione dei problemi con gli strumenti di debug dei social network

Se si riscontra una discrepanza tra l'anteprima del social network e i meta tag, è possibile che il social network debba eseguire nuovamente il crawling della pagina. Utilizzate i seguenti strumenti di convalida per ogni social network per evidenziare eventuali errori o attivare un recrawl della pagina:

  • Facebook Sharing Debugger: Facebook esegue automaticamente il recrawling dei contenuti condivisi ogni 24 ore. Per attivare manualmente un recrawl, fare clic su Scrape Again nel Debugger di condivisione.
  • X Card Validator: X memorizza i contenuti nella cache per 7 giorni dopo la pubblicazione di un post. Inserite l'URL e fate clic su Preview card nel Card Validator per attivare un recrawl dei vostri contenuti.
  • LinkedIn Post Inspector: LinkedIn memorizza nella cache i contenuti per 7 giorni dopo la pubblicazione di un post. Fate clic su Ispeziona nel Post Inspector per attivare un recrawl del vostro contenuto.

In generale, tutti i post pubblicati prima del recrawling della pagina manterranno l'immagine errata. Se il tag og:image non è stato impostato per una pagina, il social network scansionerà la pagina per trovare l'immagine più appropriata da includere nei post sociali, che di solito è la prima immagine che trova. L'immagine di anteprima di un link potrebbe non apparire affatto se si utilizza un file robots.txt o un software di sicurezza per impedire il crawling della pagina.

Problemi di visualizzazione dell'immagine in primo piano

Se l'anteprima del post sociale visualizza l'immagine in primo piano prevista, ma l'immagine viene visualizzata in modo errato, è possibile verificare quanto segue.

Le dimensioni o il rapporto dell'immagine non sono corretti

Se l'immagine in primo piano non viene visualizzata correttamente nell'anteprima del social (ad esempio, l'immagine è tagliata o il rapporto non è corretto), potrebbe essere necessario modificare l'immagine in modo che abbia le dimensioni corrette per il social network in cui si sta pubblicando, quindi ripubblicare la pagina.

Le seguenti dimensioni sono consigliate per l'ottimizzazione delle immagini in primo piano su ciascun network:

  • Facebook: 1.91:1
  • X: 16:9 per i post con foto e 1,91:1 per le immagini in evidenza nei post con link
  • Instagram (quadrato): 1:1
  • Instagram (verticale): 4:5
  • Instagram (paesaggio): 1.91:1
  • LinkedIn (paesaggio): 1.91:1

Assicuratevi che tutti i file multimediali inclusi nei post sui social seguano le linee guida sulle dimensioni dei file per ciascun network. Se HubSpot determina che un file è troppo grande per essere pubblicato su un determinato network, apparirà un avviso durante la creazione del post sociale. Ecco le dimensioni massime dei file per ciascun social network:

  • Facebook: 8MB (si raccomanda di non superare 1MB per i file PNG per evitare la pixelatura)
  • Instagram: 8MB
  • X: 5MB (15MB per le GIF)
  • LinkedIn: 10MB

Differenze nel colore dell'immagine

I profili di colore incorporati possono influire sul modo in cui l'immagine in primo piano viene visualizzata nel post sociale. I diversi sistemi elaborano i profili di colore non comuni in modi diversi, motivo per cui i colori possono apparire diversi quando si visualizza l'anteprima dell'immagine nel file manager.

È possibile eseguire l'URL dell'immagine attraverso uno strumento esterno per verificare se sta utilizzando un profilo di colore non comune. Se necessario, è possibile rimuovere il profilo di colore che interferisce con uno strumento di fotoritocco esterno come Photoshop, quindi ripubblicare la pagina prima di pubblicare il post sui social.

Differenze nella nitidezza delle immagini

Ilfile manager di HubSpot utilizza la compressione delle immagini su JPEG e PNG per ottimizzare la velocità di caricamento dei contenuti ospitati da HubSpot. Anche i social network utilizzano la compressione delle immagini nei post, che possono avere una qualità diversa da quella visualizzata in HubSpot.

Per questo motivo, si consiglia di utilizzare immagini ad alta risoluzione per ogni network. Se l'immagine non è conforme ai requisiti di un social network, nello strumento di pubblicazione sociale di HubSpot apparirà un avviso che aiuterà a regolare l'immagine di conseguenza.