OpenGraph: og:title, og:description ja og:image
Määritä, miltä sivusi näyttää jaettaessa sosiaalisissa verkostoissa
OpenGraph: og:title, og:description ja og:image on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mikä OpenGraph on?
OpenGraph on Facebookin esittelemä metadataprotokolla, jonka avulla mikä tahansa sivu voi kuvata, miltä sen pitäisi näyttää sosiaalisessa palvelussa jaettuna. Tagit sijaitsevat <head>-elementissä <meta property="og:..." content="...">-pareina, ja kaikki suuret sosiaaliset verkostot noutavat ne.
Keskeiset tagit
Käytännössä vaaditut neljä tagia ovat og:title, og:description, og:image ja og:url. Jos yksikin niistä puuttuu, jaettu kortti voi näyttää epäsiistiltä tai, mikä vielä pahempaa, siinä ei ehkä ole esikatselua lainkaan, jolloin käyttäjät ohittavat sen helposti.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
Jaetun kortin otsikko. Pitäkää se alle noin 60 merkin pituisena, jotta se mahtuu yhdelle riville eikä sosiaalinen verkosto katkaise sitä. Mukauttakaa se sivun <title>-elementin mukaiseksi, mutta voitte optimoida sen klikkausprosenttia varten.
og:description
Otsikon alla näytettävä yhden tai kahden virkkeen tiivistelmä. Tavoitelkaa 120–160 merkkiä — sen on oltava riittävän pitkä houkutellakseen lukemaan mutta tarpeeksi lyhyt näkyäkseen kokonaan kaikilla alustoilla. Välttäkää klikkiotsikoita; rehelliset kuvaukset tuottavat pitkällä aikavälillä enemmän sitoutumista.
og:image
Pääkuva. Käyttäkää 1200x630 pikselin JPG- tai PNG-kuvaa (alle noin 5 Mt). Käyttäkää aina absoluuttista URL-osoitetta — suhteelliset URL-osoitteet eivät toimi, koska noutajalla ei ole käsitettä "tästä sivusta". Antakaa og:image:width- ja og:image:height-arvot, jotta esikatselun luonnin aikana ei tarvita ylimääräistä pyyntöä.
og:url
Sivun kanoninen URL-osoite. Asettakaa se, vaikka sivulla olisi jo <link rel="canonical"> — jotkin noutajat suosivat OG-tagia. Poistakaa seuranta-parametrit, jotta jaetut URL-osoitteet eivät monistu sosiaalisen alustan tietokannassa moniksi "eri" sivuiksi.
og:type
Kertoo alustalle, minkä tyyppistä sisältöä tämä on: "website", "article", "product", "video.movie", "book" ja niin edelleen. Article on yleisin valinta blogikirjoituksille, ja se ottaa käyttöön lisätageja, kuten article:published_time ja article:author.
og:locale
Sisällön BCP-47-aluekoodi (esimerkiksi "en_US", "tr_TR"). Yhdessä og:locale:alternate-arvon kanssa se kertoo verkostolle, millä muilla kielillä sivu on saatavilla. Tämän perusteella Facebook päättää, käännetäänkö esikatselu.
og:site_name
Julkaisusivuston näyttönimi. Jotkin verkostot näyttävät sen kortissa alaotsikkona. Pitäkää nimi lyhyenä ja yhdenmukaisena kaikilla sivuilla, jotta brändi näyttää samalta riippumatta siitä, mikä artikkeli jaetaan.
Korttien testaaminen
Käyttäkää Facebookin Sharing Debuggeria ja LinkedInin Post Inspectoria hakeaksenne sivun sellaisena kuin noutaja sen näkee, tarkastellaksenne jäsennettyjä tageja ja päivittääksenne välimuistissa olevan esikatselun. Kun uusi og:image on otettu käyttöön, sivu on noudettava uudelleen, tai käyttäjät näkevät vanhan kuvan vielä päivien ajan.
Yleiset sudenkuopat
Palvelimella renderöidyt tagit ovat pakollisia — useimmat noutajat eivät suorita JavaScriptiä, joten Reactin asiakaspuolella lisäämät OG-tagit eivät näy niille. Renderöikää tagit alkuperäiseen HTML:ään, mieluiten SSR:n tai SSG:n avulla, tai jaetut kortit jäävät aina yleisluontoisiksi.
Tietotesti
Miksi og:image-tagin on käytettävä absoluuttista URL-osoitetta suhteellisen polun sijaan?
Yhteenveto
OpenGraph-tagit (og:title, og:description, og:image absoluuttisella URL-osoitteella, og:url, og:type, og:locale, og:site_name) määrittävät, miltä jokainen sivu näyttää jaettuna. Renderöikää ne palvelinpuolella, pitäkää otsikot alle 60 merkin ja kuvaukset noin 150 merkin pituisina, käyttäkää 1200x630-kokoisia kuvia ja testatkaa kokonaisuus Facebookin Sharing Debuggerilla ennen julkaisua.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”OpenGraph: og:title, og:description ja og:image” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “OpenGraph: og:title, og:description ja og:image”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”OpenGraph: og:title, og:description ja og:image”?
Määritä, miltä sivusi näyttää jaettaessa sosiaalisissa verkostoissa Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”OpenGraph: og:title, og:description ja og:image”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- OpenGraph: og:title, og:description ja og:image
- Twitter Card -metatunnisteet
- JSON-LD:n rakenteisten tietojen perusteet
- Hreflang kansainvälisille sivuille