Open Graph meta tagu ģenerators

Open Graph tagi ir nelieli HTML fragmenti, kas nosaka, kā jūsu lapa izskatās, kad kāds to kopīgo Facebook, LinkedIn, Slack, Discord vai X (Twitter). Aizpildiet virsrakstu, aprakstu, URL, attēlu un dažas opcijas zemāk, vērojiet, kā kopīgošanas kartītes priekšskatījums atjaunojas nekavējoties, un kopējiet izveidotos <meta> tagus tieši savas lapas <head> sadaļā. Viss notiek jūsu pārlūkā — nekas netiek sūtīts uz serveri.

Kas ir šis rīks?

Open Graph ir protokols, ko sākotnēji izveidoja Facebook un kas ļauj jebkurai tīmekļa lapai aprakstīt sevi ar nelielu <meta property="og:..."> tagu kopu, kas atrodas HTML <head> sadaļā. Kad kāds ielīmē jūsu saiti sociālajā lietotnē, tērzēšanas klientā vai ziņojumapmaiņas rīkā, šī lietotne nolasa šos tagus, lai izveidotu priekšskatījuma kartīti — virsrakstu, aprakstu un sīktēlu — nevis minētu, balstoties uz lapas saturu.

Twitter (X) izmanto saistītu, bet atsevišķu tagu kopu, <meta name="twitter:...">, lai konkrēti kontrolētu, kā saites priekšskatījums izskatās šajā platformā. Lielākā daļa vietņu iestata abus: Open Graph tagus plašai saderībai un Twitter Card tagus, lai precizētu priekšskatījumu X (piemēram, izvēloties lielā attēla kartīti nevis mazu kopsavilkuma kartīti).

Bez šiem tagiem kopīgota saite vai nu vispār nerāda priekšskatījumu, vai arī platforma mēģina uzminēt virsrakstu un attēlu no lapas neapstrādātā satura — bieži izvēloties nepareizu virsrakstu, nejaušu tekstā iekļautu attēlu vai neko. Skaidra og:title, og:description un og:image iestatīšana dod jums pilnīgu kontroli pār to, kā jūsu saturs tiek pasniegts, pirms kāds noklikšķina.

Kāpēc to izmantot?

Tiešraides priekšskatījums — redziet tieši, kā izskatīsies kopīgošanas kartīte rakstīšanas laikā, pirms vēl kaut ko publicējat.
Vienā reizē ģenerē gan Open Graph tagus (og:title, og:description, og:image, og:url, og:type, og:site_name), gan Twitter Card tagus.
Aptver laukus, ko platformas patiešām nolasa: virsrakstu, aprakstu, kanonisko URL, attēlu, vietnes nosaukumu, satura veidu un Twitter kartītes stilu.
Darbojas pilnībā jūsu pārlūkā — jūsu virsraksts, apraksts un URL nekad nepamet jūsu pārlūku.
Bezmaksas, nav nepieciešama pieteikšanās, nav ierobežojumu — kopējiet rezultātu un ielīmējiet to savā HTML kodā.

Kā to lietot

