Open Graph meta-merkjagerð

Open Graph-merki eru litlir HTML-kóðabútar sem ráða því hvernig síðan þín lítur út þegar einhver deilir henni á Facebook, LinkedIn, Slack, Discord eða X (Twitter). Fylltu út titil, lýsingu, vefslóð, mynd og nokkra valkosti hér fyrir neðan, fylgstu með því hvernig forskoðun deilingarspjaldsins uppfærist samstundis, og afritaðu síðan <meta>-merkin sem búin eru til beint inn í <head> síðunnar þinnar. Allt gerist í vafranum þínum — engu er skilað til netþjóns.

Hvað er þetta verkfæri?

Open Graph er samskiptastaðall, upphaflega skapaður af Facebook, sem gerir hvaða vefsíðu sem er kleift að lýsa sjálfri sér með litlu safni af <meta property="og:..."> merkjum sem eru staðsett í <head> HTML-skjalsins. Þegar einhver límir tengilinn þinn inn í samfélagsforrit, spjallforrit eða skilaboðaforrit, les það forrit þessi merki til að byggja upp forskoðunarspjaldið — titil, lýsingu og smámynd — í stað þess að giska út frá efni síðunnar.

Twitter (X) notar skylt en aðskilið safn merkja, <meta name="twitter:...">, til að stýra sérstaklega hvernig forskoðun tengils lítur út á þeirra vettvangi. Flestar síður setja bæði: Open Graph-merki fyrir víðtæka samhæfni og Twitter Card-merki til að fínstilla forskoðunina á X (til dæmis með því að velja spjald með stórri mynd í stað lítils samantektarspjalds).

Án þessara merkja sýnir deildur tengill annaðhvort enga forskoðun, eða vettvangurinn reynir að giska á titil og mynd út frá hráu efni síðunnar — velur oft ranga fyrirsögn, tilviljanakennda mynd í textanum eða ekkert. Með því að stilla og:title, og:description og og:image sérstaklega færðu fulla stjórn á því hvernig efnið þitt birtist áður en nokkur smellir á það.

Af hverju að nota það?

Lifandi forskoðun — sjáðu nákvæmlega hvernig deilingarspjaldið mun líta út á meðan þú skrifar, áður en þú birtir nokkuð.
Býr til bæði Open Graph-merki (og:title, og:description, og:image, og:url, og:type, og:site_name) og Twitter Card-merki í einu.
Nær yfir þau svæði sem vettvangar lesa í raun og veru: titil, lýsingu, kanónískan vefslóð, mynd, nafn síðu, tegund efnis og stíl Twitter-spjaldsins.
Keyrir alfarið í vafranum þínum — titillinn, lýsingin og vefslóðirnar þínar yfirgefa aldrei vafrann þinn.
Ókeypis, engin innskráning, engin takmörkun — afritaðu úttakið og límdu það inn í HTML-kóðann þinn.

Hvernig á að nota það

