Jakokortit: Open Graph -tagit ja jakokuva

Mikä linkin esikatselu on

Kun joku jakaa linkin sosiaalisessa verkostossa tai pikaviestimessä, alusta lukee sivun ja rakentaa pienen kortin: kuvan, otsikon, lyhyen tekstin ja verkkotunnuksen. Useimmat alustat lukevat tätä varten Open Graph -protokollan tageja, jotka ovat sivun head-osan meta-elementtejä. X, entinen Twitter, lukee myös omia tagejaan, jotka alkavat twitter:. Jokainen alusta suunnittelee korttinsa itse ja päättää, kuinka paljon tekstiä se näyttää. Sinä päätät, mitä sivu kertoo alustoille.

Perustagit

Sivustolla ogp.me julkaistu Open Graph -protokolla nimeää neljä ominaisuutta, jotka jokaisella sivulla pitäisi olla: og:title, og:type, og:image ja og:url. og:url on sivun kanoninen osoite. Valinnaisia mutta hyödyllisiä ovat og:description, og:site_name ja og:locale eli tagien kieli ja alue, esimerkiksi de_DE.

<meta property="og:title" content="Summer sale: all mugs reduced">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Six blue mugs on a wooden table">
<meta property="og:description" content="Until 31 August: lower prices on mugs and plates.">
<meta property="og:site_name" content="Example Shop">
<meta name="twitter:card" content="summary_large_image">

Kirjoita jokainen osoite kokonaan, https://-alkuisena. Protokolla määrittelee osoitteen URL-osoitteeksi, joka käyttää muotoa http:// tai https://, joten polku kuten /img/sale.jpg ei ole kelvollinen arvo. og:url-tagin pitäisi vastata sivun kanonista linkkiä. Jos tagi esiintyy kahdesti eri arvoilla, protokolla antaa etusijan ensimmäiselle.

Jakokuva

Useimmat esikatselut näyttävät kuvan leveänä. Yleisesti suositellaan kuvasuhdetta noin 1,91 : 1, esimerkiksi 1200 × 630 pikseliä, joka sopii useimpiin kortteihin ilman rajausta. Neliönmuotoisia kuvia rajataan usein ylhäältä ja alhaalta, joten pidä tärkeä sisältö keskellä. Google Discoveria varten Google suosittelee vähintään 1200 pikselin levyisiä kuvia, suurta esikatselua, joka sallitaan asetuksella max-image-preview:large, sekä og:image-tagilla tai schema.org-merkinnällä asetettua kuvaa. Google neuvoo myös välttämään yleisiä kuvia, kuten sivuston logoa.

og:image:width ja og:image:height ilmoittavat kuvan koon pikseleinä. og:image:alt kuvaa, mitä kuvassa on, eikä se ole kuvateksti. Protokollan mukaan sivun, jolla on og:image, pitäisi määrittää myös og:image:alt.

Otsikko ja kuvaus

og:title voi poiketa title-elementistä. Siinä ei tarvita verkkosivuston nimeä, koska og:site_name kertoo sen. Alustat lyhentävät pitkät tekstit omaan pituuteensa, joten laita tärkeät sanat alkuun. Open Graph -tagit merkitsevät myös sosiaalisten verkostojen ulkopuolella. Google mainitsee og:title-tagin sisällön yhtenä hakutulosten otsikkolinkkien lähteistä, ottaa sivuston nimessä huomioon og:site_name-tagin ja luettelee og:image-tagin yhtenä tapana määrittää ensisijainen kuva.

Tagit X:lle

twitter:card-tagi valitsee kortin tyypin. Arvo summary_large_image pyytää suurta, leveää kuvaa, summary pientä. Jos sivullasi on jo Open Graph -tagit, twitter:card-tagin lisääminen riittää usein. X:n kehittäjäsivuja ei voitu lukea tätä opasta varten, joten tarkista ajantasaiset säännöt sieltä ennen kuin luotat johonkin yksityiskohtaan.

Yksi kortti sivua kohti

Monet verkkosivustot asettavat saman otsikon ja kuvan jokaiselle sivulle, usein teeman kautta. Silloin jokainen jaettu linkki näyttää samalta. Anna jokaiselle tärkeälle sivulle oma og:title, og:description ja og:image: tuotesivulle tuotekuva, artikkelille sen pääkuva. og:type-tagissa protokolla käyttää muun muassa arvoa website yleiselle sivulle ja article artikkelille. Verkkokauppa- tai sisällönhallintajärjestelmä voi täyttää nämä tagit automaattisesti kunkin sivun otsikosta, tiivistelmästä ja pääkuvasta. Tarkista muutoksen jälkeen yksi sivu jokaisesta sivupohjasta.

Miksi esikatselu ei muutu

Monet alustat tallentavat kortin, kun ne ovat kerran rakentaneet sen. Jos muutat kuvaa tai otsikkoa myöhemmin, ihmiset saattavat nähdä vanhan kortin vielä jonkin aikaa. Uuden kuvan uusi tiedostonimi auttaa, koska alusta näkee silloin uuden osoitteen. Jotkin alustat tarjoavat työkalun, joka hakee sivun uudelleen.

Ennen kuin jaat sivun

• Ovatko og:title, og:type, og:image ja og:url mukana, ja onko og:url kanoninen osoite?
• Onko jokainen osoite täydellinen, https://-alkuinen?
• Onko kuva tarpeeksi leveä, latautuuko se ja onko tärkeä sisältö keskellä?
• Onko og:image:alt, og:image:width ja og:image:height asetettu?
• Onko twitter:card-tagi olemassa, ja onko otsikko tarpeeksi lyhyt?

Työskentele Do4U:n kanssa

Jakokortin tarkistus näyttää, miltä sivu näyttää, kun sen linkki jaetaan, ja tarkistaa esikatselun taustalla olevat tagit. Syötät yhden osoitteen. Do4U lukee sivun ja sen jakokuvan alun. Koodi kerää Open Graph -tagit, Twitter/X-korttitagit ja varavaihtoehdot eli otsikon, metakuvauksen ja ensimmäisen kuvan sekä kanonisen linkin ja kielen. Se lukee kuvan todellisen muodon ja koon tiedostosta ja vertaa niitä tageihin. Saat neutraalin esikatselun, taulukon kaikista tageista, havainnot lyhyine perusteluineen ja kopioitavat tagiehdotukset. Tageja, jotka sivu asettaa vain JavaScriptillä, ei nähdä. Tekoälyä ei käytetä, ja tarkistus on ilmainen, päivittäisellä rajalla.

Do4U löytää vihjeitä, sinä tarkistat ja päätät. Esikatselu on neutraali luonnos: sen, miten alusta näyttää linkin, päättää alusta.