Open Graph Tags: Tidak sebuah peringkat Factor, masih sebuah SEO Deliverable

TL;DR — Open Graph (OG) tags adalah little bits dari HTML di head dari Anda halaman itu decide bagaimana Anda tautan looks ketika seseorang shares ini — judul, blurb, dan image di itu preview card Anda see pada Facebook, LinkedIn, Slack, Discord, WhatsApp, atau di sebuah iMessage. mereka jangan help Anda peringkat di Google. tetapi jika Anda skip them, platforms guess — dan guess adalah biasanya worse daripada apa Anda’d memiliki chosen.

Apa Open Graph tags adalah

Ketika Anda paste sebuah tautan ke sebuah chat app atau sebuah social post dan ini turns ke sebuah neat little card — sebuah headline, sebuah pendek deskripsi, dan sebuah big image — itu card adalah dibangun dari Open Graph tags. mereka’re <meta> tags itu langsung di Anda halaman’s <head>, di mana pengunjung tidak pernah see them tetapi apps itu bangun preview melakukan.

sistem muncul dari Open Graph protocol, sebuah spec Facebook dibuat (Anda dapat baca ini di ogp.me). idea adalah untuk let apa pun halaman web act like sebuah rich “object” (terjemahan) “object” itu social platforms dapat display consistently.

Di sini adalah ones Anda sebenarnya set:

<meta property="og:title" content="Your headline for the share card" />
<meta property="og:description" content="A short blurb, a sentence or two." />
<meta property="og:image" content="https://example.com/share-image.jpg" />
<meta property="og:url" content="https://example.com/your-page/" />
<meta property="og:type" content="website" />

• og:judul — headline pada card.
• og:deskripsi — blurb di bawah ini.
• og:image — big thumbnail (ini adalah satu itu membuat card eye-catching).
• og:url — canonical tautan untuk halaman.
• og:jenis — apa jenis dari hal halaman adalah (website untuk sebagian besar halaman, article untuk sebuah blog post).

melakukan mereka help Anda peringkat?

Tidak. Open Graph tags adalah tidak sebuah Google peringkat factor — menambahkan them tidak akan move Anda up di hasil pencarian. Apa mereka melakukan adalah memengaruhi bagaimana banyak orang click Anda tautan ketika ini adalah shared, yang adalah sebuah berbeda (dan masih valuable) hal. Think dari them cara Anda’d think dari sebuah baik deskripsi meta: ini adalah tidak peringkat, ini adalah pitch itu earns click.

image size untuk remember

ada Tidak single official size setiap platform publishes — setiap satu documents -nya own angka (LinkedIn’s own help halaman says 1200 × 627px minimum, 1,91:1 ratio; Google’s own menemukan guidance says setidaknya 1200px wide, 16:9). dalam praktik, 1200 × 630 pixels (tentang sebuah 1,91:1 ratio) adalah panjang-standing convention itu renders cleanly, uncropped, pada Facebook, LinkedIn, Slack, Discord, WhatsApp, dan iMessage — gunakan ini sebagai Anda safe default alih-alih sebuah aturan stamped anywhere official. dan gunakan penuh URL starting dengan https:// — sebuah relative path like /image.jpg mendapatkan silently ignored.

satu hal everyone trips pada

Anda perubahan Anda og:image, re-share tautan… dan old image masih menampilkan up. itu’s caching — Facebook, LinkedIn, dan Slack semua remember (cache) apa mereka scraped pertama time, dan editing Anda tags tidak retroactively perbarui tautan itu adalah sudah shared. untuk perbaiki ini Anda memiliki untuk membuat platform look again: paste Anda URL ke Facebook Sharing Debugger dan click “Scrape Again,” (terjemahan) “Scrape Again,” atau gunakan LinkedIn Post Inspector.

ingin penuh picture — setiap tag, apa Google sebenarnya melakukan dengan them di 2026, per-platform fallback dan caching quirks, dan JavaScript gotcha itu hides Anda tags dari crawler? Switch untuk Advanced tab.

TL;DR — Open Graph tags adalah <head> <meta> elements dari Open Graph protocol (ogp.me, dibangun oleh Facebook) itu deskripsikan Anda halaman sebagai sebuah shareable object. diperlukan: og:title, og:type, og:image, og:url; umum opsional: og:description, og:site_name, og:locale, dan og:image:alt. Repeated properties form arrays, dengan pertama tag preferred pada conflicts. mereka adalah tidak sebuah peringkat factor — mereka’re appearance layer untuk social/chat-app tautan previews (Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage). Penelusuran-mesin menangani adalah terpisah dan seharusnya tidak menjadi inferred dari Open Graph validity. protocol itself sets Tidak pixel dimensions untuk og:image — setiap consumer publishes -nya own sizing (LinkedIn, Google menemukan) — so ship sebuah absolute-URL og:image sized untuk platforms Anda mendukung; know itu missing tags produce sebuah uncontrolled, tidak blank, preview; dan remember setiap platform caches scrape — editing tags tidak perbaiki sudah-shared tautan, so force sebuah re-scrape. sebagian besar social crawler jangan jalankan JavaScript, so tags harus menjadi di server-dirender HTML.

