How to Create Facebook Link Preview Images for an Indian Real Estate Website

To control the image Facebook can use when someone shares a property page, add Open Graph metadata to that page’s HTML <head> and set og:image to an absolute, publicly fetchable URL for the intended image. Give each listing its own accurate title, canonical URL, image, image description, and summary. An ordinary image displayed in the page body does not replace og:image.

The Open Graph Protocol identifies og:title, og:type, og:image, and og:url as its four basic properties. It describes og:description as optional but generally recommended, and says pages with og:image should specify og:image:alt. Open Graph Protocol

1. Choose an image for each property page

Start with an approved photograph that accurately represents the property, such as an exterior or a representative interior. You can use the photograph directly or compose a branded share graphic around it. Keep essential information secondary to the property image and check that the image remains understandable at small preview size.

Choose between a direct photo and a composed graphic by considering listing accuracy, small-scale legibility, brand consistency, and the work needed to produce an image for every page. These are practical design considerations; the Open Graph Protocol does not prescribe real-estate art direction or an India-specific image rule.

Use an image you have permission to publish for the listing. Make sure the image URL is stable and absolute, for example https://www.example.in/media/listing-share-image.jpg, rather than a relative path such as /media/listing-share-image.jpg. The protocol defines og:image as the URL of the image representing the object.

2. Add Open Graph tags to the HTML head

Here is a complete example for a property listing. Replace the example values with the real page title, canonical URL, image URL, alternative text, and description.

<!doctype html>
<html lang="en">
<head prefix="og: https://ogp.me/ns#">
  <meta charset="utf-8">
  <title>2-bedroom apartment in [Locality], [City]</title>

  <meta property="og:title" content="2-bedroom apartment in [Locality], [City]">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.example.in/property/listing-slug">
  <meta property="og:image" content="https://www.example.in/media/listing-share-image.jpg">
  <meta property="og:image:alt" content="Exterior view of the listed apartment building">
  <meta property="og:description" content="View details, photos, and listing information for this property.">
  <meta property="og:image:type" content="image/jpeg">
</head>
<body>
  <h1>2-bedroom apartment in [Locality], [City]</h1>
  <p>Property listing details go here.</p>
</body>
</html>

For a normal listing page, website is a suitable og:type value. Use the permanent, canonical page URL for og:url. The protocol treats it as the object’s permanent identifier. The image alternative text should describe what the image depicts; it is not a caption.

Optional image properties

The protocol also defines og:image:width, og:image:height, og:image:secure_url, and og:image:type. Add them when the values are known and useful:

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:secure_url" content="https://www.example.in/media/listing-share-image.jpg">
<meta property="og:image:type" content="image/jpeg">

The example dimensions are illustrative metadata values, not a claim about Facebook’s current minimum or recommended image size. The protocol page alone does not establish Facebook-specific pixel requirements, file-size limits, or accepted formats. Check current Meta guidance before treating any such value as a platform requirement.

3. Make the metadata page-specific

A real-estate site often creates listing pages from a shared template. Populate the Open Graph values from the current listing record rather than reusing one image and description across the whole site.

Property	What to put there	Common mistake
`og:title`	A concise, accurate title for this property page.	Leaving the same generic site title on every listing.
`og:type`	`website` for a normal listing page.	Using a type that does not describe the page.
`og:url`	The canonical URL of this listing.	Using a tracking URL, another listing’s URL, or a noncanonical variant.
`og:image`	An absolute URL for the chosen share image.	Using a relative path, private image, or unrelated property photo.
`og:image:alt`	A short, accurate description of the image.	Leaving it out or using it as a promotional caption.
`og:description`	A useful summary of what the visitor will find on the page.	Copying boilerplate that does not describe this listing.

If the site supports a CMS field for social sharing metadata, set it per listing and inspect the rendered HTML. Otherwise, update the page template so it emits the values from each listing’s data. The protocol specifies metadata in the document head; it does not guarantee how a particular CMS or web framework renders that head.

