Comment on Understanding WordPress oEmbed and {{unknown}} PostMeta Entries by SEO Dave.

WordPress oEmbed Inside Pre Tags After more How WordPress Embeds and the oEmbed Cache Work research I’ve come to the conclusion the WordPress developers behind this feature are nuts :-)

We add a link to a WordPress post on it’s own line and WordPress runs the oEmbed functions to add the embed content to the WordPress database. The format of the code added to the database is nuts, example below.

If you add a plain text link to “https://stallion-theme.co.uk/stallion-responsive-theme/” on it’s own line the embed code is added to the PostMeta table (see main article for full details) and it looks like this:

meta_id = “9999” (a number to identify the row).

post_id = “1234” The Post_ID of the post you added the link to.

meta_key = “_oembed_3cfd8fab65a2b6d609afed717f1b155e” (MD5 hash of the URL plus some variables).

meta_value = This is the interesting bit.

<blockquote data-secret="cjMMnDnKnr" class="wp-embedded-content"><a href="https://stallion-theme.co.uk/stallion-responsive-theme/">Stallion Responsive Theme</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://stallion-theme.co.uk/stallion-responsive-theme/embed/#?secret=cjMMnDnKnr" data-secret="cjMMnDnKnr" width="500" height="282" title="&#8220;Stallion Responsive Theme&#8221; &#8212; WordPress SEO Theme" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Going to breakdown the meta_value down further.

At the top the blockquote holds an hyperlinked URL (a standard text link) with the URL you added to the post and it’s anchor text uses the posts title (the title of “https://stallion-theme.co.uk/stallion-responsive-theme/”).

<blockquote data-secret="cjMMnDnKnr" class="wp-embedded-content"><a href="https://stallion-theme.co.uk/stallion-responsive-theme/">Stallion Responsive Theme</a></blockquote>

It’s a link included in a blockquote, nothing special/nuts about that. This is backup content for when the iFrame code (which relies on javascript) fails to load (javascript not installed for example).

SEO wise this counts as a backlink to “https://stallion-theme.co.uk/stallion-responsive-theme/” with anchor text “Stallion Responsive Theme”. If you wanted to pass SEO benefit to the above URL, great, if not that’s not so good. Up until recently I added plain text URLs into posts I didn’t want to pass SEO benefit to.

The next part of the meta_value contents is an iFrame.

SEO wise iFrames are partially hidden content to Google (could have an impact to Google PageSpeed Insights Results: depends what the iFrame loads). In SEO ranking terms Google won’t consider the contents of an iFrame as been part of the page the iFrame is added to and no SEO benefit is passed to the iFrame URLs. iFrames can be quite useful SEO wise to load content you don’t want Google to count as part of the webpage.

<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://stallion-theme.co.uk/stallion-responsive-theme/embed/#?secret=cjMMnDnKnr" data-secret="cjMMnDnKnr" width="500" height="282" title="&#8220;Stallion Responsive Theme&#8221; &#8212; WordPress SEO Theme" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

The iFrame loads an oEmbed version of the URL posted, the iFrame loads “https://stallion-theme.co.uk/stallion-responsive-theme/embed/#?secret=cjMMnDnKnr”.

Now we get to the nuts part, the iFrame has some ‘unusual’ styling like “position: absolute; clip: rect(1px, 1px, 1px, 1px);” (As a side note this code probably doesn’t work in IE6/IE7, you have to also add “clip: rect(1px 1px 1px 1px);”, ‘remove the commas’ to hide the iFrame). To see the content of this iFrame the webpage has to load some javascript, specifically the js file “/wp-includes/js/wp-embed.min.js” the contents of which is:

!function(a,b){"use strict";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf("MSIE 10"),h=!!navigator.userAgent.match(/Trident.*rv:11\./),i=b.querySelectorAll("iframe.wp-embedded-content");for(c=0;c<i.length;c++)if(d=i[c],!d.getAttribute("data-secret")){if(f=Math.random().toString(36).substr(2,10),d.src+="#?secret="+f,d.setAttribute("data-secret",f),g||h)a=d.cloneNode(!0),a.removeAttribute("security"),d.parentNode.replaceChild(a,d)}else;}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!/[^a-zA-Z0-9]/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret="'+d.secret+'"]'),k=b.querySelectorAll('blockquote[data-secret="'+d.secret+'"]');for(e=0;e<k.length;e++)k[e].style.display="none";for(e=0;e<j.length;e++)if(f=j[e],c.source===f.contentWindow){if(f.removeAttribute("style"),"height"===d.message){if(g=parseInt(d.value,10),g>1e3)g=1e3;else if(~~g<200)g=200;f.height=g}if("link"===d.message)if(h=b.createElement("a"),i=b.createElement("a"),h.href=f.getAttribute("src"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener("message",a.wp.receiveEmbedMessage,!1),b.addEventListener("DOMContentLoaded",c,!1),a.addEventListener("load",c,!1)}(window,document);

When the wp-embed.min.js file isn’t loaded the contents of the iFrame are hidden (only the blockquote with a link in loads). The content is still loaded by your webpage, but you can’t see it. What the javascript file does is replace some of the iFrames styling so it comes into view and hides the blockquote link!

This is nuts. Why would WordPress develop a core feature that requires javascript to view the content of an iFrame???

Am I missing something here???

Disable Embeds WordPress Plugin

Disabling the wp-embed.min.js file results in the iFrame content still loading, but not showing (view source, it’s still there).

There’s a WordPress plugin called “Disable Embeds” which is suggested WordPress users install if they want to turn the WordPress 4.4+ autoembeds feature off. Using the Disable Embeds WordPress Plugin will result in hidden content on the site IF the site already had embedded content: potential hidden content issue with Google.

The image below shows the comparison between the Disable Embed plugin turned on/off when content is already embedded (would get the same result with javascript disabled).

Disable Embeds WordPress Plugin

The reason for this is the WordPress oEmbed cache that’s stored in the PostMeta table isn’t renewed by default. If I understand the oEmbed cache correctly, the cache is only renewed when a Post with embedded content is Saved AND the oEmbed cache is older than a set age (not sure what the time is) and even then it’s only for the Post that’s re-saved. To clear the oEmbed cache completely without accessing the database would require re-saving all posts one by one!

If you use the Disable Embeds plugin I suggest clearing the oEmbed PostMeta table cache. I did it manually during testing, but there’s a plugin called oEmbed Cache that includes deleting the cache as a feature. Might be an idea for the Disable Embeds plugin developer to add a clear the oEmbed cache feature as well, since hidden content isn’t a good idea SEO wise.

The way autodiscovery of embeds works is nuts. Every plain text URL is checked, so even if you want to disable embeds other than those on the whitelist (YouTube, Twitter etc…) WordPress still checks them all. They really should have coded this so it only checks those on the whitelist (pre WordPress 4.4) and have the new WordPress 4.4+ features on top of the checking process so it’s easier to disable and less of a potential performance hit (see main article).

David Law