Apa Open Graph tags sebenarnya adalah

Open Graph tags adalah <meta> elements di Anda halaman’s <head>, didefinisikan oleh Open Graph protocol — sebuah spec Facebook dibuat dan published di ogp.me. protocol’s premise adalah itu sebuah halaman web dapat menjadi turned ke sebuah rich “object” (terjemahan) “object” dengan sebuah kecil, consistent vocabulary dari properties, so apa pun platform dapat bangun yang sama preview dari yang sama tags. Google’s own developer explainer puts origin plainly: Open Graph protocol “menyediakan Facebook dengan itu metadata necessary untuk izinkan web halaman untuk memiliki itu sama functionality sebagai other Facebook objects,” (terjemahan) “menyediakan Facebook dengan metadata necessary untuk izinkan halaman web untuk memiliki yang sama functionality sebagai lainnya Facebook objects,” per web.dev’s Social penemuan artikel.

spec marks four properties sebagai diperlukan — og:title, og:type, og:image, dan og:url — dan ones Anda’ll hampir selalu tambahkan pada top adalah og:description, og:site_name, dan og:locale, plus structured sub-properties like og:image:width, og:image:height, dan og:image:alt ( spec’s own guidance: sebuah halaman itu specifies og:image seharusnya specify og:image:alt too).

Repeated tags dan structured properties ikuti spesifik aturan. protocol lets Anda repeat sebuah root property untuk deskripsikan multiple objects (say, several candidate images) — ketika consumers see conflicting nilai untuk yang sama property, pertama tag di document order wins. sebuah structured sub-property like og:image:width applies untuk og:image tag immediately sebelum ini, tidak untuk setiap image pada halaman, so pertahankan setiap image’s og:image dan -nya structured sub-properties grouped together di sumber order. ini adalah protocol-tingkat perilaku dari ogp.me itself, tidak sebuah per-platform quirk.

framing I ingin Anda untuk pertahankan: ini adalah social/chat appearance layer, sibling dari SERP appearance layer Anda sudah manage dengan tag judul dan deskripsi meta. sama idea — control bagaimana Anda halaman presents itself — hanya pada sebuah berbeda surface.

core Open Graph tags, satu oleh satu

Google’s web.dev explainer memberikan per-tag purpose di satu line setiap: og:title adalah “itu title dari itu web halaman,” (terjemahan) “ judul dari halaman web,” og:description adalah “itu description dari itu web halaman,” (terjemahan) “ deskripsi dari web halaman,” og:image adalah “URL untuk an image attached untuk itu shared post,” (terjemahan) “URL untuk sebuah image attached untuk shared post,” og:url adalah “itu canonical url dari itu web halaman,” (terjemahan) “ canonical url dari halaman web,” dan og:type adalah “a string itu indicates itu jenis dari itu web halaman” (terjemahan) “sebuah string itu indicates jenis dari halaman web” (web.dev). Practically:

«- og:title — the card headline. Keep it to roughly what shows on mobile/desktop cards; use the raw title without site-name branding tacked on. This is separate from your HTML <title> element, though Google may draw on either for the title link (see below).

• og:description — the card blurb. A sentence or two; longer text truncates on most platforms.
• og:image — the thumbnail, and the property that makes or breaks the card. It must be an absolute URL (https://…) — a relative path is silently ignored by crawlers. Add og:image:width/og:image:height so platforms can lay out the card before the image finishes loading, and og:image:alt with a real description — the protocol itself recommends it whenever you specify og:image.
• og:url — the canonical URL for the page (align it with your rel=canonical so shares consolidate on one address).
• og:type — declares the object type. website is the default (and what any unmarked page is treated as); article unlocks extra properties like article:author, article:published_time, and article:section; there are also profile, book, video.*, and music.* types. This matters for platform features, not for SEO directly.
• og:site_name and og:locale — the optional-but-useful pair. og:site_name names the brand behind the page; og:locale (default en_US) is only needed when » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) « content isn’t in American English. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh tujuh, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

adalah Open Graph tags sebuah peringkat factor? Tidak — tetapi di sini’s apa Google melakukan dengan them

