Article

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.

Options

Name	Description	Definition
Ad	An ad block to be placed automatically throughout the content of this article.	Include an Ad element within the `<header>` of this article. When automatic ad placement is enabled, this ad block will be placed through the content of this article.
Automatic Ad Placement	Enables automatic placement of ads within this article.	Use the first `<meta />` element in the `<head>` with `property` attribute set to `fb:use_automatic_ad_placement`. This parameter is optional and defaults to `false` if you do not specify in your markup.
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 `<section>` with the class set to `op-ad-template`. If you add the class `op-ad-default` to the `<figure>` for a block 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.
Format Version	The version of Instant Articles markup format being used by this article.	Use the first `<meta />` element in the `<head>` with `property` attribute set to `op:version`. This parameter defaults to `1.0` if you do not specify in your markup.
Modified Timestamp	The time at which the article was last modified.	Use the first `<time>` element in the `<header>` that has the class `op-modified`. The element should have a `datetime` attribute with the time specified. Use of this parameter is strongly recommended. If there is no modified time specified we will use the published timestamp instead.
Published Timestamp [required]	The time at which the article was originally published.	Use the first `<time>` element in the `<header>` that has the class `op-published`. The element should have a `datetime` attribute with the time specified.
Right-to-Left (RTL) Publishing	Body text will read right to left (RTL).	Add a `dir="rtl"` attribute in the `HTML` element in each article.
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 `<meta />` element in the `<head>` with `property` attribute set to `fb:article_style`. This parameter is optional and your default style is applied to this article if you do not specify an article style in your markup.
URL [required]	The canonical URL for this article.	Use the first `<link />` element in the `<head>` with `rel` attribute set to `canonical`. The URL must be absolute and must point to a real web page.

Examples

Published and modified times

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>

Style

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>

Right-to-Left (RTL) Publishing

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>

Automatic ad placement only

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>

Manual ad placement only

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>

Automatic and manual ad placement

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>

Automatic placement of multiple ads

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>