Open Graph -esikatselu

Mika on Open Graph -esikatselutyokalu?

Open Graph (OG) -tagit ovat HTML-meta-tageja, jotka hallitsevat verkkosivusi ulkoasua sosiaalisessa mediassa (Facebook, LinkedIn, WhatsApp jne.). Ne maarittavat otsikon, kuvauksen, kuvan ja URL:n, jotka naytetaan kun joku jakaa sivusi linkin.

Ilman asianmukaisia OG-tageja sosiaalisen median alustat yrittaevat arvata otsikon ja kuvan sivun sisallosta — usein huonoin tuloksin. Tama tyokalu nayttaa tarkalleen, milta sivusi jaettu linkki tulee nayttamaan.

Valttamattomat Open Graph -tagit

• og:title — esikatselukortissa nakyva otsikko. Pida alle 60 merkkia.
• og:description — lyhyt yhteenveto sivun sisallosta. Pida alle 155 merkkia.
• og:image — esikatselukuva. Suositeltu koko: 1200x630 pikselia parhaalle naekymaelle kaikilla alustoilla.
• og:url — sivun kanoninen URL.
• og:type — sisaltotyyppi (website, article, product jne.).

Tyokalun kayttohje

Syota URL ja tyokalu hakee sivun, poimi kaikki Open Graph- ja Twitter Card -tagit ja nayttaa esikatselun siita, milta sivu nayttaa jaettuna Facebookissa, Twitterissa ja LinkedInissa.

Twitter Cards vs. Open Graph

Twitter kayttaa omia meta-tagejaan (twitter:card, twitter:title, twitter:description, twitter:image). Jos Twitter-tageja ei ole, Twitter kayttaa OG-tageja varavaihtoehtona. Paras kaytanto on asettaa molemmat, jotta sinulla on taysi hallinta jokaisella alustalla.

Käytännön esimerkki

Aseta og:title 55 merkin otsikoksi, og:description 155 merkin tiivistelmäksi ja og:image 1200x630 pikselin kuvaksi, ja liitä sitten URL nähdäksesi esikatselukortin. Tähän kuvasuhteeseen (1,91:1) Facebook ja LinkedIn rajaavat, joten keskitetty aihe pysyy näkyvissä. Jos og:image puuttuu, alustojen on arvattava, ja ne nappaavat usein logon tai sivun ensimmäisen kuvan, mikä näyttää jaetussa syötteessä harvoin tarkoitukselliselta.

Yleisiä virheitä

Yleisin virhe on liian pieni kuva — alustat haluavat vähintään 1200x630, ja mikä tahansa alle 600x315 voi näkyä pienenä pikkukuvana tai jäädä pois. Suhteelliset kuvaosoitteet ovat toinen ansa: Open Graph vaatii absoluuttisen https://-osoitteen, koska kaavin toimii ulkoisella palvelimella. Lopuksi muutokset tallentuvat välimuistiin, joten käytä kunkin alustan virheenkorjaustyökalua pakottaaksesi uudelleenluvun tunnisteiden muokkaamisen jälkeen.

Usein kysytyt kysymykset

Miksi jakamisesikatselu ei paivity OG-tagien muuttamisen jalkeen?

Sosiaalisen median alustat valimuistavat OG-datan aggressiivisesti. Facebook vaalimuistaa noin 30 paivaa. Kayta Facebookin Sharing Debugger -tyokalua tai Twitterin Card Validator -tyokalua pakottaaksesi uudelleenhaku muutosten jalkeen.

Mika kuvakoko OG:lle sopii parhaiten?

Suositeltu koko on 1200x630 pikselia (1.91:1 kuvasuhde) parhaalle nakymaelle kaikilla alustoilla. Minimikoko on 600x315. Alle 200x200 pikselin kuvia ei yleensa nayteta esikatselussa.

Tarvitsenko Twitter Card -tunnisteita, jos minulla on jo Open Graph?

Twitter turvautuu Open Graph -tunnisteisiin otsikon, kuvauksen ja kuvan osalta, joten perusjakaminen toimii ilman niitä. Lisää twitter:card (yleensä summary_large_image), kun haluat suuremman asettelun tai Twitter-kohtaisen määrityksen twitter:site-tunnisteella. Muuten pelkkä Open Graph riittää.