tidak ada official Google sumber stating itu OG tags influence peringkat. mereka control appearance, tidak position — tepat sama bucket John Mueller put meta deskripsi di: ini adalah “primarily digunakan sebagai a snippet di itu penelusuran hasil halaman. Dan itu tidak sesuatu itu we akan gunakan untuk ranking” (terjemahan) “primarily digunakan sebagai sebuah snippet di hasil pencarian halaman. dan itu’s tidak sesuatu itu kami akan gunakan untuk peringkat” (melalui mesin pencari Journal’s tulis-up). Tidak named Google rep memiliki diberikan sebuah equivalent pada—record quote secara khusus tentang Open Graph dan peringkat, so I tidak akan invent satu — evidence adalah terdokumentasi mechanism, dan mechanism adalah semua appearance. ada three confirmed places Google’s own documentation says ini membaca Anda OG tags — dan di setiap case, valid markup adalah satu input Google dapat draw pada, tidak sebuah jaminan dari sebuah particular display, sebuah particular crop, atau apa pun peringkat atau traffic outcome. Absence dari satu dari ini docs tidak proof Google ignores tag elsewhere, either — treat ini sebagai “apa terdokumentasi,” (terjemahan) “apa terdokumentasi,” tidak sebuah exhaustive list dari semuanya Google’s sistem mungkin touch.

og:judul sebagai sebuah judul-tautan sumber

«Since August 26, 2024, Google’s documentation lists “Content in og:title meta tags” among the sources it can use to automatically generate the title link — the clickable headline in results. The changelog line is direct: “Google Search can use content within og:title meta tags to automatically generate title links” (Search Central changelog). It’s one of roughly nine sources Google blends from (title-link docs) — not a guarantee your og:title gets used verbatim. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

og:image sebagai sebuah image-thumbnail sumber

«Google’s Image SEO best practices has a “Specify a preferred image with metadata” section that names two metadata sources you can use to influence which image gets picked for Search: schema.org’s primaryImageOfPage (or an image on the main entity), or “the og:image meta tag.” Google is explicit that “Google’s selection of an image preview is completely automated” and warns you to “avoid using a generic image (for example, your site logo) or an image with text in the schema.org markup or og:image meta tag.” Its Discover doc gives the same two options for Discover images and adds concrete guidance: at least 1200px wide, more than 300,000 total pixels, and a 16:9 aspect ratio (its own example is 1280×720) — note that’s a different ratio than the 1.91:1 convention used for social-card images below, so a single image sized for social sharing won’t automatically be Discover’s preferred crop. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Trade press (mesin pencari Land, mesin pencari Journal, mesin pencari Roundtable) covered ini Images/menemukan documentation sebagai baru sekitar early March 2026 dan reported itu og:image’s role now extends untuk AI Overviews sebagai well. I dapat tidak konfirmasi sebuah AI Overviews mention pada Google’s own Images atau menemukan halaman secara langsung — neither halaman saat ini names AI Overviews atau “AI surfaces” (terjemahan) “AI surfaces” — so treat Penelusuran/menemukan role sebagai terdokumentasi fact dan AI Overviews extension sebagai ketiga-party-reported, tidak sesuatu Google’s own docs state outright. Either cara, ini adalah selection, tidak peringkat: og:image adalah satu input among several, dengan Tidak jaminan dari tepat display.

og:site_name sebagai sebuah situs-name sumber

«For the site name shown next to your results, Google says its system “will also consider content in og:site_name, <title>, heading elements, and other text on a home page. However, WebSite structured data is most important” (Site Names doc). So og:site_name is one lever, below WebSite schema markup in priority. (For video pages there’s a fourth touchpoint: Google supports OGP and reads og:video:image for video thumbnails, per the Video SEO docs.) » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Tie them together dan honest headline adalah: Google membaca Anda OG tags, tetapi hanya untuk help decide bagaimana Anda hasil looks — tidak pernah di mana ini peringkat.

Bagaimana social platforms dan chat apps gunakan OG tags

utama, everyday job dari OG tags adalah tautan preview card. Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, dan Telegram semua baca them untuk bangun card ditampilkan sebelum sebuah click.

X/Twitter adalah special case. Twitter Cards adalah, di Google’s kata, “an extension untuk itu Open Graph Protocol applicable untuk Twitter” (terjemahan) “sebuah extension untuk Open Graph Protocol applicable untuk Twitter” (web.dev). X memeriksa twitter:card / twitter:* tags pertama dan falls back untuk OG tags per-property; jika twitter:card adalah absent entirely, X masih dapat bangun card dari OG data tetapi defaults untuk plain summary card jenis. Worth knowing: ** old Twitter Card Validator alat adalah deprecated sekitar 2022** ketika platform rebranded — several pesaing guides masih reference ini sebagai jika ini adalah langsung. ada Tidak official X-spesifik validator anymore; ketiga-party OG debuggers fill kesenjangan.

Recommended og:image size dan format

