Kopiraj i zalijepi S pretpregledom Uključeni savjeti za slike/cache

OGP Generator tagova (Automatski izlaz og:title/og:image itd.)

Q: "Trebam li uključiti i Twitter Card tagove?"

"Da. twitter:card i povezani tagovi mogu se generirati zajedno. X se može osloniti na OG tagove, tako da minimalne konfiguracije i dalje rade. (X Developer)"

Q: "Preporučena veličina slike?"

"Kao vodič, Meta predlaže 1200×630 ili veće (minimalno 600×315) i omjer blizu 1.91:1. X-ov summary_large_image ima drugačiji omjer i minimume. Odaberite ciljnu platformu."

Q: "Pretpregled se ne ažurira"

"Najčešće je to cache. Ponovno dohvatite putem debuggera/inspectora, a ako ste promijenili sliku, koristite novi URL slike."

Unesite URL, naslov, opis i URL slike. Generirajte Open Graph + Twitter Card meta tagove zajedno.

Dohvaćanje se pokreće izravno u vašem pregledniku (primjenjuju se CORS ograničenja).

Ulaz

Generirani meta tagovi / Pretpregled

1) Osnovne informacije

Obavezno

Naslov (og:title) Obavezno

Vodič: 30–60 znakova 0

Opis (og:description) Opcionalno

Vodič: 80–120 znakova 0

URL slike (og:image) Obavezno

Sličica pretpregleda pojavljuje se kada se slika učita.

Trenutni omjer -

Naziv web mjesta (og:site_name) Opcionalno

Tip (og:type) Obavezno

Odaberite web mjesto ili članak.

2) Twitter kartica

Sklopivo / Uključeno prema zadanim postavkama

Uključi Twitter Card tagove

twitter:card

twitter:site (opcionalno)

twitter:creator (opcionalno)

Pravila auto-sinkronizacije

• Ako je twitter:title prazan, koristi se og:title.
• Ako je twitter:description prazan, koristi se og:description.
• Ako je twitter:image prazan, koristi se og:image.

3) Napredno

Otvorite samo ako trebate fino podešavanje.

og:locale (opcionalno)

og:image:alt / twitter:image:alt

Tekst za pristupačnost. X označava do 420 znakova.

og:image:width

og:image:height

Dodavanje širine/visine može pomoći crawlerima da brže renderiraju. (Facebook Developers)

Tagovi članka (samo kada je og:type=article)

article:published_time

article:modified_time

Koristite ISO 8601 ako je potrebno.

Generirani meta tagovi

Pretpregled

OG pretpregled

example.com

Naslov pretpregleda

Opis će se pojaviti ovdje.

Mnoge SNS/chat aplikacije izgledaju slično ovome

X pretpregled kartice summary

example.com

Naslov pretpregleda

Opis će se pojaviti ovdje.

Prebacuje između summary i summary_large_image

Napomene (opcionalno)

Napomene se pojavljuju ovdje na temelju vaših ulaza.

Opcije

Spremi ulaze u URL Podijelite poveznicu za ponovno otvaranje s istim postavkama Automatsko obrezivanje razmaka Također obrezuje razmake pune širine Escape dvostrukih navodnika Držite meta atribute sigurnima

Vodič za veličinu slike (primjeri)

Odaberite OG ili X da vidite primjere veličina

Orijentirano na OG Orijentirano na X

Savjet za omjer -

Kako koristiti / Primjeri

Ispunite URL, naslov, opis i URL slike.
Odaberite og:type i (opcionalno) postavke Twitter kartice.
Kopirajte generirane tagove i zalijepite ih u <head>.

Brzi primjer

Unesite URL + naslov + sliku, a zatim kopirajte preporučeni set.

Napomene i savjeti

Što je OGP?

OGP (Open Graph Protocol) omogućuje društvenim platformama da pročitaju naslov, opis i sliku vaše stranice.

Postavljanjem og:title/og:description/og:image možete kontrolirati kako se pojavljuju dijeljene poveznice.

Twitter kartice (X) koriste slične metapodatke i mogu se osloniti na OG tagove.

Smjernice za veličinu slike (za stabilizaciju pretpregleda)

Meta (Facebook) smjernice

• Minimalno 200×200.
• Za bolji prikaz, 1200×630 ili veće; spominje se barem 600×315. (Facebook Developers)
• Omjer blizak 1.91:1 pomaže u izbjegavanju izrezivanja (približno, ne strogo).
• Smjernice za veličinu datoteke uključuju 8MB ili manje.

X (Twitter) card smjernice

• summary_large_image podržava omjer 2:1; minimalno 300×157, maksimalno 4096×4096. (X Developer)
• Spominju se veličina datoteke ispod 5MB i uobičajeni formati (JPG/PNG/WEBP/GIF).

Kada se promjene ne vide (cache i ponovno dohvaćanje)

• SNS crawleri keširaju OG podatke. Koristite debugger/inspector svake platforme za ponovno dohvaćanje. (Facebook Developers)
• Ako ste zamijenili sliku, ali se ona ne ažurira, sam URL slike može biti keširan; promijenite naziv datoteke ili dodajte upitni niz (query string).
• Dodavanje og:image:width/height može poboljšati stabilnost randeriranja. (Facebook Developers)

Alati za validaciju

Meta Sharing Debugger

Ponovno dohvatite i pregledajte OG tagove.

LinkedIn Post Inspector

Osvježite LinkedInov keširani pretpregled.

X Card Validator

Provjerite randeriranje Twitter kartice.

FAQ

Trebam li uključiti i Twitter Card tagove?

Da. twitter:card i povezani tagovi mogu se generirati zajedno. X se može osloniti na OG tagove, tako da minimalne konfiguracije i dalje rade. (X Developer)

Preporučena veličina slike?

Kao vodič, Meta predlaže 1200×630 ili veće (minimalno 600×315) i omjer blizu 1.91:1. X-ov summary_large_image ima drugačiji omjer i minimume. Odaberite ciljnu platformu.

Pretpregled se ne ažurira

Najčešće je to cache. Ponovno dohvatite putem debuggera/inspectora, a ako ste promijenili sliku, koristite novi URL slike.