How to fix Cloudflare and AMP Invalid attribute values

Posted on by

The Problem: Google’s Webmaster Tools for Accelerated Mobile Pages says your pages are throwing errors like this:

Invalid attribute values: src=//cdn.ampproject.org/v0.js, href=//fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Open+Sans:400,700,400italic,700italic

I am using the official AMP plugin created by WordPress’ company Automattic to make my site AMP usable so my pages will open in a mobile friendly format… and so Google will improve my site’s ranking – I hope!

I am also using a free Cloudflare account to improve speed and security. The problem is Cloudflare is not quite AMP friendly yet.

So far I have found 2 settings that I needed to change. There are other errors I still need to figure out, but I wanted to list the solutions I have found so far.

First change: Notice in the error above, it is showing the “src=//cdn.ampproject.org…” That really should be “src=http://cdn.ampproject.org…”. So where did the http go?

After doing the requisite disable all the plugins and reenable them one at time test, I found the culprit was the Cloudflare plugin. The setting you want to turn off is “HTTPS Protocol Rewriting”. More information about HTTPS Protocol Rewriting here.

You can test the change in your browser by browsing to the AMP version of your page and adding #development=1 to the URL, like so:

http://my.domain.com/post/amp/#development=1

Then inspect the page by right-clicking anywhere on the page and clicking “Inspect”. The inspect console should tell you where in your code the errors are occurring.

Second change:

The inspect console showed me 3 errors:

  • The attribute ‘type’ in tag ‘script type=application/ld+json’ is set to the invalid value ‘text/javascript’.
  • The attribute ‘type’ may not appear in tag ‘amphtml engine v0.js script’.
  • The mandatory tag ‘amphtml engine v0.js script’ is missing or incorrect.

The first of which told me the error was located at this piece of code:

