Social Icons at the Top That Send Visitors Away

The first thing on the page

On many small business sites, the first thing above the logo is a row of small icons: Facebook, Twitter, Google+, and often YouTube and Pinterest as well.

They sit where the eye lands first, and on a phone they are often the first thing a thumb can reach. Some open in the same tab.

A visitor who came to ask about a booking taps one, finds the business's page among friends' photos and news, and never comes back to the site.

What happens after the tap

A tap on a social icon is a tap away from your site. On a computer, if the link opens in the same tab, the social network's page replaces yours.

On a phone it is usually worse. The link may open the Facebook or Twitter app instead, where the visitor's own notifications and friends' news sit a tap away from the business's page.

Getting back means finding the browser again, or pressing back more than once. Many visitors do not bother, and the enquiry they arrived with goes unasked.

Why the icons ended up at the top

Social icons drift to the top of the page for understandable reasons:

• Themes put them there by default, in a strip above the header.
• They look current, a sign the business is active online.
• Someone wanted followers, and the top seemed the place to get them.
• They fill an empty corner of the header that nobody planned.

None of these is about what the visitor needs. A follow gained this way can cost an enquiry, because the follow happened instead of the enquiry, not after it.

What the top of the page should offer

The top of the page is the most valuable space on the site. It should hold what most visitors came for.

For most small businesses that means the phone number as a tappable link, the main next step as a clear button, such as book, register or get a quote, and the hours or location.

On a phone, those should be visible before any scrolling. Everything else, social icons included, can wait until the visitor has seen them.

Where social icons help

Social icons are useful to visitors who have finished what they came for and want to keep in touch. Put them where those visitors are.

The footer is the usual place, since people who scroll to the bottom are looking for the extras. The contact page is another, beside the phone number and address, as other ways to reach you.

A confirmation page after a booking or a purchase is the best of all. The visitor has done what they came to do, and an invitation to follow is welcome rather than a distraction.

Same tab or new tab

Setting the icons to open in a new tab keeps your site open on a computer. It helps, but it is not the whole answer.

On phones, new tabs are easy to lose, and many social links open the app anyway. Position matters more than the tab setting.

An icon in the footer only reaches visitors who have already scrolled past the phone number and the booking button, which is exactly the point.

A worked example

A wine school runs sommelier courses on weekday evenings in a rented room above a restaurant downtown, and takes registrations through its website for courses that start each season.

Its header had a strip of five social icons above the logo, all opening in the same tab. The course dates and the registration button sat below a large photograph.

At tastings, prospective students told the instructor the site was hard to use. Several had tapped the Facebook icon looking for course dates and ended up in their own news feed.

The strip came out of the header. The top of every page now carries the next course dates, the price and a Register button, with the phone number beside it.

The icons moved to the footer and the contact page, opening in new tabs, and the registration confirmation now invites new students to follow the school for tasting nights.

Like boxes and feeds near the top

Some sites go further and put a live feed or a Facebook Like box near the top. These load scripts from the social network before the page finishes, which slows the first screen.

They also bring the network's own content onto your page, with its own links leading away. If you want a feed, the sidebar or the footer is the place for it.

A plain icon that simply links to your page adds almost nothing to loading time; the network is reached only when a visitor taps.

Counting the taps

Your developer can record each tap on a social icon as an event in Google Analytics. A few weeks of data show how many visitors leave that way, and from which pages.

If those taps come mainly from the home page and the contact page, the icons are catching people on their way to enquire.

The counter-case

A few businesses post their freshest news on a social network before anywhere else. A farm stand posting what was picked that morning, or a band with a show tonight, may want that link high up.

Label that link with what the visitor gets, such as today's picking, and open it in a new tab. Better still, show the information on the site and link to the feed for more.

The general rule holds: the top of the page belongs to what most visitors came to do, and for most small businesses that is to call, book or ask.

Moving the icons

1. Open your home page on a phone and note what shows first.
2. List what visitors most often come to do.
3. Put the phone number and main button at the top.
4. Move the social icons to the footer.
5. Add them to the contact page beside the other ways to reach you.
6. Invite people to follow on confirmation pages.
7. Set icon links to open in a new tab.

Step three is the change visitors notice. When the next step is the first thing they see, the icons no longer compete with it, wherever they end up.

Keeping the address on that contact page easy to tap and copy is covered in an email address shown as a picture to stop spam.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.