Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Do your competitors are always ahead? - Raise your voice with web marketing!
  • HomeHome
  • About UsAbout Us
  • ContactsContacts


Take a software geek from the 80s, add a new generation graphic designer and dilute with a longtime marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano
Go to the blog summaryGo to the blog summary

You may be interested in

Google wants HTTPS everywhere. Yes it's another SEO factor!
Play video...

Google wants HTTPS everywhere. Yes it's another SEO factor!

Here's a new important Google ranking factor that will grow in importance. After that, do not tell me that I have not warned you!

How to dramatically increase social media LIKEs to your web site

Here's a free download that I created some time ago. It's a good tool for increasing engagement, but use with caution.

Last published

[FREE download] Keywords Mixer: long tail keywords made easy

[FREE download] Keywords Mixer: long tail keywords made easy

There's a basic implementation inside Google AdWords Editor, but this tool will give you more control over permutations and long tail keywords.

Case study: advertising B2B maintenance

How is it difficult to advertise maintenance services in B2B? Let's explore this case study and discover secrets and most common mistakes.

Most popular

Lazy loading and the SEO problem, solved!

Lazy loading and the SEO problem, solved!

The best SEO solution to index your dynamically loaded contents, no more compromises!

Milano Design Week 2017, Design Districts

Ventura Lambrate and Tortona, here are the best creations that we discovered in the 2 districts of the Fuorisalone Milan Design Week 2017.

Editor's pick

Case study: branding and marketing for a magician

Case study: branding and marketing for a magician

Singular case study in the world of illusionism. See how we have created a brand and a web marketing campaign with exceptional results.
Mental marketing secret #1: the fake compromise

Mental marketing secret #1: the fake compromise

Can mentalism influence marketing? As a marketing professional and a long term magician, I will reveal you some tricks.

Stay informed on digital strategies

Take a look at the last published articles
RSS feed

How to make your website look great on social media

Published on 10/5/2014
Categories: Social Media
How to make your website look great on social media

Posting links on social media (FacebookTwitter, etc..) its a daily practice, usually blog articles, new products or a description of your professional services. 
The problem is that often these links look graphically disappointing, so they catch very few visitors.

I'll show you in this article how to make the most of your links on social media.
The argument is certainly technically, but nothing impossible. In any case, if you are not the designer who will apply the advice I'm going to tell you, talk to your web agency.  At worst you'll be aware of the problem. 


You've just posted a link on Facebook and has the following miserable appearance? 

Facebook pessimo risultato

I'm going to explain how to make it look like this instead.

Facebook ottimo risultato

The differences are obvious:

  • There is a nice photo.
  • Below the photo is the title of the page.
  • Below the title is a short and catchy description.
  • Under the description there is also the Internet address of your website (ANDATARITORNO.COM).

Where is the magic?
We must make your page understandable by Facebook, so that it is able to choose the featured photo, understand which is the the title and find a brief description (which possibly does not get truncated). First, change the markup



This code is used to inform Facebook that we're going to talk a language it can understand. We're talking about the widely used Open Graph protocol. 

Now we will continue adding information inside the <head> section of the page.

<meta property="og:type" content="article" />
<meta property="og:title" content="Bangkok, venghino signori, venghino!" />
<meta property="og:url" content="https://www.andataritorno.com/viaggi/28/bangkok" />
<meta property="og:description" content="Iniziamo il viaggio in Thailandia partendo dalla sregolata capitale. Riusciremo a resistere a tutte le tentazioni? A tutte sicuramente no..." />
<meta property="og:site_name" content="Andata/Ritorno" />

The first tag informs Facebook about the representative image. Be careful that the short side of the image must be at least 300 pixels (overkill is better).
The second tag informs Facebook on the type of the page, in our case the post of a blog.
The third tag specifies the title.
Because often you can get to a page by following different links, we specify what is the one we prefer in the fourth tag.
In the fifth tag we give a brief description. To avoid truncated descriptions, stay under 150 characters.
Finally let's tell Facebook the name of our website with the latest tag.

Did you like this article up to here?

Before you continue, follow us on our Facebook page pressing the button here below!
In this way, we'll be able to keep you updated on digital strategies not only with our posts, but also with the best articles that we collect around the web.


It 'a recent Twitter development, so maybe you do not know it, but the classic tweet

Twitter pessimo risultato

today can instead look like this:

Twitter ottimo risultatoWhat you're seeing above is the new Twitter Card.
The good news is that if you have already implemented the recommendations for Facebook (Open Graph), you are missing very little to have the Twitter Card too. You just have to add the following 3 tags:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@IdeaRDigital" />
<meta name="twitter:creator" content="@IdeaRDigital" />

The first tag tells Twitter the type of the card you want to use, in our case the one with a large image.
The other 2 tags specify the Twitter accounts of the site owner and of the author (in our case they coincide). 


Google Plus is the Google's social network that's growing in popularity mainly because it is integrated with the search engine and provides reviews and localization of the companies.

Here, too, if you just post a link, this might look like the following:

Google+ brutto risultato

While maybe you'd like to have a post like that:

Google+ ottimo risultato

What should you do?
Here, too, if you've already implemented the Open Graph instructions, then you're ready.
It is better to add a description of your page in the "classic" description tag  too, because Google likes it so much, especially when it comes to index your page in search engine.

<meta name="description" content="Minimal graphics and optical illusions for the green Coca Cola campaign" />


Try to guess... even on LinkedIn, if you have properly implemented the Open Graph, you're ready to go.


I conclude with Pinterest, the most famous social network for sharing images.
Here there is very little you can do, the majority of work is done by the visitors of your site who decide to share your pictures.
What we can do is make it easy for them.
We must avoid that when they will press the PIN button, they come to the following popup:

Pinterest brutto risultato

instead of this

Pinterest ottimo risultato

Pinterest takes the description of the photo directly from the alt attribute of the image. This is another reason to never forget to specify the alt (alternative text) attribute. Let us recall some reasons:

  • When the browser is not able to load the image, it displays the alternative text.
  • Blind people are able to better understand the page.
  • Google indexes better the images that have alternative text.
  • And now we also have Pinterest.

Well, now you know the "trick", your next social posts will no longer be left to chance.
By the way, if you use our Infrared CMS, this article will only be used for personal culture, because all the aforementioned optimizations are already done automatically without you having to worry about it.

Did you find this article useful?

If you think your friends will like it too, share it on Facebook.
You have only to press the button here below!


You are the reader number 5,670.


Creative Commons License

Photographies, videos, graphics and texts by Idea R are licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Previous article

Previous article

Why doesn't Facebook show your new great post to your page fans?

Next article

How to fix your ASP.NET site to be responsive on Windows Phone

Next article
  • Visual Communication, Art DirectionVisual Communication, Art Direction
  • Apps, Cloud, Mobile, Software DesignApps, Cloud, Mobile, Software Design
  • Digital StrategiesDigital Strategies
  • BlogBlog
Touching finger
RSS feed

Scroll to top