Iframe vs Inline Script vs oEmbed (Which Embed Method to Use)

A bare iframe renders your chart but the host page earns no crawlable credit for the number inside it.

Daniel SmithJun 18, 2026Living Content11 min read

The bare iframe is the wrong default for data you want found, and that is true even though we ship one. An iframe renders your chart inside a separate document the host page does not own, so the number a reader sees is a number the crawler never reads. MDN, documenting iframes, calls page load time "an important SEO metric" and advises setting the iframe source with JavaScript after the main content loads to protect that metric. The iframe is a second page your post pays for, and a search engine reads it as someone else's.

Which embed method to use comes down to three options for putting the same chart on a page: a raw iframe, an inline script loader, and a paste-the-URL oEmbed. They look interchangeable. They are not. The method you choose decides whether the data inside your post is crawlable, citable, and yours, and the shortest snippet is the one that turns that off.

Which embed method to use is the decision nobody makes on purpose

The choice depends on one axis: whether the host page earns crawlable text for the number inside the chart. A raw iframe seals it in a separate document, so nothing is crawlable. An inline script loader paints the facts as real text, then activates the chart. oEmbed returns an iframe, inheriting that invisibility.

You have already decided to embed live data. The fork is not whether the chart appears, because all three methods render it. That part is the easy 5%. What hides under it is which document the number actually lives in, and whether the page you control gets credit for it.

This is where the embed method comparison that matters begins. Interactive and indexable are not the same axis, and the embed method is the knob that sets the second one. A chart can be fully interactive and completely invisible to search at the same time, or fully interactive and rendered as text a crawler reads. Same chart, same data, different method, different outcome.

Four dimensions decide the call: whether the host page gets crawlable text for the number, whether the embed stays interactive, how much friction the setup carries, and which platforms support the method at all. The rest of this comparison ranks the three methods on those four, then proves the ranking on one real chart.

When a bare iframe costs you the citation

Are iframes bad for SEO? For data you want found, yes: a raw iframe renders your chart inside an isolated child document, so the number lives in a separate page your post does not own. The host page contributes zero crawlable text where the chart sits, and search engines and answer engines read an empty frame.

A raw iframe is the reflexive paste, and for findable data it is the costly one. MDN describes the iframe as a way to "embed an entire web document inside another one," and that separateness is the whole point of the method. It is also the whole problem. The number inside the frame belongs to the framed document, so the credit your page could earn for it goes nowhere.

It renders. It looks right. And the crawler reading your page sees an empty frame where your number should be.

The same forfeiture reaches the answer engines. A model assembling an answer reads the host page, and an iframe hands it a sealed box. This is the mechanism behind why AI cites third-party sources instead of the page that did the work, and it is why the embed method is a hidden input to answer engine optimization. An engine cannot cite a number it cannot read.

The durability the iframe actually buys you

The raw iframe is the right tool for exactly one job, and the job is isolation. An iframe renders your chart inside its own document that the host page cannot reach into and cannot break, with a stable contract that does not change underneath you. There is no script on your page to update, no loader behavior to track, nothing that can drift as the platform evolves. For an embed that needs maximum isolation and set-and-forget durability, for content that does not need to count as the host page's own text, the iframe is the correct choice, and it is the one method I made sure we kept when we built all three. It is the wrong default only in the two cases publishers reach for it most: data they want crawled, and data they want an answer engine to cite.

Pick the inline script when the data must be crawlable

The inline script loader is the one method that refuses the interactivity-versus-SEO trade, and it does so by changing the order of operations. When the page loads, the loader eagerly fetches a content fragment and paints the chart's facts as real text the host page owns, then injects the chart's structured data as JSON-LD into your page's own <head>. Only after that does it lazily activate the interactive frame, on intersection, when the reader scrolls it into view. The SEO is not deferred. Only the interactivity is.

A crawler reading the page reads the number; a reader scrolling to the chart gets the live, interactive version. Both happen, and neither waits on the other. That is the whole advantage of the inline script embed: the page gets the text up front and the interactivity on demand.

The fail-safe is the part that earns the recommendation. The frame boots invisible behind the fragment text, and only the first signal that it actually rendered swaps it in. If the frame never boots, the facade text stays put as the embed, so the number you published survives total frame failure, still crawlable, still yours. This is what it means to treat embeds as a distribution layer in your living content infrastructure rather than a paste-once snippet, and it is the affirmative side of how you get cited by AI search: the data inside your post becomes text the page earns credit for.

What renders inline and what stays an iframe

The loader does not flatten every embed into the same shape, and the difference matters for what gets indexed. Living Content blocks, claim pages, and experiments render fully inline, as text, fully indexable. Polls and charts render the facade text plus the interactive frame: the facts paint as crawlable text, the chart itself stays an interactive frame the reader can touch. Both halves are true at once, which is why "the loader makes everything indexable" is the wrong way to describe it. For a chart, what the page is credited for is the facade text the loader paints, and that text is real.

Iframe vs oEmbed, the shortcut that inherits the catch

oEmbed is the genuinely lowest-friction path, and on the right surface it is the correct one. Paste a LiquiChart URL into WordPress, Medium, Notion, Slack, or Discord, and the platform requests the oEmbed endpoint and expands the link into the live chart on its own. No snippet, no script tag, one URL. This is the natural home of the iframe vs oEmbed question, because the two are closer than they look.

