Tag - image

How to Fix Image Upload Issue in WordPress (Step by Step)


Are you facing image upload issues on your WordPress website? For most beginners, image upload errors can be quite confusing because they can appear without you doing anything different.

Failure to upload images is one of the most common image issues in WordPress. Luckily, it is quite easy to fix, and you can do it yourself.

In this article, we will show you how to easily fix the image upload issue in WordPress. We will also explain what causes this issue, and how you can prevent it in the future.

Fixing image upload issues in WordPress

What Causes The Image Upload Issue in WordPress

The image upload issue in WordPress is typically caused by incorrect file permissions. Your WordPress files are stored on your web hosting server and need specific file and directory permissions to work.

Wrong file permissions prevent WordPress from reading or uploading file on the hosting server. You may get the following error when uploading image file:

‘Unable to create directory wp-content/uploads/2019/04. Is its parent directory writable by the server?’

Unable to create directory error

Another sign of this issue is that your images may disappear from the media library.

Missing images in media library

My site was working fine before? Who changed the file permissions?

This could happen due to a number of reasons. A misconfiguration on your shared hosting server can sometimes change those permissions without you doing anything.

For example, your web hosting provider ran an upgrade which unexpectedly changed file permissions.

If everything else is working fine on your website, then you can simply apply the correct file permissions to fix the image upload issue.

That being said, let’s take a look at how to set correct file permissions to fix image upload issues in WordPress.

Fixing Image Upload Issue in WordPress

You will need to use an FTP client to change file permissions.

First, connect to your website via FTP and then go to /wp-content/ folder. Inside, you’ll find the uploads folder, which is where WordPress stores all your media uploads including images.

Now right click on the uploads directory and then select File Permissions.

Opening file permissions dialog box for uploads folder

This will bring up the file permissions dialog box.

First, you will need to set file permissions for the uploads directory and all the subdirectories inside it to 744.

Change folder permissions

To do that, enter 744 in the numeric value box, and then check the box next to Recurse into subdirectories option. Now click on the ‘Apply to directories only’ radio button.

Click on the OK button to apply these changes. Your FTP client will now start applying file permissions to the directories.

Note: If setting directory permissions to 744 does not seem to solve your problem, then try 755.

In the next step, you will need to set file permissions for all the files in the uploads directory.

To do that, right click on uploads directory and select file permissions. In the file permissions dialog box, change the numeric value to 644.

Check the box next to Recurse into subdirectories. Lastly, you need to click on ‘Apply to files only’ radio button. Click on the OK button to apply these changes.

File permissions

The FTP client will now change the permissions for all files inside the uploads folder. Once it is done, you can go back to your WordPress admin area and try uploading images again.

Note: if you don’t know how to use a FTP client, then you can also use the file manager provided by your WordPress hosting company. Since the screenshots will vary from each host, you will need to talk to their support to find instructions.

We hope this article helped you fix the image upload issue in WordPress. You may also want to see our article on how to optimize image SEO to get more organic traffic to your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix Image Upload Issue in WordPress (Step by Step) appeared first on WPBeginner.



Source link

Beginner’s Guide to Image SEO – Optimize Images for Search Engines


Are you looking to improve image SEO on your website? When optimized properly, image search can bring many new visitors to your website.

To benefit from image SEO, you need to help search engines find your images and index them for the right keywords.

In this beginner’s guide, we will show you how to optimize image SEO by following top best practices.

Image SEO guide for beginners

Here is a brief overview of what you’ll learn in this article.

  • Optimizing your images for SEO and Speed
  • What is Alt text?
  • Difference between Alt text vs title
  • Difference between alt text and caption
  • How to add alt text, title, and caption to images in WordPress
  • When to use captions for images
  • Disable attachment pages in WordPress
  • Additional tips to improve image SEO

Optimizing Your Images for SEO and Speed

Speed plays an important role in SEO and user experience. Search engines consistently rank fast websites higher. This is also true for the image search.

Images increase your overall page load time. They take longer to download than text, which means your page loads slower if there are several large image files to download.

You need to make sure that images on your site are optimized for web. This can be a little tricky to get used to since many beginners are not experts in graphics and image editing.