Open Graph protocol itself sets Tidak pixel dimensions atau aspect ratio untuk og:image — ogp.me hanya defines structured properties (og:image:width, og:image:height, og:image:type, og:image:alt), tidak sebuah diperlukan size. Sizing adalah sebuah per-consumer decision, dan consumers jangan semua agree:

• LinkedIn documents -nya own minimum secara langsung: 1200 × 627px, 1,91:1 ratio; images lebih sempit daripada ~401px render sebagai sebuah kecil thumbnail hanya.
• Google menemukan documents setidaknya 1200px wide, lebih daripada 300 000 total pixels, 16:9 aspect ratio (contoh diberikan: 1280×720) untuk -nya preferred-image metadata — sebuah noticeably berbeda ratio daripada social-card convention di bawah.
• Facebook’s saat ini sharing documentation menanyakan untuk images “di least 1080 pixels di width” (terjemahan) “setidaknya 1080 pixels di width” tanpa pinning sebuah universal ratio; ini poin Anda untuk sebuah terpisah best-practices guide untuk specifics.

Diberikan itu spread, 1200 × 630px (tentang 1,91:1) tetap practical cross-platform default sebagian besar implementers gunakan — ini adalah close untuk LinkedIn’s own minimum dan renders acceptably (jika tidak selalu pixel-perfect) pada Facebook, Slack, Discord, WhatsApp, dan iMessage, dan X displays ini sebagai sebuah besar-image card. Treat ini sebagai sebuah sensible convention, tidak sebuah aturan apa pun single spec mandates — jika sebuah spesifik platform penting sebuah lot untuk Anda, periksa bahwa platform’s saat ini documentation rather daripada assuming ini figure adalah guaranteed correct di sana.

Dua hal itu adalah hard aturan, tidak conventions:

• Absolute URL diperlukan. og:image harus poin untuk sebuah penuh https://… URL; sebuah relative path adalah ignored oleh crawler.
• Tidak generic logos atau text-berat images jika Anda juga ingin image eligible untuk Google’s thumbnail selection — Google explicitly warns terhadap keduanya, dan terhadap extreme aspect ratios. Set og:image:alt dengan sebuah nyata deskripsi, too.

Apa happens ketika Open Graph tags adalah missing

sebuah umum myth adalah itu “Tidak OG tags” (terjemahan) “Tidak OG tags” berarti “plain text link, no image.” (terjemahan) “plain text tautan, Tidak image.” ini tidak — platforms fall back, mereka jangan blank out. Facebook fills gaps dari halaman’s <title>, deskripsi meta, dan pertama usable konten image; LinkedIn behaves similarly dan memperlakukan images lebih sempit daripada ~401px sebagai thumbnail-hanya. So nyata risk dari omitting OG tags adalah sebuah uncontrolled, worse preview — sebuah random di-body image, sebuah truncated <title> — tidak sebuah missing satu. jika Anda care bagaimana sebuah halaman looks ketika shared (dan untuk apa pun Anda’d promote, Anda harus), atur tags alih-alih letting setiap platform guess.

Mengapa Anda diperbarui OG tags tidak menunjukkan up — caching dan re-scraping

ini adalah angka-satu practical pain poin. Facebook, LinkedIn, dan Slack semua cache scraped OG data, so editing Anda tags tidak retroactively perbarui tautan itu adalah sudah shared. Facebook’s own webmaster docs konfirmasi satu spesifik mechanism worth knowing: “images adalah cached based pada itu URL dan tidak akan menjadi diperbarui unless itu URL perubahan” (terjemahan) “images adalah cached berdasarkan URL dan tidak akan menjadi diperbarui unless URL perubahan” — so jika Anda’re troubleshooting sebuah stuck image, mengubah og:image filename (tidak hanya -nya contents) dapat force sebuah fresh fetch. I jangan memiliki sebuah pertama-party sumber untuk persis bagaimana panjang setiap platform’s cache lives sebelum ini expires pada -nya own, so jangan treat apa pun spesifik duration Anda see quoted elsewhere sebagai sebuah terdokumentasi jaminan — force sebuah re-scrape per platform alih-alih menunggu ini out:

• Facebook Sharing Debugger (developers.facebook.com/alat/debug) — paste URL dan gunakan “Scrape Again” (terjemahan) “Scrape Again” untuk trigger sebuah fresh fetch.
• LinkedIn Post Inspector — re-fetches dan previews card; jika image masih tidak akan pull, periksa ini tidak blocked atau behind auth.
• X/Twitter — Tidak official validator since ~2022. Since X falls back untuk OG tags, sebuah generic OG debugger plus sebuah fresh share adalah practical route.

Karena crawler cache dan konten perubahan, OG tags tidak truly set-dan-forget: setelah sebuah significant konten atau image perbarui pada sebuah tinggi-nilai halaman, re-scrape ini.

«## Implementation gotchas: JavaScript, byte limits, absolute URLs » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