The catch is in what comes back. Paste the URL, the platform expands it, then open the response. Inside the JSON, in the html field, sits an iframe. The endpoint returns a type:"rich" response, and the convenience method hands the host an iframe to render, so it inherits exactly what the iframe inherits: a sealed child document, no crawlable text on the host page, no AI-citable credit for the number.

The convenience is real. So is the inheritance. Pick oEmbed where a supported platform makes URL-paste the lowest-friction path and SEO invisibility on that asset is something you can accept, not because the snippet is shortest.

The same chart, three methods, one of them invisible

The page you are reading embeds one real published chart three different ways at once. The chart is the same in all three: a single published asset measuring how much of a post's data goes out of date as the post ages. What changes is the method, and what the method changes is whether the number you are about to see is text this page can be credited for.

DimensionRaw iframeInline script loaderoEmbed
Crawlable text on host pageNo (sealed document)Yes, eager facade text and JSON-LD in <head>No (returns iframe HTML)
Interactive chartYesYesYes
Setup frictionManual pasteMedium (one script tag)Lowest (paste a URL)
Platform fitUniversal fallbackFull-control sitesWordPress, Medium, Notion, Slack, Discord
AI-citable credit for the numberNoYes (facade text is crawled)No

First, the inline script method. This is the live, interactive chart, and the facts inside it are painted as real text on this page before the frame ever loads:

Read this page's source and the chart's numbers are there, as text, indexable, with the structured data injected into the head. The crawler reading this paragraph reads the chart.

Second, the same chart as a raw iframe, the snippet you would paste by hand. It renders an identical chart. It contributes zero crawlable text to this page, because everything inside it lives in a separate document this page does not own:

<iframe
  src="https://www.liquichart.com/embed/chart/aged-data-curve-by-post-age-VuPJVmYm"
  style="width: 100%; height: 550px; border: none; border-radius: 8px;"
  title="The Older the Post, the More of Its Data Is Out of Date"
  loading="lazy"
  referrerpolicy="origin"
  allow="fullscreen"
></iframe>

Third, the paste-a-URL path. This is what the oEmbed endpoint actually returns when a platform expands the chart's URL. The convenience is one object, and the proof is one field:

{
  "type": "rich",
  "version": "1.0",
  "title": "The Older the Post, the More of Its Data Is Out of Date",
  "provider_name": "LiquiChart",
  "provider_url": "https://www.liquichart.com",
  "width": 600,
  "height": 550,
  "html": "<iframe src=\"https://www.liquichart.com/embed/chart/aged-data-curve-by-post-age-VuPJVmYm\" style=\"width:100%;height:550px;border:none;border-radius:8px;\" title=\"The Older the Post, the More of Its Data Is Out of Date\" loading=\"lazy\" referrerpolicy=\"origin\" allow=\"fullscreen\"></iframe>",
  "cache_age": 3600,
  "thumbnail_url": "https://www.liquichart.com/chart/aged-data-curve-by-post-age-VuPJVmYm/opengraph-image",
  "thumbnail_width": 1200,
  "thumbnail_height": 630
}

Look at the html field. The lowest-friction method returns an iframe, the same sealed document as the manual paste, which is why two of these three renders show the chart and only one of them lets this page take credit for the number inside it. The chart rendered all three times. The data is findable once.

Which embed method to use, by where the content has to count

There is no single best method, and anyone selling you one is selling a default. You do not pick the shortest snippet. You pick by where the content needs to count.

The raw iframe is right when isolation and set-and-forget durability outweigh indexability, for content that was never meant to read as your page's own. The inline script loader is the call when the data has to be crawlable and citable, which covers most published data with a number in it. oEmbed earns the paste only where a supported platform makes the URL the lowest-friction option and you can absorb the SEO invisibility on that one asset.

If you want the interactive layer without touching code, that is its own decision, and the playbook for making blog posts interactive without code takes it up. The method question stays the same underneath it.

Three methods get the same chart onto the page. Before you read what your peers reach for, which one do you reach for?

Living Content

Every method on the list renders the chart, which is why the choice can feel finished the moment the picture appears. As readers weigh in above, the difference that never shows up on screen, the one that only surfaces when something tries to read the page later, will come into focus.

Whatever you reach for, the method you pick decides one thing the chart itself never shows you: whether the data inside it counts as text the page can be credited for.

What the method decides for you

You came in believing all three methods just show the chart. They do. That was never the decision. The decision is whether the page you control earns durable credit for the number, the kind a crawler and an answer engine can both read, and that is set the moment you choose which of the three snippets to paste.

The shortest snippet is the one I trust least for data I want found. It is the one that turns crawlability off.

Once you have made that call, the setup is the easy part, and there is a walkthrough for how to embed a live chart on whichever platform you publish to.

A chart a crawler cannot read is a claim your post never gets credit for. The method you paste decides which kind you are publishing.

Create a Chart That Stays Accurate

Build a chart, embed it, and stop worrying about whether the data is still current.

Supporting Data & Claims

Every anchor below is first-party. Polls are live. Claims are monitored. Experiments are dated.

Related Posts

Quarterly Content Audit Checklist (Checks Your Data, Not Just Rankings)

Most of your quarterly audit is fine on a calendar, but two rows on it keep no schedule you control.

Jun 17, 2026

What Is Content Maintenance Infrastructure?

The system that runs before the audit is necessary.

Apr 6, 2026

How to Make Your Blog Posts Interactive (Without Code)

Five methods that generate reusable data instead of distracting readers.

Mar 4, 2026