Top SEO optimisation tips for using images in Beaver Builder

Beaver Builder has a number of cool options for displaying images in your layouts and adds useful metadata through Schema.org structured data and HTML markup. In order to ensure that you maximize the potential for your images to be displayed in search engine results, you should add metadata and optimize images for best results.

Images offer a valuable way of attracting visitors to your website and online store. People use services like Facebook, Twitter, Pinterest, Instagram and Google image search every day when looking for websites and products that suit their search criteria. In order to get those images in front of potential customers, search engines need to be able to index them correctly. Here are a few tips to get the most from images in Beaver Builder.

Optimize your images

Huge images are bulky and inefficient – they’ll slow down your page load speed and penalize your overall ranking in search engine results. There are a number of tools to use that optimize images once they’re in your media library, but that adds more workload to your server. Simply optimizing before uploading should do the trick.

Use software like Adobe Photoshop or Sketch to optimize your images or alternatively use free software from GIMP, available for Mac and Windows.

WordPress does a lot of its own optimization to the images it creates when you add media to your library. If you’d like to know what WordPress is doing when you upload media, take a look at our article on compression and responsive images here.

Tag your images

Tagging images with a proper title, alt tag and description helps search engines understand what your image is about. Search engines use the HTML alt-tag associated with the image, so that’s where you need to focus your attention first.

The Title attribute, which provides the image tooltip, is sometimes used by search engines but it’s less important than the ALT tag. Don’t stuff the alt-tag with too many keywords – 125 characters is the recommended maximum, and between 4 to 7 words is regarded as best practice.

WordPress won’t add the alt-tag or title attribute data to your images automatically so it’s up to you to add it manually on upload. There are plugins that can help out with that but we recommend adding this data yourself for optimal results.

Schema.org

Beaver Builder uses schema.org markup to add metadata to images used throughout your site. It won’t add data to every image – that’s often not necessary. However, it will add code to images that have context on your site like your logo. Here’s the code added by Beaver Builder to the head section of your site’s HTML for a header logo:

Using structured data this way gives search engines more scope in understanding the usage and context of images on your site.

More about using the ALT-tag

So we know search engines use the alt-tag as the primary snippet of data to understand your images. How do you go about adding data to your image? You can do it a number of ways; either when you upload the image or by editing the image in your media library. In the example below, we’ve opened the image up by clicking on it in the WordPress editor, allowing us to add the necessary data to the Alternative Text field.

When you add an image to your layout without an alt-tag or title attribute, the final HTML output will look a bit like this:

If you don’t add any data to these fields, you’ll see the image on your layout but it won’t have any useful information associated with it. This image below has no additional data added to it which in turn means it won’t be indexed by search engines.

A better image example

To enable search engines to index your image properly, we’ve opened the image in the editor and add relevant data to the ALT-tag and Title Attribute. This results in the following code included in the HTML that search engines will be able to use.

Using images in Beaver Builder from Beaver Brains

Using images in Beaver Builder Modules.

Not all modules are equal. Juan Carlos Duron’s post on the Beaver Builder Facebook Group made a valid point about the way Beaver Builder modules render image metadata.

Photo Module – The standard Photo module includes alt-tags and in addition, adds schema markup to the images.

Gallery Module -includes alt-tags and schema markup in all images.

Content Slider – includes alt-tags and schema markup in all images.

Row Backgrounds – Beaver Builder references the image in row backgrounds in CSS rather than the HTML. Search engines, therefore, won’t be able to index the image. It adds the image to the CSS rather than the HTML as it needs to manipulate the image properties according to the row background settings.

Slideshow Module – The slider module works in much the same way as row backgrounds, adding the images without alt-tags. Again, not great if you intended search engines to index your images and if you prefer using an SEO friendly slideshow plugin, perhaps Metaslider is a good alternative.

More and more data – using Open Graph

When visitors to your site share blog posts or images to Facebook or Pinterest, these services will use Open Graph metadata to create cool previews of your content. Plugins like Yoast SEO add Open Graph meta data to your site’s <head> section which includes image data for file type, width and height. Open Graph uses the image title instead of alt-tags, so it’s import to title your images correctly.

Here’s an example of the Open Graph HTML code used. The image referenced in the og:image path is the image used for the preview on social media pages.

Twitter uses similar code to Open Graph but they have their own framework for displaying images in Twitter cards. If you’ve filled in the necessary information in the social sharing section of your SEO plugin, you’ll be good to go.

Yoast has a good article on alt-tag optimization here.

Wrapping up

As we’ve seen, there is a lot of hidden data used by external services to interpret and understand your content. Search engine ranking relies on this data to be present to help them deliver relevant results and whilst there are ways for you to add the data, it’s really important to know that WordPress, Beaver Builder and SEO tools deliver the data as intended.

If your site relies a lot on product images to attract visitors, make sure you add metadata and use modules that include the alt-tag in HTML code.