"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "johdanto", "hProperties": { "id": "johdanto" } }, "depth": 2, "value": "Johdanto" }, { "data": { "id": "etkö-ole-koskaan-kuullut-verkkosivuston-metadatasta", "hProperties": { "id": "etkö-ole-koskaan-kuullut-verkkosivuston-metadatasta" } }, "depth": 2, "value": "Etkö ole koskaan kuullut verkkosivuston metadatasta?" }, { "data": { "id": "open-graph--metadatan-asettaminen", "hProperties": { "id": "open-graph--metadatan-asettaminen" } }, "depth": 2, "value": "Open Graph -metadatan asettaminen" }, { "data": { "id": "twitter-korttien-metadatan-asettaminen", "hProperties": { "id": "twitter-korttien-metadatan-asettaminen" } }, "depth": 2, "value": "Twitter-korttien metadatan asettaminen" }, { "data": { "id": "lopputerveiset", "hProperties": { "id": "lopputerveiset" } }, "depth": 2, "value": "Lopputerveiset" }]; const readingTime = { "minutes": 2, "words": 665, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", img: "img", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "johdanto", children: ["Johdanto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#johdanto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Kun jaat linkin verkkosivustollesi sosiaalisessa mediassa, haluat sen näyttävän hyvältä. Sen sijaan, että näyttäisit vain tavallisen linkin, haluat näyttää kauniin esikatselun, jossa on kaikki tarvittava metadata kuten otsikko, kuvaus ja kuva. Tässä kohtaa Open Graph ja Twitter (nykyään X) -korttien metadata astuvat kuvioihin." }), "\n", _jsxs(_components.p, { children: ["Tässä artikkelissa näytämme, kuinka asetat Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") ja Twitter-korttien metadatan verkkosivustollesi. Näytämme myös, kuinka voit testata metadataasi varmistaaksesi, että se näyttää hyvältä sosiaalisessa mediassa."] }), "\n", _jsxs(_components.h2, { id: "etkö-ole-koskaan-kuullut-verkkosivuston-metadatasta", children: ["Etkö ole koskaan kuullut verkkosivuston metadatasta?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#etkö-ole-koskaan-kuullut-verkkosivuston-metadatasta", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Kun ihminen vierailee verkkosivustolla, hän näkee selaimen näyttämän sisällön. Mutta kun botti (kuten hakukoneen indeksoija tai sosiaalisen median skreipperi) vierailee verkkosivustolla, se näkee vain raaka-HTML:n. Verkkosivuston metadata astuu mukaan tarjoamaan rakenteellista tietoa verkkosivustosta botille, jota se voi käyttää rakenteellisen tuloksen, kuten esikatselukortin, luomiseen." }), "\n", _jsxs(_components.p, { children: ["Jos napsautat verkkosivustoa hiiren oikealla painikkeella ja valitset \"Näytä sivun lähdekoodi\", näet verkkosivuston raaka-HTML:n. Metadata sisällytetään yleensä HTML:n ", _jsx(_components.code, { children: "" }), "-osioon, ja se näyttää suunnilleen tältä:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "Yllä oleva koodi on itsestäänselvä: verkkosivuston otsikko on \"Sivustoni\" ja kuvaus on \"Tämä on minun sivustoni.\"." }), "\n", _jsxs(_components.p, { children: ["Saatat huomata ", _jsx(_components.code, { children: "og:" }), "-etuliitteen metadatassa, joka tarkoittaa ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), ":ä. Open Graph on protokolla, jonka Facebook on kehittänyt tarjoamaan rakenteellista tietoa verkkosivustosta. Myös Twitterillä (nykyään X) on oma metadataprotokollansa, jota kutsutaan Twitter-korteiksi."] }), "\n", _jsxs(_components.h2, { id: "open-graph--metadatan-asettaminen", children: ["Open Graph -metadatan asettaminen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#open-graph--metadatan-asettaminen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Yleisimpiä Open Graph -metadatamerkintöjä ovat:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": Verkkosivuston nimi."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": Nykyisen sivun otsikko."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": Lyhyt kuvaus verkkosivustosta."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": Näytettävän kuvan URL-osoite."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": Verkkosivuston ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "kanoninen URL" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": Verkkosivuston tyyppi (esim. verkkosivusto, artikkeli, video)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Ero ", _jsx(_components.code, { children: "og:title" }), "- ja ", _jsx(_components.code, { children: "og:site_name" }), "-merkintöjen välillä on, että ", _jsx(_components.code, { children: "og:title" }), " on nykyisen sivun otsikko (esim. blogikirjoituksen otsikko), kun taas ", _jsx(_components.code, { children: "og:site_name" }), " on verkkosivuston nimi (esim. blogin nimi). Jos tarkistat tämän sivun lähdekoodin, näet seuraavan Open Graph -metadatan:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Koska olemme asettaneet ", _jsx(_components.code, { children: "og:type" }), "-arvoksi ", _jsx(_components.code, { children: "article" }), ", voimme lisätä lisämetatietoja, kuten kirjoittajan ja julkaisupäivän. Esimerkiksi jos haluat lisätä tunnisteet blogikirjoitukselle, voit lisätä seuraavan metadatan:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Open Graph määrittää, että jos haluat lisätä useita arvoja, sinun tulisi käyttää useita ", _jsx(_components.code, { children: "" }), "-merkintöjä samalla ominaisuuden nimellä."] }), "\n", _jsxs(_components.p, { children: ["Kun olet lisännyt Open Graph -metadatan verkkosivustollesi, voit testata sen ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook Sharing Debugger" }), ":llä. Syötä vain verkkosivustosi URL-osoite ja napsauta \"Debug\". Jos metadatassa on ongelmia, debugger näyttää sinulle virheet."] }), "\n", _jsxs(_components.p, { children: ["Tässä on esimerkki blogikirjoituksestamme ", _jsx(_components.a, { href: "/when-should-i-use-jwts", children: "Milloin minun pitäisi käyttää JWT:itä?" }), " Facebook Sharing Debugger:ssä:"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/Screenshot_2024_08_24_at_15_29_16_min_34070c92c1.png", alt: "Facebook Debugger" }) }), "\n", _jsxs(_components.h2, { id: "twitter-korttien-metadatan-asettaminen", children: ["Twitter-korttien metadatan asettaminen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#twitter-korttien-metadatan-asettaminen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Twitter-kortit ovat samankaltaisia kuin Open Graph -metadata, mutta niillä on ", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "omat konventionsa" }), ". Twitter-kortteja on neljä tyyppiä:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Yhteenvetokortti: Kortti, jossa on otsikko, kuvaus ja pikkukuva." }), "\n", _jsx(_components.li, { children: "Yhteenvetokortti isolla kuvalla: Kortti, jossa on otsikko, kuvaus ja suuri kuva." }), "\n", _jsx(_components.li, { children: "Sovelluskortti: Kortti mobiilisovellusten mainostamiseen." }), "\n", _jsx(_components.li, { children: "Soittokortti: Kortti video- ja äänisisällölle." }), "\n"] }), "\n", _jsx(_components.p, { children: "Blogikirjoituksellemme käytämme yhteenvetokorttia isolla kuvalla. Blogikirjoituksen Twitter-korttien metadata näyttää tältä:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "Kaksi pääasiallista eroa Open Graph -metadatasta ovat:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "twitter:card" }), "-merkintä on pakollinen, ja se määrittää kortin tyypin."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "twitter:site" }), "-merkintä määrittää verkkosivuston Twitter-tilin."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Ennen oli saatavilla ", _jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Twitter Card Validator" }), ", mutta esikatseluominaisuus on siirretty Tweet Composeriin (se on kuitenkin parempi kuin ei mitään)."] }), "\n", _jsxs(_components.h2, { id: "lopputerveiset", children: ["Lopputerveiset", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lopputerveiset", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Open Graph- ja Twitter-korttien metadatan asettaminen verkkosivustollesi on helppoa ja hyödyllistä. Ihmiset rakastavat kuvia, ja kaunis esikatselukortti voi houkutella enemmän huomiota verkkosivustollesi. Onnea verkkosivustosi kanssa ja onnellista jakamista!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };