how to create facebook graph api
how to create facebook graph api

What Facebook's Graph Preview Actually Reads

Facebook's share graph reads Open Graph protocol metadata from a page's HTML head to render link cards in News Feed, Messenger, comments and search. The "graph" in this context is the Open Graph Protocol, a small set of <meta> elements that describe a page as a shareable object. It is not the Facebook Graph API that developers use to authenticate users or post on their behalf.

When someone pastes your URL into Facebook, the platform's crawler fetches the page, looks for Open Graph properties in the head, and assembles a preview card from the values it finds. The same metadata is consumed, with varying support, by LinkedIn, Slack, Discord, Pinterest, WhatsApp and many messaging apps. Twitter historically relied on its own Card tags but now falls back to Open Graph for several fields, so a correct Open Graph block reaches well beyond Facebook alone.

Building that block is the practical task behind a search for a Facebook graph API for sharing: produce four required properties, add the optional fields that improve the card, escape every attribute value for safe HTML, and paste the result into the canonical page head. Open Graph Generator performs exactly that production step in the browser, so the output you copy is ready to drop into your template.

Required and Optional Open Graph Properties

PropertyRequired?Purpose
og:titleRequiredNames the shared object; appears as the headline in the preview card.
og:typeRequiredClassifies the object; this generator exposes website and article only.
og:imageRequiredSupplies a publicly reachable image URL used as the card thumbnail.
og:urlRequiredIdentifies the canonical object; the link Facebook associates with shares.
og:descriptionOptionalShort summary; many platforms truncate around 200 characters.
og:site_nameOptionalNames the publishing site shown above or beside the title.
og:localeOptionalLanguage and territory in language_TERRITORY form such as en_US.

The generator always emits the four required properties first, in stable order, and then any optional fields you provide. The Open Graph Protocol specification lists these properties and notes that additional structured types such as music, video and profile carry their own required and optional properties, which is why a focused form keeps the type selector narrow.

Build the Metadata Block With Open Graph Generator

  1. Open Open Graph Generator in a browser. The tool runs entirely client-side, so no URL or title leaves your machine during generation.
  2. Enter the object title exactly as you want it to appear in the preview card. The tool trims whitespace and rejects control characters so the final attribute stays well-formed.
  3. Pick the object type from the select control. Choose website for home pages, landing pages and most marketing destinations, or article for individual editorial pieces. The type is rechecked at runtime even though the control limits the choices, which protects programmatic or altered input.
  4. Paste the canonical page URL into the object URL field. It must be an absolute HTTP or HTTPS address with no fragment and no embedded username or password. A fragment-free URL keeps shares of the same page from splitting across client-side anchors, and credential rejection prevents user information from leaking into public metadata.
  5. Paste the image URL into the image field, again as an absolute HTTP or HTTPS address without fragments or credentials. The image must be publicly reachable so the platform crawler can fetch it; the tool itself does not request the URL and cannot verify HTTP status, MIME type, dimensions, byte size or aspect ratio.
  6. Optionally fill in og:description with a short summary, og:site_name with the publishing brand, and og:locale in language_TERRITORY shape such as en_US. The locale validator accepts only that conservative two-letter shape; alternate locales and script subtags need additional protocol properties this form does not expose.
  7. Generate the block. The output is a property-based meta element list in required-first stable order, with every attribute value HTML-escaped so ampersands, quotes and angle brackets cannot break the resulting tag.
  8. Copy the block from the result panel. It is the only thing you need to paste into your page head; the generator does not append tracking, framework boilerplate or platform-specific tags.

Place the Block in the Canonical Page Head

The copied block is plain HTML and goes directly into the <head> of the canonical page, the same URL you declared in og:url. Place it as raw markup rather than visible text, and do not encode the whole block a second time; the generator has already escaped every attribute value for you.

Avoid duplicating the same properties through multiple systems. If a theme, plugin or framework already writes Open Graph tags, decide which one is authoritative and let it emit them, otherwise the values can disagree and crawlers see whichever one happens to appear first in the served source. Build tools that minify or reorder head content can also overwrite, drop or split meta elements, so inspect the delivered source after each deployment rather than trusting the template.

Use the canonical, publicly accessible URL for og:url, not a tracking redirect or a query-string variant. Search and share systems use that value to consolidate signals for the same object, and a moving URL quietly fragments your graph presence over time. The HTML specification for the meta element requires name and property attributes on the same element shape; Open Graph uses property, not name, and the generator follows that syntax.

Verify the Live Preview on Facebook

A valid Open Graph block does not guarantee how Facebook will render it. The platform can crop images, truncate text, ignore fields, choose cached data or apply account-level policies. After deployment, paste the canonical URL into Facebook's Sharing Debugger to see what the crawler actually fetched, including any warnings about missing properties, blocked images or duplicate tags.

The debugger also exposes a "Scrape Again" control that forces a fresh fetch. Sharing systems cache previews aggressively, so even a correct block can be hidden behind an older cached card for minutes or hours after the metadata changes. Plan to rescrape after publishing, after editing the title, description or image, and after any URL or domain move.

Repeat the same inspection for any other platform you actively target. LinkedIn's Post Inspector, Twitter's Card Validator, Slack's link unfurl preview and Discord's embed inspector each apply their own rules. The protocol block is portable; the cache, image requirements and presentation logic are not.

Limits of the Generated Block

The generator produces Open Graph protocol output only. It does not generate Twitter Card tags; some Twitter fields will fall back to Open Graph values, but service-specific tags and validation remain a separate concern. If you need a richer Twitter card, run a parallel Card generator and reconcile the two blocks in your head.

The object type is deliberately limited to website and article. Other structured types such as music, video and profile need additional properties that this form does not expose; allowing a free-text type would silently produce incomplete structured metadata. Use a specialized implementation when the object genuinely needs a richer type.

The tool validates URL shape, optional text and locale, but it does not crawl either URL. HTTP status, MIME type, image dimensions, byte size, aspect ratio, redirects, robots controls, authentication and platform cache state are verified by you after deployment. The page must remain accessible to each platform's crawler, the image must satisfy that platform's current minimum size and aspect ratio, and the visible page content should match the metadata you publish. A misleading title, description or image can earn a single click and quietly undermine trust with every visitor after it.