We have a handy guide on how to properly optimize images before uploading them to your website.

The best way to optimize images is by editing them on your computer using a photo editing software like Adobe Photoshop. This allows you to choose the right file format to create a small file size.

You can also use an image compression plugin for WordPress. These image optimizer plugins allow you to automatically reduce file size while uploading an image to WordPress.

What is Alt Text?

Alt text or alternative text is an HTML attribute added to the img tag which is used to display images on a web page. It looks like this in plain HTML code:

<img src="http://www.wpbeginner.com/fruitbasket.jpeg" alt="A fruit basket" />

It allows website owners to describe the image in plain text. The main purpose of the alternate text is to improve accessibility by enabling screen readers to read out the alt text for visually impaired users.

Alt text is also crucial for image SEO. It helps search engines understand the context of the image.

Modern search engines can recognize an image and it’s content by using artificial intelligence. However, they still rely on website owners to describe the image in their own words.

Alt text also accompanies images in Google image search, which helps users understand the image and improves your chances of getting more visitors.

Alt text used in search results

Usually, alt text is not visible on your website. However if an image is broken or cannot be found, then your users will be able to see the alternate text with a broken image icon next to it.

Alternate text displayed next to a broken image

What is the Difference Between Alt Text vs Title

Alt text is used for accessibility and image SEO, while title field is used internally by WordPress for media search.

Search image by title

WordPress inserts the alt tag in the actual code used to display the image. The title tag is stored in the database to find and display images.

In the past, WordPress inserted the title tag in the HTML code as well. However, it was not an ideal situation from the accessibility point of view, which is why they removed it.

What is the Difference Between Alt Text vs Caption

The alt text is used to describe the image for search engines and screen readers. On the other hand, the caption is used to describe the image for all users.

Alt text is not visible on your website while captions are visible below your images.

Example of a caption displayed below an image

The alt text is crucial for better image SEO on your website. The caption is optional and can be used only when you need to provide additional information about the image to website visitors.

How to Add Alt Text, Title, and Caption to Images in WordPress

Alt text, title, and caption make up the image metadata that you can add to images when uploading them into WordPress.

When you add an image using the default image block, WordPress allows you to add caption and alt text for the image.

Adding alt text and caption to an image in WordPress

It automatically generates a title for the image from the file name. You can change the title by clicking on the edit button in the image block’s toolbar.

Editing an image in default WordPress editor

This will bring up the media uploader popup where you can enter your own custom title for the image.

Changing image title in WordPress

You can also edit the alt tag and title for the images that you have already uploaded to WordPress. To do that, you need to visit Media » Library page and locate the image you want to edit.

WordPress media library

Simply clicking on an image will bring up the attachment details popup where you can enter title, alt text, and caption.

Add alt tag and title via media library

Note: Changing an image’s alt tag or caption via Media Library will not change it in the posts and pages where the image is already used.

When to Use Captions for Images in WordPress

Captions allow you to provide additional details for an image to all your users. They are visible on the screen for all users including search engines and screen readers.

An image gallery with captions for each image

As you may have noticed that most websites don’t normally use captions with images in their blog posts or pages. That’s because captions are often not needed to explain an image.

Captions are more suitable in the following scenarios:

  • Family or event photos
  • Photos that need additional explanation describing the background story
  • Product image galleries

In most cases, you would be able to explain the image in the article content itself.

Disable Attachment Pages in WordPress

WordPress creates a page for all images you upload to your posts and pages. It is called the attachment page. This page just shows a larger version of the actual image and nothing else.

This can have a negative SEO impact on your search rankings. Search engines consider pages with little to no text as low quality or ‘thin content’.

This is why we recommend users to disable the attachment pages on your website.

The easiest way to do this is by installing and activating the Yoast SEO plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, it automatically turns off attachment URLs. You can also manually turn off attachment pages in WordPress by visiting SEO » Search Appearance page and clicking on the Media tab.

Disable attachment URLs in WordPress

From here, make sure that the ‘Media & attachment URLs’ option is set to ‘Yes’.

If you are not using Yoast SEO plugin, then you can install the Attachment Pages Redirect plugin. This plugin simply redirects people visiting the attachment page to the post where the image is displayed.

You can also do this manually, by adding the following code to your theme’s functions.php file or a site-specific plugin.

function wpb_redirect_attachment_to_post()  
if ( is_attachment() )  
global $post;
if( empty( $post ) ) $post = get_queried_object();	
if ($post->post_parent)	
	$link = get_permalink( $post->post_parent );
	wp_redirect( $link, '301' );
	exit(); 
	
else	
	// What to do if parent post is not available
	wp_redirect( home_url(), '301' );
	exit(); 
	


add_action( 'template_redirect', 'wpb_redirect_attachment_to_post' );

Additional Tips to Improve Image SEO

Adding alt tag is not the only thing you can do to improve image SEO. Following are a few additional tips that you should keep in mind when adding images to your blog posts.

1. Write descriptive alt text

Many beginners often just use one or two words as alt text for the image. This makes the image too generic and harder to rank.

For example, instead of just ‘kittens’ use ‘Kittens playing with a yellow rubber duck’.

2. Use descriptive file names for your images

Instead of saving your images as DSC00434.jpeg, you need to name them properly. Think of the keywords that users will type in the search to find that particular image.

Be more specific and descriptive in your image file names. For example, red-wooden-house.jpeg is better than just house.jpeg.

3. Provide context to your images

Search engines are getting smarter every day. They can recognize and categorize images quite well. However, they need you to provide context to the image.

Your images need to be relevant to the overall topic of the post or page. It is also helpful to place the image near the most relevant text in your article.

4. Follow the SEO best practices

You also need to follow the overall SEO guidelines for your website. This improves your overall search rankings including image search.

5. Use original photographs and images

There are many free stock photography websites that you can use to find free images for your blog posts. However, the problem with stock photos is that they are used by thousands of websites.

Try to use original photographs or create quality images that are unique to your blog.

We know that most bloggers are not photographers or graphic designers. Luckily, there are some great online tools that you can use to create graphics for your websites.

We hope this article helped you learn about Image SEO for your website. You may also want to see our guide on how to fix common image issues in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post Beginner’s Guide to Image SEO – Optimize Images for Search Engines appeared first on WPBeginner.



Source link

Cover Image vs. Featured Image


WordPress 5.0 was released with the brand new Gutenberg block editor and a host of cool features. One of them is the Cover block, which lets you add cover images to your posts and pages.

This feature has confused some users because it may seem similar to the Featured Image option which has been in WordPress since WordPress 2.9.

In this article, we’ll explain the differences between cover image vs. featured image in WordPress block editor.

Cover Image vs Featured Image - WordPress Block Editor

What is a Cover Image?

A cover image is usually a wide image used as a cover photo for a new section in a blog post or page. It is part of the overall article. You can use a cover image when you’re starting a new section or a new story within your article.

With the Cover block in WordPress, you can add text and color overlay on your cover image.

Cover block in WordPress block editor

By adding an appropriate color overlay that matches your theme color or content’s mood, you can make your article more engaging.

Similarly, adding text overlay helps your users easily identify where a new section starts in your article and what’s it about.

Traditionally bloggers use heading text to separate sections in a blog post. With cover images, you now have options to separate sections in a more visually appealing way.

What is a Featured Image?

A featured image (also known as post thumbnail) is the main article image which represents the content. They’re prominently displayed on your website on single posts, blog archive pages, as well as on the homepage of news, magazine, and blog websites.

Aside from that, featured images are also displayed on social media feeds when an article is shared.

Featured images are designed carefully to make them look attractive. Such images give users a quick glimpse of your content and prompt them to the entire article.

You’ll find a meta box in your post edit screen for adding a featured image because almost all WordPress themes support featured images by default.

Featured image in WordPress

Where and how featured images are displayed is controlled entirely by your WordPress theme.

For advanced featured image options, you can check these best WordPress featured image plugins.

How to Add a Cover Image in WordPress?

The new WordPress block editor (Gutenberg) comes with a Cover block to allow you to add a cover image in WordPress.

First, you need to create a new post or edit an existing one. On the post edit screen, click on the add new block button and then choose Cover block.

