Instant Articles are constructed from a set of elements that define the unique features and display components of the article. If you're just getting started with Instant Articles, begin by reading our Creating Articles guide for a tutorial on how to begin publishing Instant Articles to your Facebook Page.
This document provides detailed guidance on how to use and configure Instant Articles markup. It also includes markup for a sample article to show how the markup is implemented.
To stay up-to-date on Instant Articles improvements and technical updates, subscribe to the Instant Articles News blog.
The following elements represent the supported set of components used to build Instant Articles.
An advertisement embedded inside an article.
Analytics code inside of an article.
An animated GIF inside of an article.
Top-level configuration for your Instant Article.
Defining an author of your article.
Highlight a quotation with source attribution.
Text content within your article.
Descriptive text providing additional context to a media element.
Adding a social embed or interactive graphic inside an article.
Controlling likes and comments on articles and media elements.
Adding credits and copyright information into your footer.
A visual header rendered within your article.
An image within an Instant Article
A collection of items in list form.
Interactive map within an Instant Article.
Preview of your Instant Article in News Feed.
Highlight key points or phrases in an Instant Article.
A list of articles or sponsored content related to an Instant Article.
A slideshow display for multiple images in an Instant Article.
A video within an Instant Article.
The following example illustrates the high-level structure of an Instant Article. For more detail on each element, refer to the specific details in the Elements section of this document.
<!doctype html> <html lang="en" prefix="op: http://media.facebook.com/op#"> <head> <meta charset="utf-8"> <link rel="canonical" href="http://example.com/article.html"> <meta property="op:markup_version" content="v1.0"> </head> <body> <article> <header> <!-- The title and subtitle shown in your Instant Article --> <h1>Article Title</h1> <h2>Article Subtitle</h2> <!-- The date and time when your article was originally published --> <time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time> <!-- The date and time when your article was last updated --> <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time> <!-- The authors of your article --> <address> <a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a> Brandon is an avid zombie hunter. </address> <address> <a>TR Vishwanath</a> Vish is a scholar and a gentleman. </address> <!-- The cover image shown inside your article --> <figure> <img src="http://mydomain.com/path/to/img.jpg" /> <figcaption>This image is amazing</figcaption> </figure> <!-- A kicker for your article --> <h3 class="op-kicker"> This is a kicker </h3> </header> <!-- Article body goes here --> <!-- Body text for your article --> <p> Article content </p> <!-- A video within your article --> <figure> <video> <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" /> </video> </figure> <!-- An ad within your article --> <figure class="op-ad"> <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe> </figure> <!-- Analytics code for your article --> <figure class="op-tracker"> <iframe src="" hidden></iframe> </figure> <footer> <!-- Credits for your article --> <aside>Acknowledgements</aside> <!-- Copyright details for your article --> <small>Legal notes</small> </footer> </article> </body> </html>