<script type=”text/javascript”>
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:”cf”,bag2:1,mirage2:0,oracle:0,paths:{cloudflare:”/cdn-cgi/nexp/dok3v=1613a3a185/”},atok:”aaa2921d785eb7e8392eb6471163ca07″,petok:”bbf60e63c6b61a1e9259ef20cff044a4274db7be-1456423541-1800″,zone:”bourbonblog.com”,rocket:”a”,apps:{},sha2test:0}];document.write(‘<script type=”text/javascript” src=”//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=fb690a32f5/cloudflare.min.js”><‘+’\/script>’);}}catch(e){};
//]]>
</script>

It was Cloudflare again. But this wasn’t caused by the plugin, but by the service itself, namely the Rocket Loader.

To fix it, I logged into Cloudflare.com, and created a rule for /amp/ pages.

My pattern looked like this:

*domain.com/*/amp/*

where “domain.com” is your website domain.

The only setting you need to change from default if Performance is on, is to turn Rocket Loader off.

Bonus non-Cloudflare change:

If the Google Webmaster Tools says “Required tags missing: amphtml engine v0.js script”, this means you are missing a link tag that references the original non-AMP URL. The browser inspect console will not show an error.

I don’t know why the WordPress AMP plugin is missing this, but this is fixed (for now) by editing the AMP plugin file located in /wp-content/plugins/amp/templates/single.php .

Anywhere between the opening and closing <head> tags, insert this code:

<link rel=”amphtml” href=”<?php the_permalink(); ?>”>

and that should take care of it.

Update: I don’t know if I missed or misunderstood it, but what I thought was missing is, in fact, supplied by the plug in, but it is

<link rel=”canonical” href=”<link to non-AMP page>”>

 

As I mentioned before, I’m still getting some validation errors. Hopefully I will remember to list them here… and not wait for over a year to post again. 🙂

SumoMe Fixes

Posted on by

Update March 23, 2015: This does not work for the current version of SumoMe. But I will keep it up to help with similar situations.

The folks at Appsumo.com have released a free WordPress plugin called SumoMe that is available at http://sumome.com.

You can install SumoMe by either by adding a script to your header (if you are not using WordPress) or by installing their WordPress plugin.

Once you install it and create an account, you have the option of adding two apps:

Twilighter is a slick app that takes the text that is selected on your page and sets up a Twitter tweet using the selected text and creating a short URL back to the page from which it was selected. Your visitor can then make adjustments and click the submit button to tweet it.

The other app is List Builder which opens a modal subscription form that only asks for an email address. You can export the collected addresses as a CSV file.

List Builder caused a problem with this site where the form was showing up behind my header graphic. The problem was the z-index for that DIV element was not high enough. Adding the following code to my style.css file fixed the problem by increasing the z-index value.

.sumome-popup {
     z-index: 11111 !important;
}

Another issue I wanted to fix was the fact that the SumoMe has a control tab that appears in the upper right and visitors can see it. That control tab is of zero use to a visitor, so it is just clutter, yet I will need the tab to change settings. The best solution for now is to make it visible only if an administrator is logged into the site. Please note this code only works if your site is running on WordPress. A hat tip to koningdavid for posting the answer to a similar problem on StackOverflow.com.

Add a style sheet file called visitor.css with the following code:

#sumotest-badge {
     display:none !important;
}

In your theme’s function.php file, add the following:

function visitor_stylesheet()
{
     if (!current_user_can( 'manage_options' )) {

          wp_register_style('visitor_css', get_stylesheet_directory_uri() . '/visitor.css', array(), '1.0', 'all');
          wp_enqueue_style('visitor_css');
     }
}
add_action('wp_enqueue_scripts', 'visitor_stylesheet');

The visitor_stylesheet function checks if the current visitor to the site is an administrator (if the user can “manage_options”, then the user is an administrator). If the user is not an admin, then the visitor.css file is loaded for the user. The CSS code in visitor.css tells the browser to hide the #sumotest-badge DIV element.

Those are my fixes for SumoMe.

Happy cooking!

 

Enhanced by Zemanta

Managing Database Backups

Posted on by

It is wise to keep backups of your blog’s database, and wiser to keep those backups somewhere other than your blog’s server.

How I keep my backups is not a perfect plan, but it works for me. I keep a month’s worth of my backups in my Google Mail account.

Here’s how:

Install a plugin (like WP-DBManager) that will automatically backs up your database and emails the backup file to your Google Mail account (Gmail.com or Google Apps for Domains) as an attachment. Go ahead and manually have the plugin send a backup to your email account – you need to test it anyway.

Check your email and open the email containing your backup file.

Copy the subject line.

Click the “More” button, then click “Filter messages like these”. The advanced search form will come up with the “From” field already filled out.

Paste the subject line into the Subject field.

Check the “Has attachment” box.

Click “Create filter with this search”

On the next screen, under “When a message arrives that matches this search:”, check the box “Delete it”.

Click “Create Filter” and you are done.

Why delete the backups as they come in? I am not permanently deleting them, just sending them to the Trash folder, and everything in the Trash folder that is older than 30 days is automatically permanently deleted. This saves me from needing to clean out the old backups myself.

One thing to remember is this does not back up the actual files on your site. A copy of the files on my sites is on my computer which is backed up using Crashplan.

 

 

Enhanced by Zemanta

Invalid RSS Feed – ETX Character

Posted on by

English: This icon, known as the "feed ic...

So you are validating your WordPress blog feed and you get an invalid character error. The validator even shows you where the invalid character is located, but it looks fine in your browser!

Copy and paste the text into a text editor and you will see it. In Windows Notepad, you will see a small rectangle, and in Notepad++ you will see more – in my case, the letters “ETX” on a black background.

How did it get there? Probably because you copy and pasted your text from another source.

How do you get rid of it? There are a couple of ways:

One, find the offending post and rewrite the word before and the word the validator was pointing at and delete the original words to hopefully delete the invisible character. Then republish.

Two, create a filter  in your functions.php file to filter it out of existing posts.

function wpc_rssContent($content) {
     // Search for end-of-text character which is created by using      // chr(3) and replace with blank string.
     $content = str_replace(chr(3), '', $content);
     return $content;
}
// Filter the Excerpt RSS feed
add_filter('the_excerpt_rss', 'wpc_rssContent');
// Filter the Content RSS feed
add_filter('the_content_feed', 'wpc_rssContent');
/* Filter the Editor content to keep the character out of your 
   posts before you publish. You will need to click Save Draft at
   least once before publishing to ensure it is removed.
 */
add_filter('the_editor_content', 'wpc_rssContent');

There is probably a better solution out there, but this worked for me.

Missing Sidebar and Missed Opportunites

Posted on by

So I’m looking at my Google Analytics and find that my post Adobe Acrobat Pro X CS6 won’t start: how to fix has over 600 page views (539 unique) for the past month.

For a small-fry like me, that is huge!

I dug deeper and found that the most used Google search phrase for that page was “adobe acrobat x pro won’t open”. I googled it, and my article was #2 right under Adobe.com’s!

If you are reading this on my site, you can see that I run ads on the sidebar. I got excited at the thought of getting some advertising revenue and looked at my advertising stats. There were no clicks registered and the viewed ads number was a lot lower than the page views.

I looked at the page itself and realized the problem. No sidebar was showing up.

So many lost opportunities!

So where did my sidebar go? I’m not sure it was ever there to begin with.

I am using a custom child theme of the Twenty Eleven theme, but I had not done anything to change the base single post template. I downloaded index.php and single.php to look for differences and found that “get_sidebar();” was not in single.php. I copied single.php to my custom child theme folder and copy and added “get_sidebar()” function to the same place it appeared in index.php. I uploaded my new version of single.php and saw the sidebar was there, but it was shoved below the content.

Element inspection time. The CSS for the divs #primary and #content was different for the single post template. I added the following code (which is a copy of the #primary and #content from the parent theme and I added “.singular”) to my child theme’s style.css to cancel the parent theme’s CSS and get my sidebar in the right place:

.singular #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}

.singular #content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}

On a side note, if you have never worked with WordPress child themes before, I highly recommend reading the WordPress Codex on Child Themes. You should never change the code of a theme someone else has made because if they update the theme you will lose your changes if you update the theme on the Update admin page.