HTML and OpenGraph Metadata in Frames

HTML and OpenGraph Metadata in Frames

Neynar's API now supports HTML metadata for frames and catalogs, providing rich information about embedded content. This feature allows you to access Open Graph (OG) data and oEmbed information for frames and catalogs, similar to how it works with casts.

Overview

HTML metadata includes two main components:

  1. Open Graph (OG) data: Standard metadata used across the web to describe content, including title, description, images, and more.
  2. oEmbed data: A format for allowing embedded content from one site to be displayed on another site.

Accessing HTML Metadata

When retrieving frames or catalogs through the API, you can now access the html property which contains all the metadata associated with the frame or catalog URL.

Example Response

{
  "html": {
    "title": "Example Frame",
    "description": "This is an example frame with metadata",
    "image": "https://example.com/image.jpg",
    "url": "https://example.com/frame",
    "oembed": {
      "type": "rich",
      "version": "1.0",
      "title": "Example Frame",
      "author_name": "Example Author",
      "provider_name": "Example Provider",
      "html": "<iframe src='https://example.com/embed'></iframe>",
      "width": 600,
      "height": 400
    }
  }
}

Metadata Types

Open Graph Properties

The Open Graph properties available include:

  • title: The title of the content
  • description: A description of the content
  • image: URL to an image representing the content
  • url: The canonical URL of the content
  • site_name: The name of the site
  • And many other standard OG properties

oEmbed Types

The oEmbed data can be one of four types:

  1. Rich: General embeddable content with HTML
  2. Video: Video content with playback capabilities
  3. Photo: Image content
  4. Link: Simple link content

Each type has specific properties relevant to that media type.

Use Cases

HTML metadata in frames and catalogs enables:

  • Rich previews of frame content in applications
  • Better understanding of frame content without loading the full frame
  • Enhanced display of catalog entries with proper titles, descriptions, and images
  • Improved accessibility for frame content

Implementation Notes

  • HTML metadata is automatically extracted when frames and catalogs are processed
  • No additional parameters are needed to retrieve this data
  • The metadata follows standard Open Graph and oEmbed specifications

This feature makes it easier to build rich, informative interfaces that display frame and catalog content with proper context and visual elements.