An Instant Article is represented by an HTML document that uses standard markup conventions.
At the article level, a series of configuration options can be defined in the markup to customize the way the article is presented.
The URL specified in your Instant Article markup is used to associate the Instant Article version of your article to the web version. This association is important as it helps determine which version of the article to present to a reader based on their platform.
To ensure that your Instant Article will be properly associated with the web article:
Use the same canonical URL across your web and mobile sites. If you use different domains for your web and mobile sites, be sure to set the canonical URL of the mobile page to the URL of the desktop page.
Do not attach any hashes or query parameters to the canonical URL used in either your Instant Article or in the web versions of the article.
For more detail, refer to our guide to Open Graph markup.
Name | Description | Definition |
---|---|---|
Ad | An ad block to be placed automatically throughout the content of this article. | Include an Ad element within the |
Automatic Ad Placement | Enables automatic placement of ads within this article. | Use the first |
Automatic Placement of Multiple Ad Codes | Enables automatic placement of multiple ads within this article. | To specify multiple blocks of ad code, wrap them in a |
Format Version | The version of Instant Articles markup format being used by this article. | Use the first |
Modified Timestamp | The time at which the article was last modified. | Use the first |
Published Timestamp [required] | The time at which the article was originally published. | Use the first |
Right-to-Left (RTL) Publishing | Body text will read right to left (RTL). | Add a |
Style | The style to be applied to this article based on the set of styles that you have created in the Instant Articles Configuration for your Facebook Page. To learn more about creating custom styles for Instant Articles, see our design guide. | Use the first |
URL [required] | The canonical URL for this article. | Use the first |
The published and modified times are used to provide context to the reader on the recency of the article and to determine when the content of the article should be refreshed. These are defined in the <header>
block inside of the article's <body>
.
Use a <time>
element with the op-published
class to specify the time at which the article was originally published and a <time>
element with the op-modified
class to specify the time at which the article was last updated.
<body> <article> <header> <time class="op-published" datetime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time> <time class="op-modified" datetime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time> </header> </article> </body>
You can specify the style of your article based on the set of styles that you have created in the Instant Articles Configuration for your Facebook Page. The article style is defined in the <head>
section of your article.
Use a <meta>
element with the property attribute set to fb:article_style
and content set to the exact name that you have given the style in the settings for your page.
<head> <meta property="fb:article_style" content="myarticlestyle"> </head>
Body text can be formatted to read right to left (RTL) to support languages including Arabic, Hebrew, Persian and Urdu. In order for RTL content to render properly, you will need to add a dir="rtl"
attribute in the HTML
element.
<html lang="ar" dir="rtl" prefix="op: http://media.facebook.com/op#"> <body> <article> <!-- Body text for your article --> </article> </body> </html>
Ads can be automatically placed within your article instead of manually inserting them within the markup of your article.
To enable automatic placement of ads within your article, use a <meta>
element with the property attribute set to fb:use_automatic_ad_placement
and content set to true
. Define the Ad element that will be automatically placed throughout the content of your article in the <header>
section of the article's markup.
<head> <meta property="fb:use_automatic_ad_placement" content="true"> </head> <body> <article> <header> <!-- Ad to be automatically placed throughout the article --> <figure class="op-ad"> <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="50" width="320"></iframe> </figure> </header> </article> </body>
Ads can be manually placed in static locations within the body content of your article without using automatic placement.
To disable automatic placement and manually place all ads within your article, use a <meta>
element with the property attribute set to fb:use_automatic_ad_placement
and content set to false
. Place the Ad elements within the body of your article at the specific positions at which they should be rendered.
<head> <meta property="fb:use_automatic_ad_placement" content="false"> </head> <body> <article> <header></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> </article> </body>
Both automatic and manual placement of ads can be used together in order to control the placement of certain ads inside the content of your article, while taking advantage of automatic placement for the remainder of the content.
First, manually place the Ad elements within the body of your article at the specific positions at which they should be rendered.
Then, enable automatic placement of ads within your article, use a <meta>
element with the property attribute set to fb:use_automatic_ad_placement
and content set to true
. Define the ad block that will be automatically placed throughout the content of your article in the <header>
section of the article's markup. This ad block will be automatically placed throughout the remaining content within the article that does not contain one of your manually placed ads.
<head> <meta property="fb:use_automatic_ad_placement" content="true"> </head> <body> <article> <header> <!-- Ad to be automatically placed throughout the article --> <figure class="op-ad"> <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="50" width="320"></iframe> </figure> </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> <!-- A manually placed ad within your article --> <figure class="op-ad"> <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe> </figure> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </body>
To specify multiple blocks of ad code, wrap them in a <section>
with the class op-ad-template
. They will be placed throughout the article in the order you included them in.
If you add the class op-ad-default
to the <figure>
for one of the blocks of ad code, that ad code will be reused in case there are more placement slots to fill than you have specified ad codes for.
<head> <meta property="fb:use_automatic_ad_placement" content="true"> </head> <body> <article> <header> <section class="op-ad-template"> <!-- Ads to be automatically placed throughout the article --> <figure class="op-ad"> <iframe src="https://www.adserver.com/ss;adtype=banner320x50&adslot=1" height="50" width="320"></iframe> </figure> <figure class="op-ad op-ad-default"> <iframe src="https://www.adserver.com/ss;adtype=banner320x50&adslot=2" height="50" width="320"></iframe> </figure> <figure class="op-ad"> <iframe src="https://www.adserver.com/ss;adtype=banner320x50&adslot=3" height="50" width="320"></iframe> </figure> </section> </header> <!-- Article body goes here --> </article> </body>