Miksi linkkisi esikatselu näyttää väärältä ja miten sen korjaat Open Graphilla

Jaat linkin uuteen laskeutumissivuusi, mutta esikatselussa ei ole kuvaa, näkyy etusivusi otsikko tai kahden kampanjan takainen banneri. Itse sivu on kunnossa. Esikatselu rakennetaan jostain muualta: muutamasta koodirivistä sivun head-osiossa, jonka useimmat eivät koskaan näe.

Tämä kirjoitus käy läpi kuusi syytä, jotka selittävät useimmat rikkinäiset esikatselut, tarkistusjärjestyksessä. Jos haluat, että tagit kirjoitetaan puolestasi, ilmainen Open Graph -generaattori tekee ne, escapoi merkit oikein ja tarkistaa ne alla olevia rajoja vasten.

Miten linkkiesikatselu syntyy

Kun linkki liitetään julkaisuun tai viestiin, sovellus lähettää sivulle robotin. Robotti lukee <head>-osan <meta>-tagit ja piirtää kortin niistä. Tagit tulevat Open Graph -protokollasta, joka nimeää neljä pakolliseksi:

• og:title: sivun otsikko sellaisena kuin sen pitää näkyä kortissa.
• og:type: mikä sivu on, yleensä website tai article.
• og:image: kuva.
• og:url: sivun kanoninen osoite, jota protokolla kutsuu pysyväksi tunnisteeksi.

Lisää og:description, ja kortti on valmis. Täydellinen ja minimaalinen setti näyttää tältä:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Syy 1: tagit puuttuvat

Ilman og:-tageja jokaisen sovelluksen on turvauduttava sivulta löytyviin muihin tietoihin, kuten <title>-elementtiin tai ensimmäiseen kuvaan, ja valinta riippuu sovelluksesta. Siksi sama linkki voi näyttää kunnollista yhdessä paikassa ja rikkinäiseltä seuraavassa. Korjaus on ilmoittaa neljä pakollista tagia ja kuvaus jokaiselle sivulle, jonka odotat ihmisten jakavan, ei vain etusivulle. Tuotesivu, joka jaetaan etusivun tageilla, näyttää etusivun kortin.

Syy 2: kuvan osoite on suhteellinen

Tämän huomaa helposti väärin, koska sivu näyttää kunnolliselta omassa selaimessasi. content="/images/og.jpg" toimii selaimessa, joka on jo sivustollasi, mutta robotti on sivustosi ulkopuolella. Kirjoita koko osoite alkaen https:// ja domainisi. Sama koskee og:url-tagia.

Syy 3: kuva on väärän kokoinen tai muotoinen

Jokainen alusta kertoo, mitä se haluaa, ja kaikki kolme ovat samaa mieltä leveästä kuvasta:

• LinkedIn kertoo oppaassaan verkkosivun jaettavaksi tekemisestä, että kuvan pitää olla vähintään 1200 × 627 pikseliä, suositeltu suhde 1.91:1 ja enintään 5 MB.
• Metan jakamisen parhaat käytännöt suosittelevat vähintään 1080 pikseliä leveitä kuvia korkean resoluution näytöille ja vähintään 600 leveitä kuvia kuvalinkkimainosten näyttämiseen.
• X:n suuri kuvakortti tukee 2:1-suhdetta 300 × 157 pikselistä aina 4096 × 4096 pikseliin asti, alle 5 MB, muodoissa JPG, PNG, WEBP tai GIF, eikä tue SVG:tä, kehittäjädokumentaation mukaan (alkuperäinen sivu ohjaa nyt eteenpäin, joten tämä linkki kulkee Internet Archiven kautta).

Yksi koko riittää kaikille kolmelle: 1200 × 630. Se täyttää LinkedInin 1200 × 627 minimin, on leveämpi kuin Metan 1080 ja sen suhde on 1200 ÷ 630 = 1.905, eli 5 %:n sisällä X:n 2:1-suhteesta. Neliö tai pystysuuntainen kuva leikataan leveäksi kortiksi, joten pidä tärkeä osa keskellä. Kuvasuhdelaskuri näyttää, mitä keskeltä leikkaus säilyttää.

Ilmoita koko myös tageissa. Meta pyytää og:image:width- ja og:image:height-tagit, jotta sen robotti voi piirtää kuvan heti sen sijaan, että lataisi ja käsittelisi sen ensin. Webmaster-opas sanoo asian yksinkertaisesti: määritä korkeus ja leveys, jotta kuva latautuu oikein jo ensimmäisellä jakokerralla.

Syy 4: JavaScript lisää tagit

Jotkin sivurakentajat ja yksisivuiset sovellukset lisäävät meta-tagit sivun latauduttua, selaimessa. Palvelimesi lähettämää HTML:ää lukeva robotti ei ehkä koskaan aja tuota koodia, joten se ei näe tageja. Tarkista sivun lähdekoodi (Näytä lähdekoodi, ei tarkastelija, joka näyttää sivun skriptien ajamisen jälkeen). Jos tagit eivät ole lähdekoodissa, robotti ei todennäköisesti myöskään näe niitä. Korjaus kuuluu sivustosi asetuksiin tai palvelinpuolen pohjaan.