biggest satu ties straight back untuk rendering: sebagian besar social-platform crawler melakukan tidak execute JavaScript. OG tags injected client-side — say, oleh React setelah hydration — adalah invisible untuk them; crawler sees sebuah empty <head>. tags harus menjadi present di mentah, server-dirender HTML. ini adalah yang sama crawl-vs-render pembedaan itu bites JavaScript-berat situs elsewhere (see JavaScript SEO). Slack memiliki telah reported (tidak terdokumentasi di sebuah official spec) untuk fetch hanya sebuah limited angka dari bytes dari mulai dari sebuah halaman, so sebagai sebuah safety margin put Anda OG tags early di <head> rather daripada setelah sebuah besar inline script atau style block. dan, setelah lebih karena ini adalah tenang killer: og:image harus menjadi sebuah absolute URL.

Bing, Microsoft, dan Open Graph

Bing adalah far lebih sedikit terdokumentasi di sini daripada Google. Bing’s Markup Validator (di Bing Webmaster alat) lists Open Graph among structured-markup formats ini recognizes, alongside schema.org, Microdata, Microformats, dan RDFa, dan Bing’s migration guidance flags OG metadata sebagai sesuatu untuk pertahankan saat ini selama sebuah move — tetapi Bing hasn’t published Google-style specifics pada apakah atau bagaimana OG data feeds -nya snippets atau thumbnails. dalam praktik stronger Microsoft-ecosystem consumer dari OG tags adalah LinkedIn (Microsoft-owned), yang membaca og:title, og:description, og:image, dan og:url untuk bangun -nya share cards. jangan overclaim sebuah Bing mechanism itu tidak terdokumentasi.

umum Open Graph myths, debunked

«- “OG tags are a Google ranking factor.” No — no official source says so. They affect appearance (title-link, image-thumbnail, site-name sources), not position.

• “OG is only for Facebook, irrelevant to real SEO.” Out of date. Google’s own docs list og:title (title links, added Aug 2024), og:image (a Search/Discover image-selection input), and og:site_name (a lower-priority site-name input) as three separate appearance features it reads OG tags for — though “AI Overviews” specifically is trade-press reporting, not a claim on Google’s own Images/Discover pages as of this check.
• “No OG tags means a plain, image-less link.” No — platforms fall back to <title>/meta description/first image, giving an uncontrolled preview, not a blank one.
• “Updating og:image instantly fixes every already-shared link.” No — Facebook/LinkedIn/Slack cache the scrape; you must force a re-scrape, and CDN caching can delay it further.
• “Use the Twitter Card Validator to fix X previews.” That tool was deprecated ~2022; there’s no official X validator now.
• “Any image size/URL works for og:image.” No — it must be an absolute URL, and Google warns against generic logos, text-in-image, and extreme aspect ratios for its own thumbnail selection. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Di mana untuk go berikutnya

ini halaman adalah sebuah deep dive di bawah Meta Tags untuk SEO hub, pada-halaman cluster’s map dari yang head elements sebenarnya penting. Open Graph adalah social/chat appearance layer — -nya siblings pada SERP appearance side adalah tag judul (yang Google dapat draw dari Anda og:title) dan deskripsi meta ( closest analogue: tidak sebuah peringkat factor, semua tentang click). untuk image dan situs-name side, OG overlaps dengan schema markup — Google memperlakukan og:image dan schema’s primaryImageOfPage sebagai alternative thumbnail sources. dan karena sebagian besar social crawler jangan jalankan JavaScript, seluruh topic sits downstream dari rendering dan JavaScript SEO.

AI summary

sebuah condensed take pada Advanced versi:

