How to Set the Open Graph Type for Facebook Sharing

Put this tag in the document’s <head>:

<meta property="og:type" content="article">

Use article for a standalone article, blog post, or news page. Use website for a home page, company page, landing page, or other general site page. The value describes what the URL represents to Open Graph consumers such as Facebook.

For a complete minimum setup, include the four basic Open Graph properties together:

<head>
  <meta property="og:title" content="How to Set the Open Graph Type for Facebook Sharing">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-type">
  <meta property="og:image" content="https://example.com/images/open-graph-type.jpg">
</head>

Open Graph is a protocol for making a web page a rich object in a social graph. See the official Open Graph protocol specification.

1. Add og:type to the HTML head

1. Open the template that renders the page’s HTML document.
2. Place one og:type declaration inside <head>.
3. Choose article or website based on the page’s meaning.
4. Deploy the page and inspect the server-rendered HTML, rather than only the client-side DOM.

Example for an article:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Set the Open Graph Type for Facebook Sharing</title>
  <meta property="og:title" content="How to Set the Open Graph Type for Facebook Sharing">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-type">
  <meta property="og:image" content="https://example.com/images/open-graph-type.jpg">
</head>
<body>...</body>
</html>

Example for a home page:

<meta property="og:type" content="website">

2. Choose between article and website

Page	Recommended type	Why
Standalone blog post, tutorial, news story	article	The URL represents a specific editorial work.
Home page or company overview	website	The URL represents a general site or destination.
Product landing page	website	It is a general page rather than an editorial article.
Music, film, episode, or other supported vertical object	The relevant vertical type	The specification defines types such as music.song, video.movie, video.episode, video.tv_show, and video.other.

Do not select article merely because a page contains paragraphs. Select it when the URL is a standalone article object. For a normal site page, website is the general fallback.

3. Add the required companion properties

og:type works as part of a consistent set. Supply absolute URLs for both og:url and og:image, and keep the title aligned with the visible page.

<meta property="og:title" content="Your page title">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com/articles/example">
<meta property="og:image" content="https://www.example.com/images/example.jpg">

• og:title: the title consumers should display.
• og:type: the object category.
• og:url: the canonical absolute URL for the object.
• og:image: an absolute URL to the preview image.

4. Add article metadata when the type is article

The article namespace supports publication and editorial context. Add only values you can maintain accurately.

<meta property="article:published_time" content="2026-09-29T12:00:00Z">
<meta property="article:modified_time" content="2026-09-29T12:00:00Z">
<meta property="article:author" content="https://example.com/authors/name">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="Open Graph">

Other supported article properties include article:expiration_time. Use ISO 8601 timestamps with a timezone, absolute author URLs, and a section or tags that describe the page. These fields supplement the four basic properties; they do not replace them.

5. Implement it in common rendering setups

Static HTML

Write the tags directly in the page template’s <head>, as shown above.

Server-side templates

<meta property="og:type" content="{{ page.isArticle ? 'article' : 'website' }}">
<meta property="og:url" content="{{ page.canonicalUrl }}">

Escape attribute values and ensure the final response contains one value for each property.

Client-rendered applications

Social crawlers may inspect the initial HTTP response before JavaScript runs. Prefer server-side rendering or static generation for Open Graph tags. If tags are inserted in the browser, verify that the crawler receives them in the response it fetches.

6. Validate the final HTML

1. Fetch the public URL without authentication.
2. View the raw response source.
3. Confirm all four basic properties are inside <head>.
4. Check that og:type appears once and matches the page.
5. Open og:url and og:image directly to confirm they are absolute, reachable URLs.
6. Compare the metadata with the title, canonical URL, and content users see.

When a page has multiple declarations for the same property, conflicting values are risky. The Open Graph specification gives preference to the first tag from top to bottom, so remove duplicates instead of relying on ordering.

7. Troubleshooting common problems

Symptom	Likely cause	Fix
Facebook shows a generic site preview for a post	og:type is missing or set to website.	Set one og:type tag to article in the head.
The wrong type appears	Duplicate tags conflict, or an old template is still deployed.	Inspect raw HTML, remove duplicates, and deploy the correct template.
No image appears	og:image is missing, relative, blocked, or unreachable.	Use one absolute, publicly reachable image URL.
The shared title is stale	A cached preview has not been recrawled.	Confirm the live HTML first, then use Facebook’s available debugging and refresh workflow. The specification does not define a universal cache-refresh time.
Metadata works in a browser but not for sharing	Tags are added only after client-side JavaScript runs.	Render them in the initial server response or static HTML.
Dates or author details are ignored	Properties use the wrong namespace, invalid timestamps, or non-absolute URLs.	Use the exact article: names, ISO 8601 timestamps, and absolute author URLs.

8. Performance, reliability, and maintenance

• Open Graph tags add very little response size, but avoid generating duplicate sets across nested layouts.
• Generate values from the same canonical route data used for the page title and URL so redirects do not create inconsistent previews.
• Keep preview images stable and publicly reachable. A short-lived or access-controlled image can fail after the page itself loads.
• When publishing or editing an article, update article:modified_time only when the content actually changes.
• There is no specification-defined guarantee for how quickly Facebook refreshes a cached preview. Validate the deployed source before investigating cache behavior.

9. Or skip the browser setup

If you need a rendered preview of a page to inspect its Open Graph result, ScreenshotNeo can capture the URL through one API request. The API can render the page after it loads, while its cleanup steps remove cookie banners, newsletter popups, and chat widgets before the shot.

See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/open-graph-type -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/open-graph-type"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/open-graph-type' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes known consent platforms, newsletter popups, and chat widgets before capture; bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, with the result identified by X-Page-Verdict and X-Billed headers. Its MCP server supports AI agents through take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account.

10. FAQ

Should a blog post use article or website?

Use article when the URL is a standalone editorial post. Use website for a general site, home page, or non-editorial destination.

Can I put og:type in the body?

Put it in the document’s <head> so consumers can discover it as page metadata.

Do I need every article: property?

No. They are optional structured properties. Start with the four basic Open Graph properties and add article fields you can maintain.

What happens if two og:type tags exist?

Conflicting duplicates can produce unexpected results because the first value in document order takes precedence. Keep one declaration.

Does changing og:type immediately change an old share?

Not necessarily. Cached previews may remain until the consumer recrawls the URL, and the specification gives no universal refresh interval.