Syy 5: erikoismerkit rikkoivat tagin

Otsikko, jossa on lainausmerkit, kuten The "only" linen you need, katkaisee content="..."-attribuutin aikaisin, ja loppu otsikosta katoaa. Attribuutin sisällä merkit pitää escapoida: " muuttuu muotoon ", & muuttuu muotoon & ja < muuttuu muotoon <. Selaimet ja robotit muuntavat ne takaisin alkuperäisiksi merkeiksi, kun ne lukevat tagin. Generaattori tekee tämän puolestasi, ja se on puoli syy käyttää sellaista.

Syy 6: sovellus muisti vanhan version

Korjasit tagit, jaoit uudelleen ja vanha kortti on yhä siellä. Se on välimuisti. Sovellukset tallentavat keräämänsä tiedot ja käyttävät niitä uudelleen, ja molemmat suuret verkostot antavat työkalun tuoreen näkymän pyytämiseen:

• Facebook: liitä URL Metan Jakamisen virheenkorjaajaan. Metan webmaster-opas kertoo, että se näyttää mitkä tagit robotti keräsi, mahdolliset virheet ja varoitukset, ja käynnistää uuden keräyksen. Metan parhaat käytännöt lisäävät, että kerätty sisältö päivittyy muuten standardisti 24 tunnin jaksoissa.
• LinkedIn: aja URL Post Inspectorin läpi. LinkedInin ohjesivu kertoo rajoituksen selvästi: päivitys muuttaa esikatselun vain uusille julkaisuille. URL:n jo sisältävät julkaisut säilyttävät vanhan.

Tämä LinkedIn-huomautus kannattaa muistaa ennen lanseerausta. Tarkista esikatselu ennen ensimmäisen julkaisun lähettämistä, koska vanhaa julkaisua ei voi korjata korjaamalla sivua.

twitter:card-tagi: yksi rivi, ei neljää

X lukee myös Open Graphia. Sen korttien merkintäviite listaa varajärjestyksen jokaiselle tagille: twitter:title palautuu og:titleiin, twitter:description og:descriptioniin, twitter:image og:imageiin ja twitter:image:alt og:image:altiin. Kaikkea ei siis tarvitse toistaa. Ainoa rivi, joka kannattaa lisätä, on twitter:card: summary_large_image koko leveyden kuvalle tai summary pienelle neliökuvalle. Jos jätät sen pois, sama viite kertoo, että X saattaa näyttää pienen yhteenvetokortin, ja siksi iso kuva joskus näkyy pienoiskuvana. Sama viite rajoittaa otsikon 70 merkkiin, kuvauksen 200 merkkiin ja vaihtoehtoisen tekstin 420 merkkiin.

Viiden minuutin tarkistus ennen lanseerausta

1. Näytä sivun lähdekoodi ja etsi og:-tagit. Kaikki neljä pakollista sekä kuvaus.
2. Tarkista, että og:image ja og:url alkavat https://-osoitteella.
3. Avaa kuvan osoite yksinään selaimessa. Sen pitää latautua kokoon 1200 × 630 tai lähelle sitä.
4. Liitä URL Jakamisen virheenkorjaajaan ja Post Inspectoriin ja lue kortit.
5. Vasta sitten jaa.

Missä Hermoso sopii

Hermoso on tekoälypohjainen markkinointiagentti: se tutkii markkinoillasi jo toimivia mainoksia, tekee brändiisi sopivia kuva- ja videomainoksia, ajastaa julkaisut omille tileillesi ja ajaa maksettuja kampanjoita omilla mainostileillesi. Hyvä linkkiesikatselu tekee näistä julkaisuista klikkauksen arvoisia. Hermoso toimii verkkosovelluksessa tai Claudessa, ChatGPT:ssä ja Cursorissa MCP-palvelimensa kautta.

Usein kysyttyä

Miksi linkkini ei näytä kuvaa Facebookissa tai LinkedInissä?

Yleensä og:image-tagi puuttuu, käyttää suhteellista polkua täyden https://-osoitteen sijaan tai osoittaa liian pieneen kuvaan. LinkedIn vaatii vähintään 1200 × 627 pikseliä. Korjauksen jälkeen aja URL Metan Jakamisen virheenkorjaajan tai LinkedInin Post Inspectorin läpi, jotta ne hakevat sen uudelleen.

Minkä kokoinen Open Graph -kuvan pitää olla?

1200 × 630 pikseliä toimii suurissa verkostoissa. Se täyttää LinkedInin 1200 × 627 minimin suhteella noin 1.91:1, on leveämpi kuin Metan suosittelemat 1080 pikseliä ja on lähellä X:n tukemaa 2:1-suhdetta suurille kuvakorteille.

Miten päivitän LinkedInin linkkiesikatselun?

Korjaa tagit sivulla ja syötä URL LinkedInin Post Inspectoriin. Päivitetty esikatselu koskee vain uusia julkaisuja. URL:n jo sisältävät julkaisut säilyttävät vanhan esikatselun.

Tarvitsenko twitter:-tageja, jos minulla on og:-tagit?

Vain twitter:card. X palautuu og:title-, og:description-, og:image- ja og:image:alt-tageihin, kun twitter:-versiot puuttuvat.