Kopeeri ja kleebi Eelvaatega Pildi/vahemälu näpunäited kaasas

OGP siltide generaator (Automaatne väljund og:title/og:image jne jaoks)

Q: "Kas peaksin lisama ka Twitteri kaardi sildid?"

"Jah. twitter:card ja seotud sildid saab genereerida koos. X suudab tugineda OG siltidele, seega minimaalsed seadistused töötavad ikkagi. (X Developer)"

Q: "Milline on soovitatav pildi suurus?"

"Juhisena soovitab Meta 1200×630 või suuremat (minimaalselt 600×315) ja suhet 1.91:1 lähedal. X-i summary_large_image-il on erinev suhe ja miinimumid. Vali sihtplatvorm."

Q: "Eelvaade ei uuene"

"Enamasti on põhjuseks vahemälu. Hangi andmed uuesti silurite/inspektorite kaudu ja kui muutsid pilti, kasuta uut pildi URL-i."

Sisesta URL, pealkiri, kirjeldus ja pildi URL. Genereeri Open Graph + Twitteri kaardi metasildid koos.

Hankimine toimub otse sinu brauseris (kehtivad CORS piirangud).

Sisend

Genereeritud metasildid / Eelvaade

1) Põhiinfo

Kohustuslik

Pealkiri (og:title) Kohustuslik

Juhis: 30–60 märki 0

Kirjeldus (og:description) Valikuline

Juhis: 80–120 märki 0

Pildi URL (og:image) Kohustuslik

Pildi laadimisel ilmub pisipildi eelvaade.

Praegune suhe -

Saidi nimi (og:site_name) Valikuline

Tüüp (og:type) Kohustuslik

Vali veebisait või artikkel.

2) Twitteri kaart

Kokkupandav / Vaikimisi sees

Lisa Twitteri kaardi sildid

twitter:card

twitter:site (valikuline)

twitter:creator (valikuline)

Automaatse sünroonimise reeglid

• Kui twitter:title on tühi, kasuta og:title.
• Kui twitter:description on tühi, kasuta og:description.
• Kui twitter:image on tühi, kasuta og:image.

3) Täpsemalt

Ava ainult peenhäälestamiseks.

og:locale (valikuline)

og:image:alt / twitter:image:alt

Hõlbustusandmete tekst. X lubab kuni 420 märki.

og:image:width

og:image:height

Laiuse/kõrguse lisamine aitab robotitel kiiremini renderdada. (Facebook Developers)

Artikli sildid (ainult juhul, kui og:type=article)

article:published_time

article:modified_time

Vajadusel kasuta ISO 8601 vormingut.

Genereeritud metasildid

Eelvaade

OG eelvaade

example.com

Eelvaate pealkiri

Kirjeldus ilmub siia.

Paljud sotsiaalmeedia/vestlusrakendused näevad välja sarnased

X kaardi eelvaade summary

example.com

Eelvaate pealkiri

Kirjeldus ilmub siia.

Lülitab summary ja summary_large_image vahel

Märkused (valikuline)

Märkused ilmuvad siia vastavalt sinu sisenditele.

Valikud

Salvesta sisendid URL-is Jaga linki, et avada uuesti samade seadetega Tühikute automaatne eemaldamine Eemaldab ka täislaiuses tühikud Jutumärkide varjestamine Hoia meta-atribuudid turvalisena

Pildi suuruse juhised (näited)

Vali OG või X, et näha näidissuurusi

OG-keskne X-keskne

Suhte vihje -

Kuidas kasutada / Näited

Täida URL, pealkiri, kirjeldus ja pildi URL.
Vali og:type ja (soovi korral) Twitteri kaardi seaded.
Kopeeri genereeritud sildid ja kleebi <head> sektsiooni.

Kiire näide

Sisesta URL + pealkiri + pilt, seejärel kopeeri soovituslik komplekt.

Märkused ja näpunäited

Mis on OGP?

OGP (Open Graph Protocol) võimaldab sotsiaalmeedia platvormidel lugeda sinu lehe pealkirja, kirjeldust ja pilti.

Määrates og:title/og:description/og:image, saad kontrollida, kuidas jagatud lingid välja näevad.

Twitteri kaardid (X) kasutavad sarnaseid metaandmeid ja võivad tugineda ka OG siltidele.

Pildi suuruse juhised (eelvaadete stabiliseerimiseks)

Meta (Facebook) juhised

• Minimaalselt 200×200.
• Parema kuva saavutamiseks 1200×630 või suurem; viidatakse vähemalt 600×315. (Facebook Developers)
• Suhe 1.91:1 lähedal aitab vältida kärpimist (ligikaudne, mitte range).
• Faili mahu juhis on 8MB või vähem.

X (Twitter) kaardi juhised

• summary_large_image toetab 2:1 suhet; minimaalselt 300×157, max 4096×4096. (X Developer)
• Soovitatav on faili maht alla 5MB ja levinud vormingud (JPG/PNG/WEBP/GIF).

Kui muudatused ei ilmu (vahemälu ja uuesti hankimine)

• Sotsiaalmeedia robotid puhverdavad OG andmeid. Kasuta iga platvormi silurit/inspektorit uuesti hankimiseks. (Facebook Developers)
• Kui vahetasid pildi välja, kuid see ei uuene, võib pildi URL ise olla puhvris; muuda failinime või lisa päringustring.
• og:image:width/height lisamine võib parandada renderdamise stabiilsust. (Facebook Developers)

Tööriistad valideerimiseks

Meta Sharing Debugger

Hangi uuesti ja kontrolli OG silte.

LinkedIn Post Inspector

Värskenda LinkedIni puhverdatud eelvaadet.

X Card Validator

Kontrolli Twitteri kaardi renderdamist.

KKK

Kas peaksin lisama ka Twitteri kaardi sildid?

Jah. twitter:card ja seotud sildid saab genereerida koos. X suudab tugineda OG siltidele, seega minimaalsed seadistused töötavad ikkagi. (X Developer)

Milline on soovitatav pildi suurus?

Juhisena soovitab Meta 1200×630 või suuremat (minimaalselt 600×315) ja suhet 1.91:1 lähedal. X-i summary_large_image-il on erinev suhe ja miinimumid. Vali sihtplatvorm.

Eelvaade ei uuene

Enamasti on põhjuseks vahemälu. Hangi andmed uuesti silurite/inspektorite kaudu ja kui muutsid pilti, kasuta uut pildi URL-i.