Embedding a map or another page with an iframe: how it works, and why some pages refuse

SEO & Marketing·· 15 views· 3 min read

The short answer: an iframe is a window inside your page that shows another page (a map, a video, a form). For a map or a video, the service gives you ready-made code. But not every page lets itself be shown this way: many tell the browser to refuse, and the window appears blank with “refused to connect”.

What the site needs

What What to do
What it is for A location map, a video, a booking calendar, a form from another service.
How to do it The service offers an “embed” option and gives a code; you paste it into the page, in an HTML block.
Why it stays blank The destination page forbids being embedded, through a security header, or your own site refuses everything: Security headers.
Privacy An iframe from another service may set its cookies: The cookie notice.
Speed Each iframe is a whole page loading. Defer what is off-screen: Lazy loading.

Getting started

1 Ask the service for the code (on a map, for example, “Share” and then “Embed a map”) and copy it.
2 Paste it into a “Custom HTML” block on the page (in WordPress) or in the page’s file.
3 Give it a size that fits a phone: width at 100% and a reasonable height, instead of a big fixed number.
4 Add a title (the “title” attribute) describing the content, for screen-reader users: Accessibility.
5 Test on the computer and the phone, and in a private window: if it stays blank, look at the warning in the browser console.
If your site also needs to be embeddable elsewhere, or the other way round, the header that prevents it has to change, carefully: allowing everything exposes the site to being shown inside fake pages. A restrictive policy is safer: Content Security Policy.
A map showing where the business is also helps being found: Being found on Google. For videos: Videos on your website.

The iframe stays blank and you have tried this? Open a ticket with the page’s address and the embedded content’s address.

Open a support ticket

SEE ALSO

Security headers explained: what they do and how to add them in .htaccess

Content Security Policy: a first policy, tried out in report-only mode

Videos on your website: upload them or embed from a video service

Lazy loading images and videos: what to defer and what never to

The cookie notice and consent: what your site collects without you knowing

Is your website accessible? Six checks anyone can do

RECOMMENDED PRODUCT

Web hosting with cPanel

Domain and SSL included, daily backups and the panel you already know. from $6.59/mo (3-year plan, with coupon)

See plans
Was this answer helpful? Your answer helps us improve this article.

Related Articles

SEO & Marketing 171 The best SEO plugins for WordPress and how to choose one An SEO plugin gathers, in a single panel inside WordPress, the technical settings that help search engines understand yo...
SEO & Marketing 249 Being found on Google: Business Profile, Search Console and the basics Having a website is not the same as being found. They are different things, and the second does not happen by itself - y...
SEO & Marketing 197 E-mail marketing: doing it properly without burning your domain E-mail is still the channel that returns most per unit of money spent - and also the one where it is easiest to ruin eve...
SEO & Marketing 241 SMS marketing: Sender ID, the rules here, and how to write one that works SMS has an advantage no other channel has here: it reaches everybody, without depending on internet access, an installed...
SEO & Marketing 222 What Yoast SEO is, and what it actually does Yoast SEO is a WordPress plugin that gathers, into a single panel, the technical settings that help search engines under...
SEO & Marketing 4 Query strings explained: what comes after the question mark, and what it changes The short answer: everything after the ? in an address is the query string: name=value pairs separated by &, up to the e...