embed
This article is a stub. You can help the IndieWeb wiki by expanding it.
embed is code (usually just HTML like an iframe, sometimes with JS) for showing content from another website on your website or inside a post that is included by viewer’s browser and typically has some interactive aspect (more than just a static image / audio / video file).
Why
There are lots of reasons to embed content (transclude if you fancy yourself a fancy hypertexter) from another website into your posts. E.g. some common use-cases:
- Embedding a tweet as a pull-quote or citation
- Add a CC-licensed image from Flickr to your post to illustrate a point
- ...
How to
- At a minimum, just use the recommended iframe or similar markup recommended by the person (or service) publishing the original content you want to embed.
- If you want to explicitly mark up your embeds for discovery, indexing, etc., use h-cite to to indicate the presence of the embed, with at least a
u-url
on the element that does the literal embedding of the content, e.g. img or iframe.
- If you use an
<iframe>
tag to embed, be sure to provide accessible alternative text in itsaria-label
attribute (see MDN docs, dev opera article) as it’s better for alt text than thetitle
attribute which has other presentational effects.
(actual minimal HTML + h-cite example would be good here)
WARNING:
- DO NOT use properties like
u-photo
oru-video
on an embedding element without wrapping it in an h-cite. Doing so associates that content directly with your ownh-entry
, which presumably lists you as ap-author
, thereby erroneously claiming that you took and/or own the content being embedded which is unlikely if you are embedding it from another site.
Examples
Good and interesting examples of embedding
The Guardian
When The Guardian embeds a TikTok video, they show a consent banner in place of the embed, that allows you to opt-in to load that specific TikTok video.
BBC
When the BBC embeds a Tweet (and media from other sites [citation required]), they show a consente banner. You must opt in to load the third-party embedded media before it renders on the page.
Silo Issues
tracking
When you embed a resource from a silo inside a post on your site, your are exposing people using your site to being tracked by that silo.
- AVOID Instagram’s embed code because adding it will lower your page ranking due to norobots from IG https://www.seroundtable.com/google-warns-about-instagram-embeds-indexing-28036.html
- ^^^ more details: https://twitter.com/glenngabe/status/1160881702211936256
- "Via @johnmu: Switch from normal embedded images to Instagram embeds & see a big drop in image search traffic? That's because IG uses iframes & the meta robots tag using noimageindex. That's a big problem. John tested this & I just ran a quick test too: https://www.youtube.com/watch?v=zm7mn2sGuyw&t=29m38s" @glenngabe August 12, 2019
(stub)
As of 2022-??? Twitter tweet embeds show awkward empty blocks when the tweet is deleted.
See Also
- autoembed
- display-guidelines
- Criticism: 2022-04-06 TechCrunch: Twitter is wiping embeds of deleted tweets from the web /
Previously, a deleted tweet embedded in a web page would still display the text content of a tweet. Now that text is gone, showing only a blank box.
- 2022-04-06 Hacker News comments on: Twitter is using its embedded JavaScript to hide tweets that have been deleted
- https://adrianroselli.com/2021/01/bulletproofing-embedded-tweets.html