How To Exclude Tags, Categories From Google Index

One of the most serious SEO problem is duplicate content. That is having the same content on different URLs. Google doesn’t like this for one obvious reason: no one like reading the same content over and over again.

What is a tag/category page?

In case you don’t know tag and category pages are, they are the pages that list all posts in the same category or share the same tag.

Here is one example of tag page:

If you format your URL based on name, you should see /tag/ in the URL. The same thing can be seen with category.

Letting Google index your category and tag pages is way more serious than duplicate content. In my own observation on my site, category and tag pages usually rank higher than the posts. That means you spend hours optimize your posts to meet all SEO requirements and they will end up no where (because your tag/category pages rank higher).

That’s why you need to mark tag and category pages as noindex to avoid this problem.

How to mark tag and category pages as noindex?

To stop Google from indexing your tag/category pages, you need to let it know by adding a noindex meta tag to such pages. If you don’t know much about coding, no worries. There is no coding required.

To accomplish this, I assume that you have Yoast SEO plugin installed. Let’s begin.

First, go to SEO->Search Appearance

Let’s click on Taxonomies:

Now, under that tab, you’ll see these sections:

If you don’t see the content of such sections, click on the title to show.

Let’s look at the settings that I underlined with red. If you select Yes, the tag/category pages are indexed by Google. If you select No, a noindex meta tag is added to all tag/category pages. As a result, Google will not index those pages.

If your tag/category pages are already in Google’s index, don’t worry. Google bot will remove them the next time it crawls your site.

If you take a look at the page source now, there is a noindex meta tag there:

Conclusion

This subtle change can have a huge impact on your goals (sales, ads click…) since your reader will see the more targeted pages instead of category/tag pages. Also, it may also help you improve your search result click through rate because the title of a single post is always more optimized than that of category/tag pages.

How To Exclude Categories From Adsense Auto Ads

There are plenty of plugins available that lets you install adsense auto ads to your site. I have adsense on my site too.

Initially, my method is to inject the ads code to the head of my site. It works. However, since now I have WooCommerce plugins to sell, I want to disable ads on post categories that related to WooCommerce (Because I have ads for my products there).

Also, I have a custom post type (which is the sales page of my products) that I want to exclude from displaying ads too.

I searched for a plugin that does just that but no avail (After 10 minutes searching on Google. I’m impatient, I know). So, I decided to make one that does the job for me.

Meet the WordPress plugins that let you enter ads with options to exclude form categories/custom post types

So, here is what I created:

You can download the plugin here:

As you can see, the interface is quite busy. However, there are three main sections:

  1. A textarea where you can enter your auto ads code from Google Adsense
  2. Next is the list of categories on your site. If you want to exclude a certain category, simply select it
  3. Finally, here are the list of custom post types on your site. I have 4 custom post types on my site. You may have more or less. Check the types that you don’t want to show ads

Now you may ask, how can you exclude ads from WooCommerce product pages? Well, if you have WooCommerce installed, in the list of custom post types, you’ll see one option named “product”. Check that box if you want to exclude WooCommerce from showing ads.

Here is my configuration:

As you can see, I excluded all categories related to WooCommerce and one custom post type called bc_app. This is the pages where I sell my plugins.

Conclusion

Hopefully the plugin is useful to you. If you have any suggestions or feature requests, simply comment below.

How To Exclude Custom Post Types, Posts, Pages From Yoast SEO Sitemap

If you want to exclude certain custom post types to the sitemap that generated by Yoast SEO plugin, you are at the right place. In this short post, I’m going to show you exactly how to do that.

Requirements

The only requirement is you need to install my plugin. This is the one I made to solve my own problem. As you can see, I created a plugin called WP Lead Plus X that generates landing pages. It created two custom post types to handle the template files.

I don’t want include those files in the sitemap since they have short content and usually don’t reflect the topic of my main website.

Download the plugin to exclude custom post types from Yoast SEO sitemap below

How to configure what post types to exclude from Yoast SEO site map

Now I assume that you have installed and activated the plugin. In your dashboard, you’ll see it appears under Binary Carpenter:

Click on that, you’ll find a very simple interface:

As you can see, the plugin lists the custom post types available on your site as an unordered list. In my example, I have three custom post types:

  • product
  • core37_lp
  • core37_lp_template

Now, for example, I want to exclude core37_lp and core37_lp_template post types from the sitemap. I’ll enter them into the textarea box below, comma delimited:

Before clicking on the save settings button, let me show you my current sitemap:

As you can see, my custom post types are showing in the sitemap. Let me save changes and reload the sitemap again:

As you can see, the new sitemap doesn’t have the custom post types that I excluded.

Bonus feature