• Open Graph tags = social/chat appearance layer. <head> <meta> elements dari Open Graph protocol (ogp.me, dibangun oleh Facebook) itu deskripsikan Anda halaman sebagai sebuah shareable object.
• diperlukan: og:title, og:type, og:image, og:url. umum opsional: og:description, og:site_name, og:locale, og:image:alt. Repeated tags form arrays; pertama tag wins pada conflicts.
• Tidak sebuah peringkat factor — sama appearance bucket sebagai deskripsi meta. Tidak official Google sumber ties OG tags untuk peringkat.
• Google membaca them untuk appearance (three terdokumentasi mechanisms, none sebuah jaminan): og:title → sebuah judul-tautan sumber (ditambahkan Aug 2024); og:image → sebuah image-selection input untuk Penelusuran dan menemukan (menemukan’s own spec: ≥1200px wide, 16:9 — sebuah berbeda ratio daripada social-card convention); og:site_name → sebuah lebih rendah-priority situs-name input (di bawah WebSite schema). Video halaman tambahkan og:video:image. Trade press juga reports sebuah AI Overviews role untuk og:image; Google’s own Images/menemukan halaman jangan name AI Overviews secara langsung.
• Main dunia nyata job: tautan preview card pada Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage. X/Twitter Cards extend OG — X membaca twitter:* pertama, falls back untuk OG per-property, defaults untuk sebuah summary card jika twitter:card adalah absent. Twitter Card Validator adalah deprecated ~2022.
• og:image: Tidak universal spec size; LinkedIn documents 1200×627 (1,91:1), Google menemukan documents ≥1200px/16:9; 1200×630 (1,91:1) adalah umum cross-platform convention. Absolute URL diperlukan; hindari generic logos / text-di-image / extreme ratios; set og:image:alt.
• Missing tags → uncontrolled, tidak blank preview. Platforms fall back untuk <title>/deskripsi meta/pertama image.
• Caching adalah #1 masalah. Editing tags tidak perbaiki sudah-shared tautan; force sebuah re-scrape melalui Facebook Sharing Debugger (“Scrape Again” (terjemahan) “Scrape Again”) atau LinkedIn Post Inspector. Facebook’s own docs note images adalah cached oleh URL dan tidak akan perbarui unless URL itself perubahan.
• rendering gotcha: sebagian besar social crawler jangan jalankan JavaScript — tags harus menjadi di server-dirender HTML; Slack adalah reported (tidak officially terdokumentasi) untuk fetch hanya sebuah limited angka dari bytes, so put head tags early sebagai sebuah safety margin.
• Bing: thin docs — -nya Markup Validator recognizes OG, tetapi Tidak Google-style thumbnail/snippet mechanism adalah published. LinkedIn adalah practical Microsoft consumer.

Dokumentasi resmi

Utama-sumber documentation dari protocol dan mesin pencari.

** protocol**

• Open Graph protocol (ogp.me) — spec itself: diperlukan properties (og:title, og:type, og:image, og:url), opsional ones, dan structured sub-properties like og:image:width/og:image:height.

Google

• Control Anda judul tautan di hasil pencarian — penuh list dari judul-tautan sources, including og:title.
• Penelusuran Central changelog: menambahkan og:judul untuk judul-tautan sources (Aug 26, 2024) — ketika og:title adalah ditambahkan.
• Image SEO best practices — “Specify a preferred image with metadata” (terjemahan) “Specify sebuah preferred image dengan metadata” — og:image (dan schema.org) sebagai thumbnail-selection sources untuk Penelusuran.
• Google menemukan — og:image untuk menemukan thumbnails; documents ≥1200px wide, >300 000 total pixels, 16:9 ratio.
• situs Names di Google Search — og:site_name sebagai sebuah situs-name sumber (di bawah WebSite data terstruktur).
• Video SEO best practices — OGP mendukung dan og:video:image untuk video thumbnails.
• web.dev — Social penemuan — Google’s foundational explainer dari OGP dan Twitter Cards, dengan per-tag purpose table.

alat

• Facebook Sharing Debugger — paste sebuah URL, see bagaimana Facebook scrapes ini, dan “Scrape Again” (terjemahan) “Scrape Again” untuk bust cache.

Quotes dari sumber

pada—record statements dari Google. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage pada sumber halaman.

Google — og:judul sebagai sebuah judul-tautan sumber

«- “Google Search can use content within og:title meta tags to automatically generate title links.” — Google Search Central changelog (Aug 26, 2024). Jump to quote

• The list of title-link sources includes “Content in og:title meta tags.” — Google Search Central docs. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google — og:image sebagai sebuah thumbnail-selection sumber

«- You can influence image selection “by providing your preferred image through one of the following metadata sources” — schema.org markup or “the og:image meta tag.” — Google Search Central docs. Jump to quote

• “Avoid using a generic image (for example, your site logo) or an image with text in the schema.org markup or og:image meta tag.” Jump to quote
• “Use either schema.org markup or the og:image meta tag to specify a large image that’s relevant and representative of the web page.” — Google Discover docs. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google — og:site_name sebagai sebuah situs-name sumber

• “Our site name sistem akan juga consider konten di og:site_name, <title>, heading elements, dan other text pada a home halaman. Namun, WebSite structured data adalah paling important.” (terjemahan) “kami situs name sistem akan juga pertimbangkan konten di tidak terdefinisi, tidak terdefinisi, heading elements, dan lainnya text pada sebuah home halaman. Namun, tidak terdefinisi data terstruktur adalah sebagian besar penting.” — Google Search Central docs. Jump untuk quote

Google — OGP definition dan per-tag purpose

• Open Graph protocol “provides Facebook with the metadata necessary to allow web pages to have the same functionality as other Facebook objects.” (terjemahan) “menyediakan Facebook dengan metadata necessary untuk izinkan halaman web untuk memiliki yang sama functionality sebagai lainnya Facebook objects.” — web.dev (Google). Jump untuk quote
• Twitter Cards adalah “an extension to the Open Graph Protocol applicable for Twitter.” (terjemahan) “sebuah extension untuk Open Graph Protocol applicable untuk Twitter.” — web.dev (Google). Jump untuk quote

John Mueller, Google — appearance ≠ peringkat (cited oleh analogy)

• “So the meta description is primarily used as a snippet in the search results page. And that’s not something that we would use for ranking.” (terjemahan) “So deskripsi meta adalah primarily digunakan sebagai sebuah snippet di hasil pencarian halaman. dan itu’s tidak sesuatu itu kami akan gunakan untuk peringkat.” — John Mueller, SEO Office Hours (dapat 2022), melalui mesin pencari Journal. yang sama “appearance, not ranking” (terjemahan) “appearance, tidak peringkat” logic adalah cara baca OG tags. Baca coverage

”My shared link looks wrong” (terjemahan) “My shared tautan looks wrong” — sebuah triage tree

berfungsi top untuk bottom; pertama “Ya” (terjemahan) “Ya” adalah Anda jawaban.

1. melakukan halaman memiliki OG tags di semua di mentah HTML? Jalankan curl -s https://your-url/ | grep 'og:' (atau “View Sumber,” (terjemahan) “View Sumber,” tidak DevTools’ dirender DOM).

• Tidak tags di mentah HTML, tetapi mereka’re di dirender DOM → mereka’re menjadi injected oleh JavaScript. sebagian besar social crawler jangan jalankan JS, so mereka dapat’t see them. Perbaiki: server-render tags ke <head>.
• Tidak tags anywhere → tambahkan them. Until lalu, platforms fall back untuk <title>/deskripsi meta/pertama image (sebuah uncontrolled preview).
• Tags adalah present di mentah HTML → go untuk 2.

2. adalah og:image sebuah absolute https://… URL?

• Tidak (relative path) → crawler ignore ini. Perbaiki: membuat ini absolute.
• Ya → go untuk 3.

3. melakukan Anda recently perubahan tags, dan old preview masih menampilkan?

• Ya → ini adalah cached. Perbaiki: re-scrape per platform — Facebook Sharing Debugger (“Scrape Again” (terjemahan) “Scrape Again”), LinkedIn Post Inspector. jika ini adalah secara khusus image dan re-scraping tidak help, try mengubah image’s URL/filename — Facebook’s own docs say images adalah cached oleh URL dan tidak akan perbarui until URL melakukan.
• Tidak → go untuk 4.

4. adalah ini hanya wrong pada X/Twitter?

• Ya → X membaca twitter:* tags pertama, lalu falls back untuk OG per-property dan defaults untuk sebuah summary card jika twitter:card adalah missing. ada Tidak official X validator since ~2022; tambahkan jelas twitter:card tags dan re-share.
• Tidak → go untuk 5.

5. adalah image wrong size/cropped, atau sebuah logo/text image di Google hasil?

• Cropped/blurry pada social → resize untuk 1200×630 (1,91:1), umum cross-platform convention (Tidak single platform’s official spec, tetapi close untuk LinkedIn’s own terdokumentasi minimum).
• Wrong crop secara khusus di Google menemukan → menemukan documents sebuah 16:9 ratio (≥1200px wide, >300 000 total pixels), berbeda dari 1,91:1 social convention.
• Google’s thumbnail adalah Anda logo atau sebuah text image → Google menghindari generic logos, text-di-image, dan extreme aspect ratios; memberikan ini sebuah bersih, representative og:image (atau set primaryImageOfPage schema).

Open Graph cheat sheet

** tags — apa setiap satu melakukan**

Di mana Google membaca OG tags (semua appearance, none peringkat)

Fast facts

• Tidak universal spec size untuk og:image. LinkedIn: 1200×627, 1,91:1. Google menemukan: ≥1200px wide, 16:9. umum convention: 1200×630px, 1,91:1, absolute URL, og:image:alt set, Tidak logo/text/extreme ratio.
• Missing tags → uncontrolled fallback preview, tidak sebuah blank satu.
• Caching: editing tags tidak perbaiki sudah-shared tautan — re-scrape. Facebook caches images oleh URL — sebuah changed URL forces sebuah fresh fetch bahkan jika filename looks similar.
• Facebook: Sharing Debugger → “Scrape Again.” (terjemahan) “Scrape Again.”
• LinkedIn: Post Inspector (sticky cache).
• X: Tidak official validator since ~2022; membaca twitter:* pertama, falls back untuk OG.
• rendering: sebagian besar social crawler jangan jalankan JS — tags harus menjadi server-dirender; Slack adalah reported (unofficially) untuk fetch hanya sebuah limited byte range, so pertahankan head tags early.

Open Graph implementation checklist

