SEO for Icons, SVGs, and Vector Embeds [Quick Hacks]

Images are typically seen as ornamental; the creator merely uploads a picture in PNG format, adds alt text and hopes for good results when using that image. However, if the creator is using SVGs (Scalable Vector Graphics) as opposed to other photo files, they may have a wealth of ability to gain traffic through their work due to a lot of designers overlooking SVGs.

Unlike regular photographs or picture files, an SVG is not really an image at all but rather an actual document that consists of coded text. Because an SVG consists of code, Google’s search engine can read the code that makes up the image file, index it and comprehend it far better than it possibly could with a JPEG format. Because of Google’s abilities with coded documents, Google Search Engine Optimisation (SEO) is a possibility when using SVGs.

If a designer wishes to create traffic magnets from the icons and graphics they design, here are a few simple hacks to help them get started.

Google Reads Your Graphics Like Text

One of the key benefits of using SVGs for SEO is that they are in XML, a text-format coding language, so you’re viewing written words, numbers, and commands (not pixels). Because of this fact, search engines crawl through all the textual content within the image file (rather than simply the pixels).

This is where vector embeddings SEO fits in. By providing “clean” and “readable” code, Google’s artificial intelligence has access to clear data to process to determine the overall character of your image at a much higher speed than it would do so using a typical pixel-based file.

The “Hyperlink Inside” Hack

Here’s an alternative that most people do not take advantage of: placing hyperlinks within the image file (normally known as clickable links). For example, if you were to upload a complex diagram or mapping format (roadmap), you could create a hyperlink in an SVG file. Therefore, when Google crawls the image file, it finds the hyperlink and adds it to its index and counts it towards your vector SEO ranking as well by passing linking power to your image instead of to just an ordinary PNG file.

Don’t Just Use Alt Text, Use Titles

Every person should already be familiar with Alt Text (ALT) for images; however, there’s more to SVG SEO than just Alt Text. A Scalable Vector Graphics image (SVG) is actually a document and contains more than just an ALT tag; it also has dedicated comments inserted into its code.

To get the most out of your SVG files, edit the SVG code to add a <title></title> (for the short name) and a <desc></desc> (for the long explanation) immediately below the opening <svg> tag. This way, Google has a good understanding of what the file is about and can return it as a search result, even if the end-user doesn’t see it.

Paste the Code, Don’t Upload the File

By placing your SVGs inline in your HTML document, you can take advantage of this method of using SVG files. Essentially, this means you copy the SVG code into your site’s HTML rather than uploading the SVG image file directly to your site (e.g. image.svg).

Why inline SVGs? Inlining an SVG means it resides in the text of your web page and is indexed as part of the text associated with the page. This direct association of the text, such as “Shopping Cart” or “Contact Us”, with the associated vector provides an additional SEO benefit for website icons.

It also supports the current UX/UI design trends and concepts generated for fast-loading sites. Since the inline SVG code is part of the page, there is no need for an additional server request to load the SVG code, allowing the SVGs to load instantly.

Future-Proofing with Vector Embeddings

Search algorithms are evolving. Google is moving away from keyword-based search results (i.e., finding text strings that match your query) and instead is focusing on understanding “concepts,” a process known as vector embeddings SEO.

Below is an example of how vector embeddings SEO works. Imagine you see a graphic depicting a “magnifying glass.” In the past, Google needed you to label this graphic with the keyword “search icon.” With vector embeddings SEO, however, Google analyses the geometric shape of the vector image, recognises that it is a shape that represents the action of searching, and finds similar images that depict this action based solely on the image itself (not the text label).

By creating an image with clean, high-quality vectors, you will be able to take advantage of this future in which vector embeddings SEO will determine how images rank.

Context is King for Infographics

Charts can also be used in SEO for infographics. Your data in chart format should not be contained within a flat image. It is important to use SVG (scalable vector graphics) for charts so that all numbers, labels, etc., within your chart are still considered text and therefore able to be indexed by Google or any other search engine as data points on your graphic.

This is the best way to incorporate seo for vector graphics. Additionally, using SVGs instead of bitmapped images for web icons enables the icons themselves to provide additional semantics for the button/header that they represent.

Summary

Optimising your graphics is about realising that code is content. Whether you are tweaking your files for svg seo or preparing for the future of vector embeddings seo, the goal is to make your visuals as readable to machines as they are to humans.

It takes a bit of extra effort, but the ranking rewards are worth it. If this sounds like too much code for you to handle, you might want to reach out to a web design agency in Dubai to build your asset library the right way. Start treating your vectors like documents, and you will see the difference.