As you can also see in the plugin, you have the ability to exclude certain pages/posts from the sitemap. Simply enter their IDs as comma separated list and they’ll be exclude from your Yoast SEO sitemap.

Conclusion

I hope this plugin is useful to you. Note that it works with Yoast SEO sitemap only.

How To Get Responsive Image HTML Code From Media Library

If you’ve been using WordPress for some time and know at least some HTML, you may have put an image tag some where on your site. That could be in a custom widget on your sidebar or footer.

If you put the img code the old way, your code may look like this:

<img src="path_to_image_file" title="" alt="" />

However, modern image code should have srcset attribute. This attribute helps you serve different images on different devices, thus save you some bandwidth and your visitors some waiting time. If your image code doesn’t have that attribute, you are not doing what is best for both you and your visitor.

How to get img code with srcset in WordPress

By default, WordPress images come with srcset. If you look at the images you added through add media button, you can confirm this. However, if you get the file straight from Media Library, all you have is the direct link to the image file.

Recently, I faced this problem and created a code snippet to solve the problem. I would recommend you put this code inside the functions.php file of your child theme. (Don’t know what a child theme is or how to create one? Check out my child theme tutorial here)

The code snippet

function bc_responsive_image_output( $form_fields, $post ) {
     //if the attachment is not an image, don't do anything
     if (!wp_attachment_is_image($post->ID))
             return $form_fields;
     $html_code = '';

     $html_code .= sprintf('<div><label>Thumbnail</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID ));
     $html_code .= sprintf('<div><label>Medium size</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID, 'medium'))    ;
     $html_code .= sprintf('<div><label>Large size</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID, 'large'));
     $html_code .= sprintf('<div><label>Full size</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID, 'full'));

     $html_code = '<div id="bc_image_codes">' .$html_code . '</div>';
     //generate image embed code
     $form_fields['location'] = array(
         'value' =>'',
         'label' => __( 'Responsive image HTML cod3' ),
         'helps' => __( 'Copy the code below ' ),
         'input' => 'html',
         'html' => '<style>#bc_image_codes label, #bc_image_codes textarea { display: block; }</style>' . $html_code

     );
     return $form_fields;
 }
 add_filter( 'attachment_fields_to_edit', 'bc_responsive_image_output', 10, 2 );

If you are interested, here is a brief explanation on how the code works. Literally, I added the image HTML code inside each attachment (if it is an image) in the media library when it is clicked.

How to get the responsive image HTML code inside Media Library

So, I assume that you have saved your functions.php file. Now, go to Media->Library. If you click on any image in your media library, you’ll see this:

responsive HTML image code in WordPress Media Library

As you can see that, there are different codes for different image sizes. If you want thumbnail size, copy the code in the thumbnail box, if you want full image size, get the code in the full size box and so on.

Conclusion

As you can see, the snippet is quite simple but it helps me get the responsive image HTML code on WordPress. Next time you find yourself enter image code manually, stop and use this code instead.

Why Your WordPress Site is not Responsive? Two Possible Culprits

Recently, I as fed up with my theme and I decided to make my own theme to optimize for page loading speed. And indeed, my performance score went from 70-ish to 100. However, after a few days, I received report from Google Search Console that some of my pages are not responsive.

I checked every items in my common responsive check list, including:

  1. Content must not be wider than its parent
  2. Max images’ width is 100%
  3. Columns collapse on to fit 100% width on small screen

After spending almost 3 hours in front of my screen, I figured out two culprits that made some of my post not responsive. This may not be applicable to you but it’s worth a try if you don’t know what’s the cause.

Figure element with a fixed width that caused page not responsive

The first problem I found is I have my image wrapped inside a figure tag. At first, I don’t understand why WordPress does this on some of my images and doesn’t on other. It turned out if your images have caption, they will be wrapped in a figure tag with a fixed width.

You can remove the width attribute of the figure element to fix the problem.

If your page is still not responsive, removing the caption solves the problem instantly.

Code highlighter could be problematic too

If you are using code highlighter like what I have on my site, you could be the next victim of long line of code. Normally, code highlighters have no problem with short string (variable, function name…). However, if you code contains long string such as long function name or long file path, your content could be much wider than it should be.

What’s the fix? Add this rule to Additional CSS (Under Appearance -> Customize)

article {
    word-break: break-word;
}

 

This code tells the browser to break long words in to multiple lines. Save the changes and check your site again (make sure to clear your cache).

If your site is responsive now, it’s great. If it isn’t, please let me know in the comment below. There maybe other factors that cause your problem.

Conclusion

By no mean this is an exhaustive list of fix for site not responsive. However, these are the new problems I have encountered. Hopefully, the tips in this post is useful to you.