sebuah lulus untuk konfirmasi Anda shared tautan look cara Anda intend:

• semua four diperlukan tags present: og:title, og:type, og:image, og:url.
• og:description dan og:site_name set; og:locale set jika tidak US English.
• og:image adalah di sebuah absolute https:// URL — tidak sebuah relative path, logo, text-berat graphic, atau extreme aspect ratio. Sized 1200×630px (1,91:1) sebagai umum cross-platform convention, atau diperiksa terhadap spesifik platform’s own terdokumentasi minimum jika satu penting sebagian besar untuk Anda (e.g. LinkedIn’s 1200×627/1,91:1, Google menemukan’s ≥1200px-wide/16:9).
• og:image:width / og:image:height / og:image:alt declared untuk help card layout dan accessibility.
• og:url matches Anda rel=canonical so shares consolidate pada satu URL.
• Tags adalah di mentah, server-dirender HTML <head> — confirmed melalui “View Sumber” (terjemahan) “View Sumber” / curl, tidak hanya DevTools’ dirender DOM (sebagian besar social crawler jangan jalankan JavaScript).
• Head tags muncul early di document (Slack adalah reported, unofficially, untuk fetch hanya sebuah limited byte range dari mulai dari halaman).
• og:type matches halaman (article untuk posts, unlocking article:author / article:published_time).
• twitter:card (dan twitter:*) tags set jika Anda ingin jelas control pada X; jika tidak X falls back untuk OG dengan sebuah summary card.
• Previewed di Facebook Sharing Debugger dan LinkedIn Post Inspector; re-scraped setelah apa pun significant judul/image perubahan.
• untuk halaman Anda ingin eligible untuk Google image thumbnails, og:image (atau schema primaryImageOfPage) adalah sebuah bersih, representative image.

Inspect Open Graph output dari terminal

url="$1"
curl -sSL "$url" | grep -Eio '<meta[^>]+property=["'"']og:[^"'"']+["'"'][^>]*>'

Save sebagai check-og.sh, jalankan bash check-og.sh https://example.com/page, dan review mentah server respons. ini catches missing server-dirender tags; gunakan platform re-scrape alat secara terpisah untuk jelas cached previews.

Open Graph mistakes untuk hindari

• menggunakan relative og:image URLs atau sebuah image blocked dari publik fetchers.
• Generating OG tags hanya setelah client-side JavaScript berjalan.
• Penerbitan multiple conflicting nilai untuk yang sama core property.
• Mengubah tags repeatedly ketika sebenarnya issue adalah sebuah platform’s cached scrape.
• Treating social-preview markup sebagai sebuah replacement untuk judul, canonical, atau structured-data berfungsi.

Resources worth Anda time

My related writing

• Beginner’s Guide untuk SEO teknis — di mana appearance layer (judul, deskripsi, dan now OG tags) fits di crawl → indeks → sajikan pipeline. (ini tidak cover Open Graph secara khusus — ini artikel adalah OG deep dive itu guide poin toward.)

My speaking

• Bagaimana Penelusuran berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan serving, yang adalah backdrop untuk mengapa server-dirender OG tags penting (social crawler jangan jalankan JS). (My standing disclaimer applies: “Ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.” (terjemahan) “ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.”)

Official / protocol

• Open Graph protocol (ogp.me) — spec: diperlukan vs. opsional properties dan structured sub-properties.
• Google — Specify sebuah preferred image dengan metadata — og:image sebagai sebuah thumbnail sumber untuk Penelusuran.
• Google — Control Anda judul tautan dan situs Names — og:title dan og:site_name sebagai appearance sources.
• web.dev — Social penemuan — Google’s OGP + Twitter Cards explainer.

dari sekitar industry

• Open Graph Meta Tags: Semuanya Anda perlu Know (Michal Pecánek, reviewed oleh Joshua Hardwick — Ahrefs) — sebuah thorough implementation reference untuk tags dan sizes.
• Google menggunakan keduanya schema.org markup dan og:image untuk thumbnails di Penelusuran dan menemukan (mesin pencari Land, March 2, 2026) — coverage dari og:image thumbnail perbarui.
• Google Clarifies Bagaimana ini Picks Thumbnails untuk Penelusuran, menemukan (mesin pencari Journal) — companion tulis-up pada yang sama perubahan.
• Bagaimana Google Picks Image Thumbnails di Google Search & Google menemukan (Barry Schwartz, mesin pencari Roundtable) — sebuah ketiga corroborating report.
• Facebook Sharing Debugger — alat untuk scraping/re-scraping bagaimana Facebook sees Anda halaman.
• r/TechSEO — community untuk debugging OG/tautan-preview issues.

Uji pemahaman Anda: Open Graph Tags

Five quick pertanyaan pada apa Open Graph tags melakukan dan cara mendapatkan them right. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan