Web Development Tip: Logos Up Front:

There are many social media sites in which when a user tags a web page, the system looks for images on the web page to use as a featured image.  You can see this in effect when you link to a web page in Facebook – you are then free to choose an image on the target page to use as a featured image.  If an image is not inline, however, but positioned as a background graphic, that image won’t be available as a featured image.

In web development, there are two ways of showing an image:

  1. Using the IMG tag, actually embedding an image in the HTML code
  2. Using CSS, embedding an image as a background graphic

If your logo is not inline, you’re limiting your fan’s freedom to share your logo as a featured image.  I’ve encountered this often when I’m trying to bookmark a page in Pinterest or List.ly. A lot of web developers have been doing the latter, placing the logo as a graphic element in a background graphic of the masthead area.

 

Marketing Profs is an example of a site that doesn’t have their entire logo inline – and thus when I went to link to their site on Facebook, their logo isn’t available as a featured image.

Test your web pages to make sure your fans can use the images that are best going to represent you.

Thrive in the digital marketing revolution.

Leave a Reply

3 comments on “Web Development Tip: Logos Up Front:

shyamster

Great tip! This would definitely make it easier for tools like List.ly to pick up relevant images/logos.  
 
I’d also recommend that site specify opengraph image tags pointing to their logo for their home page. For example we have the following meta tag in our HTML for list.ly home page.
 
<meta property=”og:image” content=”http://cdn.list.ly/logos/listly-square-logo.png”/>
 
This allows a tool like list.ly to quickly pick up the appropriate image for the page even if the logo is used as a background element.  For more information on open graph (Facebook created this), see here – http://ogp.me/
 
 


LinkedInExpert

As a fan of List.ly – I’d better go and check this out right now!


RicDragon

Thanks for the tips, Shyam – I didn’t realize exactly how that feature worked. I think your tip has prompted a nice change to a WP plugin we’ve authored.