Since this afternoon, Facebook is not able to read the og tags of a website I'm working on anymore. Facebook debugger says all my properties are missing (og:url, og:type, og:title, og:image, og:description, etc) when I can clearly see all of them in my source code.
When I view the source of this page (or any other page on this domain), everything looks ok.
However, when I input that page in Facebook's debugger and use 'See exactly what our scraper sees for your URL', the code is all messed up with words and spaces missing. In fact, the whole section containing the og properties is missing.
What's happening? I haven't changed anything to the website recently and it was working fine before. Only thing that changed recently are my dns settings, but this should not be affecting Facebook...
Anyone sees what I'm missing here?
Many people suggested in other threads that the problem is because the paths are relatives instead of absolute (like for og:image, for exemple), but that clearly isn't my problem as my paths are absolute, and the section with all my og properties is simply just not showing up when scraping as Facebook.
Thanks
I found this problem on my websites too. It's because of W3 Total Cache's Minify feature. Disable it and purge all caches, then you're good to go.
Sometimes the browsers auto fix some HTML for rendering the page correctly, things like closing tags, adding missing semantic tags, etc. But the bots are a bit more demanding on valid HTML.
Let's take the first 12 lines of the source of that page you shared. This is what the browser receives:
<!doctype html>
<!--[if IE 8]><html
class="ie8" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]-->
<!--[if IE 9]><html
class="ie9" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]-->
<!--[if gt IE 8]><!--><html
lang="fr-FR" prefix="og: http://ogp.me/ns#"> <!--<![endif]--><head><link
rel="stylesheet" type="text/css" href="http://cdn.vedettequebec.com/wp-content/cache/minify/ef20c.css?x41125" media="all" /><meta
charset="UTF-8" /><meta
name="viewport" content="width=device-width, initial-scale=1.0"><link
rel="pingback" href="http://vedettequebec.com/xmlrpc.php" /><meta
name="author" content="BadassB"><link
As you can see, the attributes are wrapped up to the next line, which is kind of valid and most browsers will handle that, but looks like the Facebook scraper trims the \n characters and interprets the code like so:
<!doctype html><!--[if IE 8]><htmlclass="ie8" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]--><!--[if IE 9]><htmlclass="ie9" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]--><!--[if gt IE 8]><!--><htmllang="fr-FR" prefix="og: http://ogp.me/ns#"> <!--<![endif]--><head><linkrel="stylesheet" type="text/css" href="http://cdn.vedettequebec.com/wp-content/cache/minify/ef20c.css?x41125" media="all" /><metacharset="UTF-8" /><metaname="viewport" content="width=device-width, initial-scale=1.0"><linkrel="pingback" href="http://vedettequebec.com/xmlrpc.php" /><metaname="author" content="BadassB"><link
You see the issue now? The code is broken due to the attributes being added right next to the tag name, causing tons of "unclosed tags". For example, check the <html> tag being converted to <htmlclass> and its closing tag will be </html> because there's nothing right after the tag name, making that tag unclosed.
Disable any plugins that could be harming your HTML, plugins like HTML minifiers. Check in the settings if there's something like "wrap attributes to new lines".
Related
I am having a bit of an odd problem that I have never experienced before. I have checked the net and asked someone but could not find the answer. When I work on my website and publish it, the CSS will not update unless I put a ?vh=1 at the end of the css links. The site
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../dist/css/main.css?vh=1.5">
<link rel="stylesheet" media="screen and (max-width: 819px)" href="../dist/css/_tablet/index-tablet.css?vh=1.2">
<link rel="stylesheet" media="screen and (max-width: 414px)" href="../dist/css/_mobile/index-mobile.css?vh=1.7">
<link rel="icon" href="../assets/images/quorum_favicon.svg" type="image/gif" sizes="16x16">
<title>Quorum / Home</title>
</head>
Here's an example of what the head looks like on all my pages. I am working on the responsiveness and what I have to do every time is change the number after the ?vh= and it's slowing down my workflow super fast. I won't even know which link I have to change either so I am spending more time figuring that out than actually styling the site. Is this normal to happen?
EDIT: I also wanted to mention I have cleared the cache several times and done hard refreshes so that has not worked either.
Cloudflare (what you are using) has a server side cache as well, see https://support.cloudflare.com/hc/en-us/articles/202775670-Customizing-Cloudflare-s-cache. Clearing the client side cache in your browser has no affect on the server side cache used by cloudflare. Specially check https://support.cloudflare.com/hc/en-us/articles/200172516#h_a01982d4-d5b6-4744-bb9b-a71da62c160a to see that CSS files are cached. Configure your cloudflare application/installation/host to change the caching settings in a way you like.
Have been running some accessibility checkers our website and they seem to indicate lang tag is empty.
Initially I thought the problem was caused because language was setup to be en-US. So I changed it to en-UK
Here is the code on header.php
<!DOCTYPE html /><!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" <?php language_attributes(); ?>><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" <?php language_attributes(); ?>><!--<![endif]-->
On wp-config.php I have set define('WPLANG', 'en-GB');. Have also downloaded a localised version of Wordpress. Created a languages subdirectory within wp-content and uploaded the en_GB.mo file onto it.
When I run this on the accessibility checker I am still getting an error saying lang tag is empty
http://wave.webaim.org/report#/http%3A%2F%2Fwww.warwickshire.gov.uk%2F
Could anybody point me in the right direction to fix this as it's being flagged up by other accessibility audits run on the site.
Many thanks.
There can be two reasons, the first one is that you missed using xml:lang attribute, also this is not mandatory. Maybe, Wave do care about it?
<html xml:lang="en_US" lang="en_US">
The second one, is the way you define your html tag which can cause problem to the Webaim parser.
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en-GB"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en-GB"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en-GB"><!--<![endif]-->
Note that the starting comment <!--> in the last line is not the same as <!-- --> See: http://www.w3.org/TR/html-markup/syntax.html#comments
I think that it's more some kind of parse error thing (I don't think Wabaim WAVE uses Webkit parser).
--- EDIT
After installating WAVE extension for Chrome, I can see that it does not return the error concerning the language of your page.
In fact, when you look closer at their online tool, they load a proxied version of your webpage, http://wave.webaim.org/data/getpage.php?reportkey=, with an html tag lacking of this attribute. So it is definitely a problem with the Wave parser.
So I suggest you to use the Chrome extension, which will be a better solution to pre-test your website as it does not modify your tag.
You can get this problem even without the IE conditional comments in there. I have / had (depending on when you may read this) a website with just this start:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- etc -->
And it also pops up with the error. I sent in this bug report:
WAVE feedback sent at 10:54 AM, October 11th, 2015
URL: http://wave.webaim.org/report#/http%3A%2F%2Fwww.jeroenheijmans.nl
The URL in question (a wave report of my index page on www.jeroenheijmans.nl) reports a missing "lang" attribute on the "html" element. However, the element is clearly there (if you open the site on its own in a seperate tab and view the source you'll see this). I get this both with Chrome and Firefox latest version on Windows 8.1. I've also tried Chrome incognito mode.
It does seem that if I choose "View Frame Source" on my page inside the WAVE tool that I get a source without the "lang" attribute. I might be experiencing the same issue as https://stackoverflow.com/q/28692421/419956 where it's suggested that the problem is with the way WAVE loads the page under evaluation.
And received the following feedback:
This is a known bug with WAVE that will be fixed in a release in the
very near future.
Thanks,
Jared Smith
WebAIM.org
In short, you're fine. You can try the workaround suggested in the other answer by #Adam, or just ignore the error safely.
In order to fix this problem you have fix two tags for your tool to stop pointing accessibility error. You have to set both "lang" as well as "xml:lang" tag. One way to achieve this through pure Javascript is below. I am proposing this solution as it is independent of any platform.
(function() {
document.getElementsByTagName('html')[0].setAttribute('lang', 'en-US');
document.getElementsByTagName('html')[0].setAttribute('xml:lang','en-US');
})();
You may replace 'en' with language of your choice to correctly point the correct language in place
I have created one jsp page that page is working fine across the all browser.when i rendered that page in IE8 browser it's working fine.But problem is when i select
Browser Mode-IE8 Compatibility View than corresponding
Document Mode- IE7 Standards will be selected automatically.
then my jsp page giving a lot alignment issue.But when i select again
Document Mode- IE8 Standards than my page working fine..
How i can control this thing Is there any way to setting because i can change again again the document mode..i want Document Mode will fix IE8 Standard..
Please provide the solution how i can handle this issue...
Try changing the DOCTYPE to:
<DOCTYPE html>
And then try adding this meta tag into the <head> of your document:
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
This meta tag should force IE into standards mode, you can find more information about it here.
You should end up with something that looks like:
<DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
</head>
<body>
<p>Content</p>
</body>
</html>
I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.
This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.
It's also worth noting (perhaps?) that the page is using #font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.
I've tried a few different things, to no effect:
Rearranging order of CSS stylesheet links
Removing link to stylesheets with #font-face
Disabling Firebug? (Read on here somewhere...)
One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?
This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.
So this leads me to believe that there is some issue with how the CSS is being loaded.
Here is my HEAD code:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />
<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">
<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>
WTF is going wrong with Firefox? It's driving me nuts!
If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:
<body>
<script>0</script>
<!-- rest of the code -->
</body>
There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
I had the same problem with Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. showing in the console, and a visible flash of unstyled content upon page refresh, withouth (F5) or with clearing the cache (Ctrl + F5). Having the developer tools open does not made a difference either.
What helped me was declaring a variable in a script just before the </head> tag ended, so basically after all the <link> tags.
It's important to note, that an empty script (or with just a comment) or any random javaScript would not help, but declaring a variable worked.
<head>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/other.css" />
<script>
/*to prevent Firefox FOUC, this must be here*/
let FF_FOUC_FIX;
</script>
</head>
There was no need to rearrange links or not use imports within css or js files.
Please note that the issue will no longer be visible (FOUC is visibly gone), but the console might still show the same warning.
I was experiencing this error. A colleague has said that it's caused by the attribute, autofocus being added to a form field.
By removing this attribute and using JavaScript to set the focus the brief flash of unstyled content stops happening.
For what it's worth, I had this same problem and found that it was being caused by having poorly formatted <html>...</html> tags.
To be precise, in my code I accidentally closed the HTML tag too early, like this:
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>My title</title>
The code provided by the original poster is missing the opening <html> so I suspect that's probably what is happening there.
Filament Group share they way they load their fonts in detail,
http://www.filamentgroup.com/lab/font-loading.html
which is a nice modern approach to #font-face loading
Smashing magazine also review there website performance and came up with a different solution that stores the caches a base64 copy of the font in local storage. This solution may require a different licence for you font.
A gist can be found at:
https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
The original article detailing their decision can be fount at:
http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts
Additional recommendation
The head of your document contains far to many individual stylesheets, all these css files should be combined into a single file, minified and gziped. You may have a second link for your fonts placed before you main stylesheet.
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
I've had the same issue. In my case removing #import rule in the CSS file and linking all the CSS files in the HTML resolved it.
In my case the reason of FOUC in FF was the presence of iframe on page.
If I removing iframe from markup then FOUC disappears.
But I need iframe for my own hacking reasons so I changed this
<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>
into this
<script>
document.addEventListener('DOMContentLoaded', ()=>{
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('name', "hidden-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
});
</script>
I've added this inline JS right in template just for readability: in my case this code runs once per page.
I know that it's dirty hack, so you can add this code in separated JS-file.
The problem was in Firefox Quantum v65.
I had the same problem (but also in chrome). Even if many of the existing answers provide clues to the reason for FOUC I wanted to present my problem and its solution.
As I said, I had FOUC in a fairly large project and already had the suspicion of a racecondition in some form.
In the project SASS is used and via a "bootstrap" file for the css a fontawesome free package was added via import.
#import "#fortawesome/fontawesome-free/css/all.css";
This import has increased the total size of the css file by a lot, which caused the file to take a long time to load, and the browser went and already loaded the following javascript.
The JS that was then executed forced the rendering of its content and thus created the FOUC.
So the solution in my case was to remove the big fontawesome package and insert the icons I used from it (~10) via an Icomoon custom font. Not only did this solve the FOUC but it also had the nice side effect that the delivered CSS files are much smaller.
I have a website, where IIS sends the following in the header (which is correct for the overall site):
X-UA-Compatible: IE=Edge
However, on a specific page, I have at the very top of my <head> section the following:
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![endif]-->
This is being interpreted correctly by IE8, as it shows up at the top of the when I view the page source. However, it never changes my Document Mode from "IE8 Standards" to "IE7 Standards." The Browser Mode is in IE8 Compatibility View by default(it's an intranet site), but even in normal IE8 mode, it still has the same Document Mode issues.
I thought that having the meta tag on the page overrides whatever was sent in the initial header from the server. Is there anything else I could be doing to change the document mode for this one page?
EDIT: I can force IE7 document mode if I place the following in my Page_Load of my aspx page Response.AddHeader("X-UA-Compatible", "IE=7"); so I now have this header show up after the IE=Edge header, so only this second one is interpreted. This doesn't actually solve my issue though, because the meta tag above has the advantage of not being used in IE9 or IE10, and some of the niceties of the page disappear when forcing to IE7 document mode. I just specifically need this to work for IE8 and older.
Also, if I remove the conditional CSS, it appears to get the document mode correct. So is it possible that conditional CSS executes after the page loads, and if so, how do I fix it to make IE7 document mode only show up for IE8 and earlier browsers?
Are you sure you have the order correct? I just tried this page that I found HERE and my browser defaults to "IE7 standards".
<html>
<head>
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<![endif]-->
<title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>