Oğuzhan KARAGÜZEL

OĞUZHAN KARAGÜZEL

Software Developer

Open Graph, Structured Data (Schema.org) and ARIA Guide

Author: Oğuzhan KARAGÜZEL ·

In the third part of the SEO series we cover two topics that shape how a page appears in search results and on social media: Open Graph and structured data. At the end we also touch on ARIA labels, a cornerstone of accessibility. Previous part: Technical SEO: robots.txt, Sitemap and Canonical.

What Is Open Graph and Why Use It?

Open Graph is a meta tag protocol developed by Facebook that makes web pages easier to share effectively on social platforms. LinkedIn, WhatsApp, X and many other platforms read these tags as well. The tags define the page's title, description, image and type, and so determine how the share card will look.

  • More attractive shares: A link shared with the right image and title looks more professional.
  • More engagement: A well-prepared card raises the chance of clicks and shares.
  • Control: You decide how the page appears on social media instead of leaving it to the platform's guess.
  • Social media support: Open Graph is not a direct ranking factor, but it contributes indirectly to visibility through sharing and traffic.

Core and Additional Open Graph Tags

Open Graph tags are added as meta tags inside the <head> of the HTML. The core tags are:

  • og:title: The title of the page.
  • og:description: A short description of the page. The same text as your meta description can be used here.
  • og:image: The full URL of the main image shown when the page is shared.
  • og:url: The canonical address of the page.
  • og:type: The type of the page: article for articles, website for general pages.

Additional tags include og:site_name (the name of the site), og:locale (language and region, for example en_US), and og:video and og:audio (the file URL when the page has video or audio). An example page that shows all the tags together:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Page</title>

  <!-- Open Graph -->
  <meta property="og:title" content="Sample Page Title" />
  <meta property="og:description" content="This page is optimized with Open Graph tags." />
  <meta property="og:image" content="https://www.example.com/image.jpg" />
  <meta property="og:url" content="https://www.example.com/page.html" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Sample Website" />
  <meta property="og:locale" content="en_US" />
</head>
<body>
  <!-- Page content -->
</body>
</html>

Open Graph Tips and Testing

  • Image quality: Use an image of at least 1200x630 pixels and high resolution. SVG is not supported; prefer JPEG where possible. The image must be given with a full (absolute) URL.
  • Title and description: Keep them short, clear and appealing; they are the first thing that catches a reader's attention.
  • Testing: You can check that your tags work and see how the card will look with Facebook's Sharing Debugger. Platforms cache cards, so after changing an image you may need to re-scrape the URL in the tool.

Who Manages the Tags?

Decide whether Open Graph tags will be managed by the content editor or by the system. If the editor manages them, guide them in the admin panel: show hints about image format, size, description length and keywords. If you do not leave them to the editor, define standards for fields such as the image. The meta description can also be used as the default og:description.

What Is Structured Data?

Structured data is information marked up in a defined format so that search engines can understand the content of a page better. Instead of guessing, the search engine learns explicitly that a page is about an article, a product, an event or an organization.

  • Rich results: Extra information such as star ratings, prices and event dates can appear in search results, which can increase click-through rate.
  • Better understanding: The search engine grasps more clearly what your site and brand are.
  • User experience: Users see details like product price and reviews right on the results page.
  • Voice assistants: Clearly marked-up content can help search engines and assistants interpret the page correctly.

Note: Structured data does not raise rankings by itself; it enables rich result display and correct understanding. The marked-up information must also match the content visible on the page.

Formats: JSON-LD, Microdata and RDFa

Structured data can be written in three formats using the Schema.org vocabulary. Schema.org is a shared vocabulary supported by Google, Bing, Yahoo and Yandex that defines many types such as products, events, articles and organizations.

  1. JSON-LD: The recommended and most common format. It is added as a <script type="application/ld+json"> block independent of the HTML content, which makes it easy to manage. The rest of this article is built around JSON-LD.
  2. Microdata: Placed inside HTML tags using the itemscope, itemtype and itemprop attributes.
  3. RDFa: Marks up content in a similar way with HTML attributes (vocab, typeof, property).

A Microdata example:

HTML
<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">John Doe</h1>
  <p itemprop="jobTitle">Software Engineer</p>
  <a href="mailto:johndoe@example.com" itemprop="email">johndoe@example.com</a>
</div>

JSON-LD Examples: Article, Product, Event

The blocks below can be added to the <head> or <body> of the page.

Article

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "What Is Structured Data and How Do You Use It?",
  "author": { "@type": "Person", "name": "Jane Doe" },
  "publisher": {
    "@type": "Organization",
    "name": "Sample Publishing",
    "logo": { "@type": "ImageObject", "url": "https://www.example.com/logo.png" }
  },
  "datePublished": "2026-10-23",
  "image": "https://www.example.com/image.jpg"
}
</script>