4. Handle multiple images deliberately

The protocol permits repeated values for array properties. If you publish multiple og:image tags, put the preferred preview image first. The protocol says that where repeated properties conflict, the first tag from top to bottom takes preference. Do not assume that adding more images makes the intended one more likely to appear.

5. Verify the deployed page and preview

Open the deployed property URL and inspect its rendered document head or page source.
Confirm the four basic Open Graph properties are present and correct.
Check that og:image is an absolute URL to the image selected for this listing and that the URL is publicly fetchable.
Confirm the title, description, image alternative text, and canonical page URL match the listing.
Review the share preview using Meta’s current Sharing Debugger or documentation, and follow its current instructions if you need to inspect or refresh a preview.

The Open Graph Protocol documentation does not specify Facebook crawler access requirements, cache lifetimes, cache-refresh steps, or guaranteed preview behavior. Treat the live Meta tool as the place to check Facebook-specific results rather than assuming that correct tags alone guarantee a particular cached preview.

Or skip the browser setup

If you need a screenshot of the property page itself for review or a workflow, ScreenshotNeo can return an image or PDF from one API request. It does not create or set your Facebook Open Graph metadata; og:image still needs to point to the share image you intend Facebook to use.

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://www.example.in/property/listing-slug \
  -o property-page.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://www.example.in/property/listing-slug",
    },
    timeout=90,
)
r.raise_for_status()
open("property-page.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://www.example.in/property/listing-slug',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('property-page.webp', Buffer.from(await res.arrayBuffer()));

Troubleshooting

Symptom	Likely cause	What to check
The wrong image appears in the preview.	The page emits a different or earlier `og:image`, or the preview is cached.	Inspect the deployed head and order repeated image tags deliberately; use Meta’s current tool for cache-specific guidance.
No intended image is available.	The image URL may be relative, incorrect, inaccessible, or not the image you meant to publish.	Use an absolute URL and verify the deployed image URL independently. The cited protocol does not define crawler access or HTTP response rules.
Different listings show the same title or image.	The CMS or template may be using site-wide defaults for every page.	Render metadata from the current listing record and inspect several deployed listing pages.
The preview does not reflect a recent metadata change.	A platform may retain preview data, or the changed tags may not be in the deployed HTML.	First verify the deployed head, then consult Meta’s current Sharing Debugger instructions. No cache timing or refresh procedure is established by the protocol source.
Image dimensions or format appear to be rejected.	A Facebook-specific constraint may apply, but the Open Graph Protocol source does not state current limits.	Check current Meta documentation for format, dimensions, and file-size rules; do not infer them from optional Open Graph dimension tags.

Performance, reliability, and cost considerations

Generate once, reuse carefully: store or derive a page-specific share image rather than rendering a new image on every page view. Ensure updates to a listing can update its image URL or content as needed.
Keep metadata in the initial rendered document: inspect the actual deployed HTML head. A browser rendering that looks correct does not by itself prove the intended metadata was emitted in the page source.
Use stable asset URLs: changing an image behind the same URL can make preview freshness harder to reason about. If you replace an asset, verify the result through the current platform tooling.
Cost: the Open Graph tags are page metadata; this implementation does not require buying a special screenshot product. Image creation and hosting costs depend on the tools and services already used by the site.

FAQ

Does changing the visible hero image change the Facebook preview?

Not by itself. Set the intended preview image in og:image in the document head.

Do I need separate Open Graph tags for every listing?

Each page should emit values that describe that page. A shared template can do this by reading the current listing’s data.

Does the Open Graph Protocol specify Facebook image dimensions or cache timing?

The protocol documentation referenced here does not establish those Facebook-specific details. Check current Meta guidance and tools for them.

Is there an India-specific Open Graph rule for property listings?

No India-specific technical rule is established by the source used here. Use accurate local listing details and imagery appropriate to the page.

Sources

The Open Graph Protocol documents the core properties, optional image metadata, and ordering behavior described in this guide.