Add cover block in WordPress block editor

You can find the Cover block inside the Common Blocks tab.

Upon clicking on the block, you’ll see the Cover block added to your content editor with options to add your new cover image.

Cover block with options to upload image

You can simply drag and drop an image or video in the block area to upload a new cover image. Alternatively, you can click the Upload button, choose an image in your computer, and open to upload.

If you want to add an image already uploaded to your media library, you can click the Media Library button and select an image from your media gallery.

Upload cover image in WordPress block editor

Once your cover image is added, you can easily customize it by clicking on the cover image.

This will show you a toolbar with customization options above the image, Write title… field in the center of the image, and block settings including color overlay in the panel on the right side.

Cover block options

Aside from alignment option, the cover image block gives you the two width choices: Wide width and Full width.

The wide width option makes the image look as wide as your content. The full-width option makes your image cover the whole window screen.

 Full width cover image in WordPress block editor

Next, you can add a title for your cover image. When you click on the cover image, you will see the “Write title…” field in the center of your cover image.

Simply click on that area to add text. You can write your cover image title and format it using the formatting options that appear on top of the text or on top of the cover image.

Add text on your cover image in WordPress block editor

Finally, there are cover block settings on the right side panel. You can enable Fixed Background to create a parallax effect for when users scroll down the page.

Fixed background option in cover block in Gutenberg

Below that, there’re color overlay options. By default, it adds your theme’s color as overlay color with 50% transparency, but you can change the overlay color and also change the opacity by moving the point.

Cover block color overlay options

Lastly, you can add CSS code and add more styles to your cover image by clicking the Advanced option.

That’s it!

You can repeat this step to add multiple cover images in a single article if needed.

How to Add a Featured Image in WordPress?

The process of adding a featured image is the same as it was before. If you’ve had a WordPress blog for a while, then you already know how a featured image is added.

To add a featured image, you’ll need to open a post edit screen firs and then navigate to the Featured Image meta box on the right-hand side of the screen.

You will need to click the Set featured image option.

Featured image meta box in WordPress

Next, you can upload a new image by either using the drag and drop uploader or selecting an image one from your existing media library.

After that you can add title and alt text for your featured image, and then click the Select option.

Upload featured image in WordPress

You have successfully added a featured image to your article.

If you want more detailed instructions, then you can read our beginner’s guide to adding featured images in WordPress.

Once you’ve added your featured image, you can preview your post and see how it looks.

If you’re using the new default theme Twenty Nineteen or other modern themes, then you may see a color overlay on your featured images as well.

You can remove it or change the color by going to the WordPress customizer.

Simply click on the Appearance » Customize button in your WordPress menu.

Customize option WordPress

Once on the Customize panel, you need to click the Colors option on the left.

Customize colors WordPress twenty nineteen theme

On this tab, you will see your theme’s primary color option and the option to enable or disable the image filter.

Color options in twenty nineteen theme

You can change your theme’s primary color by selecting the Custom option and choosing a color.

Change primary color in Twenty Nineteen theme

If you want to disable the color filter on your featured images, then you can simply remove the check on “Apply a filter to featured images using the primary color” option.

Disable color filter on featured images in Twenty Nineteen theme

Please note that featured images are managed by WordPress themes, so you may not find this option in your theme if it doesn’t support image filters.

Conclusion – Cover Image vs. Featured Image in WordPress

Now that you know how to add a cover image and a featured image, let’s take a look at some best practices.

Featured images have been popularly used by WordPress blogs, online magazines, news, and entertainment websites as post thumbnails or main article images.

Well-designed featured images help attract more users to open an article. They’re great for making your website look attractive and visually interactive.

Cover images are actually parts of your article. A user sees your cover image after they open your article to read. Thus, they make your articles more engaging and fun to read.

The best use of cover images is to add beautiful transition between sections inside a long article.

Cover images are unique from regular post images because they have the full-width option and you have the ability to add text overlay on them.

By properly adding cover images, you can improve user engagement on your posts.

We hope this article helped you to understand the difference between a cover image and a featured image in new WordPress block editor. You may also like to read our article on how to update your old WordPress posts with Gutenberg block editor.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link