Sláðu inn titil síðunnar þinnar og stutta lýsingu (stefndu á undir ~60 stafi fyrir titilinn, ~155–160 fyrir lýsinguna).
Sláðu inn kanónískan vefslóð síðunnar og heildar vefslóð forskoðunarmyndarinnar (myndaslóðir verða að vera fullkomlega tilgreindar, t.d. https://example.com/image.jpg, ekki afstæð slóð).
Stilltu að vild nafn síðunnar, veldu og:type (website, article, product, profile, video, music), og veldu tegund Twitter Card (summary eða summary_large_image).
Skoðaðu lifandi forskoðunarspjaldið til að staðfesta að titill, lýsing og mynd passi vel saman.
Smelltu á „Afrita“ og límdu <meta>-merkin sem búin voru til inn í <head> síðunnar þinnar, á undan lokandi </head> merkinu.

Dæmi

Inntak

Titill: „10 ókeypis forritunartól sem þú munt raunverulega nota“
Lýsing: „Vandlega valinn listi af vafratengdum verkfærum fyrir JSON, regex, UUID og fleira — engin uppsetning nauðsynleg.“
Vefslóð: https://example.com/blog/dev-tools
Mynd: https://example.com/images/dev-tools-cover.jpg

Úttak

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Aðeins þau svæði sem þú fyllir út eru tekin með í úttakinu, þannig að ef þú skilur nafn síðunnar eftir autt sleppir úttakið einfaldlega og:site_name.

Algeng mistök sem ber að forðast

Alveg vantandi og:image — án þess sýna flestir vettvangar annaðhvort enga forskoðunarmynd eða falla til baka í tilviljanakennda mynd sem er sótt af síðunni, sem lítur venjulega út fyrir að vera bilað og ófagmannlegt.
Notkun afstæðrar myndaslóðar eins og /images/cover.jpg í stað fullrar vefslóðar eins og https://example.com/images/cover.jpg — samfélagsvefskriðlar geta yfirleitt ekki leyst afstæðar slóðir.
Rangt myndhlutfall — ferningslaga eða lóðrétt mynd sker sig klaufalega niður þegar vettvangar þvinga hana í 1,91:1 lárétta rammann; hannaðu deilingarmyndina þína alltaf nálægt 1200×630.
Titlar eða lýsingar sem styttast — haltu og:title undir ~60 stöfum og og:description undir ~155–160 stöfum svo þeir séu ekki skornir niður með þremur punktum á flestum vettvöngum.
Að gleyma að uppfæra vistaðar forskoðanir — eftir að hafa breytt og-merkjum á virkri síðu getur gamla forskoðunin haldist í skyndiminni Facebook eða LinkedIn þar til þú þvingar handvirkt fram nýja skönnun með villuleitartólum þeirra.

Hvar hvert merki er notað

og:title, og:description og og:image eru merkin þrjú sem næstum allir vettvangar lesa til að byggja upp forskoðun. og:url segir vefskriðlum hvaða kanónískan tengil eigi að tengja við forskoðunina, sem skiptir máli ef sama efnið er aðgengilegt í gegnum margar vefslóðir. og:site_name sýnir lítinn merkimiða (eins og nafn útgáfunnar eða vörumerkisins) fyrir ofan titilinn á sumum vettvöngum, svo sem Facebook.

og:type breytir því hvaða tegund hlutar síðan táknar fyrir vefskriðla sem styðja auðugra hlutalíkan Open Graph — til dæmis opnar article fyrir og:article:published_time og og:article:author á vettvöngum sem lesa þau, þótt flestar samfélagsforskoðanir hunsi þessi aukasvæði og noti aðeins grunnþrenninguna titil/lýsingu/mynd.

twitter:card stýrir útlitinu sérstaklega á X: summary sýnir litla ferkantaða smámynd við hlið textans, á meðan summary_large_image sýnir mynd í fullri breidd fyrir ofan textann — seinni kosturinn er nánast alltaf betri fyrir efni með merkingarbæra forsíðumynd.

Algengar spurningar

Hversu stór ætti og:image myndin mín að vera?

1200×630px er ráðlögð stærð — nógu stór fyrir skjái með mikla pixlaþéttni og passar við um það bil 1,91:1 myndhlutfallið sem Facebook, LinkedIn og X skera myndina niður í. Haltu skránni undir 5–8MB, notaðu JPG eða PNG, og gakktu úr skugga um að vefslóð myndarinnar sé fullkomin heildarslóð, ekki afstæð slóð — flestir vefskriðlar geta ekki leyst afstæðar myndaslóðir rétt.

Af hverju birtist forskoðunin mín ekki þegar ég deili tenglinum?

Algengustu orsakirnar eru: vantandi og:image, afstæð frekar en heildar vefslóð myndar, vefskriðull sem er lokaður af robots.txt, eða vettvangurinn sýnir vistaða útgáfu af gamalli forskoðun. Bæði Facebook og LinkedIn geyma skannaðar forskoðanir ötullega í skyndiminni — notaðu Sharing Debugger Facebook eða Post Inspector LinkedIn til að þvinga fram nýja skönnun eftir að þú uppfærir merkin þín.

Hver er munurinn á og:-merkjum og twitter:-merkjum?

og:-merki (og:title, og:description, og:image o.s.frv.) tilheyra Open Graph-staðlinum, sem Facebook, LinkedIn, Slack, Discord, WhatsApp og flestir aðrir vettvangar lesa. twitter:-merki eru eigið snið Twitter/X. Ef twitter:title eða twitter:image vantar, notar X sjálfkrafa samsvarandi og:-merki — en með því að stilla bæði sérstaklega færðu meiri stjórn, þar á meðal möguleikann á að velja summary_large_image fyrir stóra forskoðunarmynd.

Hvaða og:type ætti ég að nota?

„website“ er örugga sjálfgefna gildið fyrir flestar síður, þar á meðal forsíður og almennt efni. Notaðu „article“ fyrir bloggfærslur og fréttagreinar (það opnar viðbótarmerki sem eru sérstök fyrir greinar, eins og birtingartíma), „product“ fyrir vefverslunarsíður og „profile“ fyrir persónulegar síður eða notandasnið. Tegundin hefur aðallega áhrif á hvaða viðbótar Open Graph-eiginleikar eru gildir, ekki hvernig grunn-forskoðunarspjaldið lítur út.

Vistar eða sendir þetta tól gögnin mín eitthvert?

Nei. Öll gerðin fer fram á staðnum í vafranum þínum með venjulegu JavaScript. Ekkert sem þú skrifar er sent, skráð eða vistað — að loka flipanum hreinsar allt út.