Product

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Sample Product",
  "image": "https://www.example.com/image.jpg",
  "description": "This is a sample product description.",
  "sku": "12345",
  "brand": { "@type": "Brand", "name": "Sample Brand" },
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/product",
    "priceCurrency": "USD",
    "price": "99.99",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Event

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Sample Event",
  "startDate": "2026-11-10T19:00",
  "endDate": "2026-11-10T23:00",
  "location": {
    "@type": "Place",
    "name": "Event Center",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "1234 Sample Street",
      "addressLocality": "Istanbul",
      "postalCode": "34000",
      "addressCountry": "TR"
    }
  },
  "image": "https://www.example.com/event.jpg",
  "description": "This is a sample event description.",
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/event",
    "priceCurrency": "USD",
    "price": "50",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Breadcrumb, Organization and LocalBusiness

Several markup types can be used together on one page. The most common ones are below.

BreadcrumbList

Shows where the user is on the site and helps the search engine understand the site structure.

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.example.com" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.example.com/blog" },
    { "@type": "ListItem", "position": 3, "name": "Structured Data", "item": "https://www.example.com/blog/structured-data" }
  ]
}
</script>

Organization

Provides basic information about a company or institution.

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Sample Company",
  "url": "https://www.example.com",
  "logo": "https://www.example.com/logo.png",
  "contactPoint": [{
    "@type": "ContactPoint",
    "telephone": "+90-123-456-7890",
    "contactType": "customer service",
    "areaServed": "TR",
    "availableLanguage": "English"
  }]
}
</script>

LocalBusiness

For businesses that serve a specific location; it defines the address, map coordinates and opening hours.

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Sample Cafe",
  "image": "https://www.example.com/cafe.jpg",
  "priceRange": "$$",
  "telephone": "+90-123-456-7890",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1234 Sample Street",
    "addressLocality": "Istanbul",
    "postalCode": "34000",
    "addressCountry": "TR"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": "41.01224", "longitude": "28.976018" },
  "url": "https://www.example.com/cafe",
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    "opens": "08:00",
    "closes": "22:00"
  }]
}
</script>

Validation and Developer Notes

To validate structured data, use Google's Rich Results Test and the Schema.org Schema Markup Validator (validator.schema.org). These tools show whether the markup is valid and how it may appear in search results. The "Structured Data Testing Tool" mentioned in older guides has been retired. To generate ready-made JSON-LD you can also use tools such as the Schema Markup Generator on technicalseo.com.

Things to keep in mind as developers:

  • Add structured data to every page that has a suitable type.
  • Leave part of the management to the user (for example editable fields in the CMS).
  • Check for errors; invalid JSON-LD is as useless as none at all.
  • Fill in suitable types for all the information on the page: Organization, Article, BreadcrumbList, Person and so on.

ARIA-label and ARIA-labelledby

ARIA (Accessible Rich Internet Applications) is the WAI-ARIA standard that makes web applications more accessible to assistive technologies. It lets tools such as screen readers understand the purpose of an element. An accessible site reaches a wider audience and improves the overall user experience as well.

aria-label

Gives an element an accessible name directly. It is used when the element has no visible text, or when that text is not enough:

HTML
<button aria-label="Add comment">+</button>

A screen reader announces this button as "Add comment" instead of "+".

aria-labelledby

Takes the element's name from the content of another element on the page. It is typically used to name a section or a dialog by its own heading:

HTML
<section aria-labelledby="cart-title">
  <h2 id="cart-title">My cart</h2>
  ...
</section>

When a screen reader reaches this section, it announces it as "My cart". For form fields, use the native approach instead of ARIA: a <label for="..."> element. In short, aria-label is suited to giving a short, direct name, while aria-labelledby is suited to linking to text that already exists on the page. Whenever possible, use native HTML elements first (<button>, <label>, <nav>) and add ARIA only where they are not enough.

Checklist

  1. Does every page have og:title, og:description, og:image, og:url and og:type?
  2. Is og:image at least 1200x630 pixels, a JPEG, and given with an absolute URL?
  3. Has the share card been tried with the Sharing Debugger?
  4. Does every page have suitable JSON-LD (Organization, Article, BreadcrumbList and so on)?
  5. Has the JSON-LD been validated with the Rich Results Test or the Schema Markup Validator?
  6. Does the marked-up information match the content visible on the page?
  7. Are aria-label or aria-labelledby used on buttons and form fields that have no text?

In the final part of the series we cover website speed and Core Web Vitals.