Ievadiet savas lapas virsrakstu un īsu aprakstu (centieties, lai virsraksts būtu mazāks par ~60 rakstzīmēm, apraksts — ap ~155–160).
Ievadiet lapas kanonisko URL un priekšskatījuma attēla absolūto URL (attēlu URL jābūt pilnībā kvalificētiem, piemēram, https://example.com/image.jpg, nevis relatīvam ceļam).
Pēc izvēles iestatiet vietnes nosaukumu, izvēlieties og:type (website, article, product, profile, video, music) un Twitter Card veidu (summary vai summary_large_image).
Pārbaudiet tiešraides priekšskatījuma kartīti, lai pārliecinātos, ka virsraksts, apraksts un attēls kopā izskatās pareizi.
Noklikšķiniet uz "Kopēt" un ielīmējiet izveidotos <meta> tagus savas lapas <head> sadaļā, pirms aizverošā taga </head>.

Piemērs

Ievade

Virsraksts: "10 bezmaksas izstrādātāju rīki, kurus tiešām izmantosiet"
Apraksts: "Rūpīgi atlasīts pārlūkā balstītu rīku saraksts JSON, regulārajām izteiksmēm, UUID un citiem — instalēšana nav nepieciešama."
URL: https://example.com/blog/dev-tools
Attēls: https://example.com/images/dev-tools-cover.jpg

Izvade

<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" />

Rezultātā tiek iekļauti tikai jūsu aizpildītie lauki, tāpēc, atstājot vietnes nosaukumu tukšu, og:site_name vienkārši tiek izlaists no rezultāta.

Biežākās kļūdas, no kurām jāizvairās

Pilnīgi trūkst og:image — bez tā lielākā daļa platformu vai nu nerāda priekšskatījuma attēlu vispār, vai izmanto nejauši no lapas iegūtu attēlu, kas parasti izskatās salauzts un neprofesionāls.
Relatīva attēla ceļa, piemēram, /images/cover.jpg, izmantošana pilna URL vietā, piemēram, https://example.com/images/cover.jpg — sociālo tīklu rāpuļprogrammas parasti nespēj atrisināt relatīvus ceļus.
Nepareiza attēla malu attiecība — kvadrātveida vai portreta attēls tiek neveikli apgriezts, kad platformas to piespiedu kārtā ievieto 1,91:1 ainavas rāmī; kopīgošanas attēlu vienmēr veidojiet tuvu izmēram 1200×630.
Virsraksti vai apraksti, kas tiek saīsināti — turiet og:title zem ~60 rakstzīmēm un og:description zem ~155–160 rakstzīmēm, lai tie lielākajā daļā platformu netiktu nogriezti ar daudzpunkti.
Aizmirstība atjaunināt kešatmiņā saglabātos priekšskatījumus — pēc og tagu maiņas jau publicētā lapā vecais priekšskatījums var saglabāties Facebook vai LinkedIn kešatmiņā, kamēr manuāli nepiespiedīsiet atkārtotu skenēšanu ar viņu atkļūdošanas rīkiem.

Kur katrs tags tiek izmantots

og:title, og:description un og:image ir trīs tagi, ko gandrīz katra platforma nolasa, lai izveidotu priekšskatījumu. og:url pasaka rāpuļprogrammām, ar kuru kanonisko saiti saistīt priekšskatījumu, kas ir svarīgi, ja tas pats saturs ir pieejams caur vairākiem URL. og:site_name dažās platformās, piemēram, Facebook, virs virsraksta parāda nelielu etiķeti (piemēram, izdevuma vai zīmola nosaukumu).

og:type maina, kāda veida objektu lapa attēlo rāpuļprogrammām, kas atbalsta bagātīgāku Open Graph objektu modeli — piemēram, article atbloķē og:article:published_time un og:article:author platformās, kas tos nolasa, lai gan lielākā daļa sociālo priekšskatījumu ignorē šos papildu laukus un izmanto tikai pamata virsraksta/apraksta/attēla trijotni.

twitter:card kontrolē izkārtojumu tieši X: summary rāda mazu kvadrātveida sīktēlu blakus tekstam, savukārt summary_large_image rāda pilna platuma attēlu virs teksta — otrā izvēle gandrīz vienmēr ir labāka saturam ar nozīmīgu vāka attēlu.

Biežāk uzdotie jautājumi

Kādam izmēram jābūt manam og:image?

1200×630 px ir ieteicamais izmērs — tas ir pietiekami liels augstas pikseļu blīvuma ekrāniem un atbilst aptuveni 1,91:1 malu attiecībai, kurai Facebook, LinkedIn un X apgriež attēlu. Turiet failu zem 5–8 MB, izmantojiet JPG vai PNG un pārliecinieties, ka attēla URL ir pilnīga absolūta adrese, nevis relatīvs ceļš — lielākā daļa rāpuļprogrammu pareizi neatrisina relatīvus attēlu ceļus.

Kāpēc mans priekšskatījums neparādās, kad kopīgoju saiti?

Visbiežākie iemesli ir: trūkst og:image, attēla URL ir relatīvs, nevis absolūts, rāpuļprogrammu bloķē robots.txt, vai platforma rāda vecā priekšskatījuma kešatmiņā saglabātu versiju. Gan Facebook, gan LinkedIn agresīvi kešo skenētos priekšskatījumus — pēc tagu atjaunināšanas izmantojiet Facebook Sharing Debugger vai LinkedIn Post Inspector, lai piespiestu atkārtotu skenēšanu.

Kāda ir atšķirība starp og: tagiem un twitter: tagiem?

og: tagi (og:title, og:description, og:image u.c.) ir Open Graph standarta daļa, ko nolasa Facebook, LinkedIn, Slack, Discord, WhatsApp un lielākā daļa citu platformu. twitter: tagi ir Twitter/X pašu formāts. Ja trūkst twitter:title vai twitter:image, X automātiski izmanto atbilstošo og: tagu — taču, skaidri iestatot abus, jūs iegūstat lielāku kontroli, tostarp iespēju izvēlēties summary_large_image lielam priekšskatījuma attēlam.

Kādu og:type man vajadzētu izmantot?

"website" ir droša noklusējuma vērtība lielākajai daļai lapu, ieskaitot sākumlapas un vispārīgu saturu. Izmantojiet "article" emuāra ierakstiem un ziņu rakstiem (tas atbloķē papildu, rakstiem specifiskus tagus, piemēram, publicēšanas laiku), "product" e-komercijas lapām un "profile" personīgām vai lietotāja profila lapām. Veids galvenokārt ietekmē to, kuras papildu Open Graph īpašības ir derīgas, nevis to, kā izskatās pamata priekšskatījuma kartīte.

Vai šis rīks kaut kur saglabā vai sūta manus datus?

Nē. Visa ģenerēšana notiek lokāli jūsu pārlūkā, izmantojot vienkāršu JavaScript. Nekas no tā, ko ierakstāt, netiek pārsūtīts, reģistrēts vai saglabāts — cilnes aizvēršana visu izdzēš.