Ultimo aggiornamento: gennaio 27, 2023
Quando si aggiungono link ai post sociali in HubSpot, viene visualizzata un'anteprima che include un'immagine in evidenza, 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.
Il titolo, 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 primo piano, 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 sia impostata un'immagine in primo piano nel campo pagina o post della pagina o del post.
È anche possibile impostare manualmente un'immagine og:image per aggiungere un'immagine in evidenza:
-
Nel vostro account HubSpot, navigare nelle pagine di destinazione o nelle pagine del sito web.
- Passare il mouse su una pagina e fare clic su Modifica.
- Nell'editor dei contenuti, fate clic sulla scheda Impostazioni , quindi su Opzioni avanzate.
- Nella sezioneSnippet di codice aggiuntivi, inserite questosnippet di codicenel campoHead HTML:
<meta property="og:image" content="IMG URL">.
- Sostituire IMG URL con l'URL del file immagine.
- Per ottimizzare ulteriormente un'immagine per Twitter, inserite questo ulteriore frammento di codice nel campo Head HTML :
<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 usare 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:imagee 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:imagesia corretto. - Ogni tipo di meta tag è presente una sola volta. 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 ciascun social network per individuare 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, fate clic su Scrape Again nel Debugger di condivisione.
- Validatore di schede di Twitter: Twitter memorizza nella cache i contenuti per 7 giorni dopo la pubblicazione di un post. Fate clic su Anteprima scheda nel Validatore scheda per attivare un recrawl dei contenuti.
- Ispettore dei post di LinkedIn: 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
- Twitter: 16:9 per i post con foto e 1,91:1 per le immagini in primo piano 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 ogni social network:
- Facebook: 8MB (si raccomanda di non superare 1MB per i file PNG per evitare la pixelatura)
- Instagram: 8MB
- Twitter: 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.
