How to level up your website with open graph images
Hey there! Yes, every blog post should start with a little greeting to break up the ice. Open graph images should do the same. In today’s post, we’ll examine how and why having the proper graph image is essential to drive web traffic, promote your effort and engage with your audience.
First of all – what is an open graph?
An open graph is a still image that is visualized when you share a link on social media. Said in other words, it’s an image dedicated to web pages to make them attract more attention when shared on social media channels An easy example could be Facebook. In Facebook, an open graph permits any page with a setup image to have a visual accompanying the link. This allows links to have the functionality of graph objects and attract more attention because, as we know, images are more likely to catch the eye.
But it’s not just Facebook, but also other websites such as Twitter, LinkedIn, Google+, etc.
So if you are looking to convert your social media friends and followers into an engaged audience intrigued by your content, putting the right open graph image is a worthwhile investment, and this post is for you.
Visual curating your content
As social media users, we all know that we are more likely to click on a well-curated link with an eye-catching open graph image.
The graph image is the first thing that visualizes when you start creating a post, and in most cases, the copy/text that goes with the open graph is a CTA to know more by clicking the link. So trust us when we say that putting time aside to create an excellent open graph is a killer move.
Social media sites are a vital channel to drive more traffic to your website. If you want to stop people and make them click on a specific link, you need to consider what effect and emotion you want to encourage in the viewer. Here is a list of things that will help you find the formula that works for you and your business
Think in perspective
By taking the time to find and produce the right visual in the proper format and make a reusable file, you’ll create cohesive, on-brand content. Reusable files are great if you have a blog section because they will allow you to follow the same color scheme, guides, and structure to fortify your brand’s image. It’s also good to think to align it with your brand-tone and image. Let us give a little example to illustrate this – if you have a minimalistic brand, having a super colorful and talking graph image might not be the best option because it will feel strange for your customers.
The recommended size is 1200 x 627 pixels, and the size shouldn’t exceed 5MB.
If your image is under 400 x 209 pixels, this is the result, and honestly, we can’t say that this is eye-catching. Here’s an example. It’s incredible that some big companies didn’t bother to make a decent visual that presents them.
Oh, and here’s an example of what will happen if you really really don’t consider your website shareable on social media.
Tip: Stay true to your brand guidelines, and make open graphs align with your brand’s aesthetic. They should be coherent with your brand tone and design.
Chose the aesthetic of your brand communication
The first thing you’ll want to do is decide on the style of your graph image. Would you prefer it to be only with a logo and the brand name, or are you willing to add a bit more about yourself? A great way to do this is by only looking at other brands and companies for inspiration. Here are some examples we selected to show you.
Logo & brand colors
Some brands prefer to keep it simple and use their logo and brand color as a background. In case you don’t feel inspired or doubting what road to take, play it safe. Of course, the best option will be to take a piece of advice from experts and have designers create it for you. In this case, you can count on Ralev.com to give you a hand. We are native in all digital services.
Zoom on an aspect of the brand ID
Suppose you already use your logo as a profile picture on your company’s account. In that case, you can probably leverage the opportunity and stand out even more by creating a more dynamic open graph. For example, Mailchimp has a recognizable style, and instead of merely sharing their logo in black on yellow background, they use one of their well-known illustrations.
Celebrate some of your products
Some products are so emblematic that they speak for the whole brand. In such cases illustrating your company by showing a product or product line is a smart move.
Coca-Cola uses their vintage glass bottles with the logo on the label. They show the three most popular varieties – original, zero, and “life”. We all know how they taste, and the vintage bottle is a smart move because they speak for the company’s history.
Gucci uses a visual of a bag, but as you can see, the image isn’t centered, so it seems they didn’t dedicate time to polish their open graph. Here it’s the well-known Gucci pattern that speaks for the brand.
A great example of an open graph is Adobe who uses a set of their products shown artistically. The logos and the lightening show the proficiency level of the company and the products they offer.
Focus on a collection/event/milestone
Look at Louis Vuitton and Valentino – they are using images from their spring-summer collection. This is an excellent idea if you invest a lot in popularizing your readers because it easily recalls the consumer, who is already familiar with it.
Tip: A way to explore others’ open graphs is by simply copying the URL and putting it in your status update feature on Facebook. This way, you will see how your concurrents are using their open graphs to show their content. Don’t forget to screenshot the best references!
Deciding on the component
Your brand colors and fonts can help shape your open graph, but what will be the background? Do you want to use photos you made, or maybe some you’ve downloaded from a stock site? Are you willing to have a pattern, or it’s better to use a grid? It all depends on the design.
Board Game Geek uses their logo and makes it stand out, even more, they are opposing it to а purple overlay.
TV5MONDE offers a mini mindmap to gather what the audience will find on their website or on their channel.
National Geographic uses a landscape photo where mountains, fields, and water meets. This photo is probably selected to illustrate that their materials embrace all nature’s aspects.
Tip: If you choose to have a pattern in the background, you should be really picky because they often affect the text’s readability or other components’ clarity.
Differentiate the images
Like in math, you can’t have only one formula for all equations. It would help if you had a strategy for the different types of publications. When sharing corporate information, using a logo and a slogan is best, but this won’t work out when you want to share a blog post or a case study.
Blog posts work best with photos that are similar to the ones integrated into the content.
As an example, we can take a blog post we wrote a few months back. We wanted it to have a trendy visual, eye-grabbing, but again puts our clients and project at the open graph’s heart. So we used phone screens showing the mobile version of the websites we made.
When sharing case studies, it’s best to have a scheme showing a little preview of the showcase to give your audience a sneak peek. This is great for helping to set the direction and can excite the reader.
Tip: Ensure that if you go for a design with more than one photo, the photos you’ve added are big enough to be visible on all screens. Keep in mind that by adding, let’s say, 4-5 photos, they will be too small to fit Facebook’s dimension for an open graph. In that case, we have doubts the viewer will see what you wanted to show him. So avoid adding more than two images on an open graph. Here we can go back to the example of Louis Vuitton’s open graph. It seems to us that there is too much information in the picture, and it’s hard to distinguish all details and objects.
Be authentic
Whatever you strive for – a more professional and polished look or more “talkative” open graph, try to be authentic. It’s essential to stand out and give enough information that gives a glimpse of what to expect but don’t make them too busy or cluttered. The goal is to excite people and make them click on your link. Basically, you want to make sure it’s easy to read and is cohesive with your brand tone and image.
Our open graph is in our three primary colors – black, white, and pink. The logo is prominent and situated in the top left corner. Underneath, we mention the principal services we offer – design and web development. We added a shortlist of the programs we are using daily. We’ve added an image from the index page on the right to balance the image and give an idea to people who click on it will see.
