Optimizing WordPress Attachment Pages - Complete Tutorial

There's often a lot of confusion regarding WordPress attachment pages and how to optimize them for search engines. That is what this article is all about.

So what is a WordPress attachment page?

Whenever you upload an image (or any other media like audio, video etc.) to wordpress, a new page is automatically generated for the image. This page is known as the 'attachment page'.

An attachment page is just like a single posts page - it has a title, content and comments section as shown in the image below:

Wordpress attachment page for images

As shown in the above image, an image attachment page contains the media file, which in this case is the image, the image title and image description.

Attachment pages can be customized to add or remove elements. We will see how this can be done later in this article.

URL of attachment pages

The URL of an attachment page is auto-generated by wordpress based on the name of the image file and the post the image is attached to.

To understand this in more details, let's look at an example:

Let's say, you upload an image to WordPress and the filename of this image is 'picnic.JPG'.

Now, as soon as you upload the image, an attachment page will be generated for the image. Depending on your blog's permalink structure, the following is how the URL (attachment page URL) of this page will look like:

http://example.com/picnic/

Now, if you visit this page, you will see your image 'picnic.JPG'. In addition to the image, depending on how your theme has set-up your attachment pages, you will also see other information like the title of the image, image description and a comments section.

Auto generated attachment page

Note that the 'attachment page URL' is different from the 'image source URL'. The image source basically gives out the location on the server where the image is stored.

The image source URL of 'picnic.JPG' will be as follows:

http://example.com/wp-content/uploads/2017/08/picnic.jpg

The image source URL is known as the 'Media File'.

You can use the image source URL to directly access the image, whereas, you can use the attachment page URL to access the 'page' on which the image is present.

URL of attachment page for attached and un-attached Images

Now in wordpress's terms, an image is considered 'Un-Attached' if it is not attached to any post/page. Similarly, the image will be considered 'Attached' if it is attached to a post.

In other words, if an image has not been used in a wordpress post/page, then it will be considered unattached. Whereas, if you use the image within a post/page, it will be considered attached to that post.

Once an image gets attached to a post, it remains attached to that post irrespective of if or not the image is used in another post.

The image will always remain attached to the first post it is attached to. If this same image is used in another post, it will still remain attached to the first post. In other words, the 'attachment page URL' will not change.

Let's look into this in further details using this example:

Continuing with our previous example, our image file 'picnic.JPG' is not attached to any post/page yet. So it can be considered 'Un-Attached'.

Let's say, we use this image in a post named 'how-to-picnic' (by clicking the 'Add Media' button, and selecting and inserting the image in the post). Now our image 'picnic.JPG' is attached to this post permanently (unless you manually detach it by going to the Media > Library page).

Now once an image is attached, the URL of the 'attachment page' changes.

As we saw in the previous example, when we uploaded 'picnic.JPG' to wordpress, the URL of the attachment page was as follows:

http://sitename.com/picnic/

Once, we attach 'picnic.JPG' to a post, the new URL of the attachment page will include the file name of the attached post (which in our example is 'how-to-picnic') and will look as follows:

http://sitename.com/how-to-picnic/picnic/

Now, you won't be able to access the attachment page using the old attachment page URL. The old URL will end up in a 404 page.

Wordpress attachment page for an attached image

We can now consider 'picnic.JPG' to be an attached image. The URL of the attachment page for 'picnic.JPG' will remain the same irrespective of if or not this image is used in any other post.

Using an attached image in another post

Let's say, we use 'picnic.JPG' in another post whose file name is 'how-to-code'. Now the attachment page URL for 'picnic.JPG' still remains the same as follows:

http://sitename.com/how-to-picnic/picnic/

If you want to change the attachment URL, you will have to go to 'Media > Library' (make sure that 'List View' is on) and then detach the image from the older post (how-to-picnic) and re-attach it to the new post (how-to-code).

Another option would be to upload this image once again to wordpress and then attach it to the new post. If you re-upload the same image, the filename of the image will be changed to 'picnic-2.JPG' (as 'picnic.JPG' already exists) and if you attach this to your new post 'how-to-code', the attachment page URL for 'picnic-2.JPG' will look as follows:

http://sitename.com/how-to-code/picnic-2/

Creating custom attachment pages

Attachment pages use the template used to display single post pages by default. This is why the page layout will not look that professional.

Creating a custom attachment page allows you to add custom elements and make the page look usable and professional.

To create a custom attachment page, create a new file named 'attachment.php' within your theme folder.

Once created, edit this file and copy and paste the contents of your theme's 'page.php' in it. Once done, customize the page with whatever elements you want to add.

For example, you can add the image description, image caption, a link back to the main article page, social media share buttons, license information, image tags, image meta data information and a comment box.

Linking your images to their attachment page in your wordpress posts/pages

By linking your images to their attachment pages, you can allow your users to interact with the images. They can share your image and add comments for example. This is great if you are running a site that is primarily focused on images.

To do this, click on 'Add Media', select the image you want to add to your post and in the right panel select 'Attachment Page' from the drop down as shown in the image below.

Wordpress attachment display settings

As discussed earlier, linking to the attachment page will allow users to interact with your image.

You also have the option to link to the image source. Image source is the direct URL of the image. For example, the image source (Media File) for the image 'picnic.JPG' will be as follows as discussed earlier:

http://sitename.com/wp-content/uploads/picnic.jpg

You can like to the image source (Media File) if you think that your image is big and has been resized to look smaller within your posts/pages. This way, but clicking on the image, users will be able to see the full size image.

Note that the image on the attachment page can be made to link to the image source, so viewers can interact with the image and also see the image in full resolution if they intend to. So by using an attachment page link, you can fulfill both these possibilities.

To or not to add a NoIndex tag to attachment pages?

As discussed earlier, wordpress automatically creates a page for every single image that you upload. This includes images like website icons, logo, favicon, backgrounds etc.

As you would have realized, we are not going to use these types of images within a post and they will remain unattached (as discussed earlier).

It definitely makes sense to add a 'NoIndex' tag to these smaller less important images even if you don't add a 'NoIndex' tag to the important images used in posts/pages.

A simple way you can do this is find out if the image is attached and then add a 'NoIndex' to all images that are not attached to a post or page:

The following code does just that. Add this code to your theme's functions.php file and it will add a 'NoIndex' only to all Un-Attached images, like your icons, logo etc.


/* Function to add NoIndex to UnAttached Images */
function oweb_noindex_unattc_images(){
	if( ! is_attachment() ) return;
	$oweb_attc_data = get_post();	
	$oweb_is_attached = $oweb_attc_data->post_parent;
	
	if( $oweb_is_attached == 0 ){
		echo "\n";
	}	
}
add_action( 'wp_head','oweb_noindex_unattc_images' );

If on the other hand, you want to add a Noindex to all attachment images, you can use the following code:


/* Function to add NoIndex to All Attachment Pages */
function oweb_noindex_attc_pages(){
	if( ! is_attachment() ) return;
		echo "\n";
	}
add_action( 'wp_head','oweb_noindex_attc_pages' );

If you want to block Googlebot but allow Google Image Bot to crawl your attachment pages, use the following code instead:


/* Function to add NoIndex All Attachment Pages but allow Googlebot Images */
function oweb_noindex_attc_pages_select(){
	if( ! is_attachment() ) return;
		echo "\n";
		echo "\n";
	}
add_action( 'wp_head','oweb_noindex_attc_pages_select' );

Please note that these codes will not prevent GoogleBot or Google-Image Bot from crawling and indexing your images. They will only prevent indexing of the attachment pages that WordPress generates.

 
 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *