Designing and Optimizing Website Headers: Tips to Help Guide Users Through Your Website

gregalbuto
gregalbuto
M Posted 5 years ago
t 9 min read

Your website header is the introduction to your website and your digital brand. It’s important to make a great first impression with your header. Use these tips to put together an attractive, on-brand website header that welcomes users, and creates intuitive and informational journeys through your site.

What is a website header?

Your website header is the primary source of navigational information that guides users throughout your site. Here, you can include a navigational menu, clickable calls to action (CTA), your logo and other important navigational or brand elements.

This is the BrightEdge header. We’ve kept it simple in design, and it includes our logo, a navigational menu, CTA and search function.

Site header design example - BrightEdge

A navigational menu in your header will give users the opportunity to explore the elements of your site they might find interesting or useful.

Common CTAs include a sale promotion or discount code, a demo request, a newsletter registration field.

Should I optimize my website header?

While you can take your website header design anywhere, you’ll want to maintain well-optimized, quick loading assets. There are endless opportunities to designing your header. You can feature video or animation, huge headers, headers with a simple banner and a hamburger menu, a carousel of images and much more. If you want to include images or video in your header, go ahead and add it but before pushing it live, make sure all elements load quickly.

One of the most important best practices for header design is complying with mobile-friendly and responsive designs for all devices including desktop, smartphone, tablet, etc. Leveraging responsive web designs will aid in the optimization of your header. Be aware that large images should shrink accordingly when a user moves from desktop to mobile.

What should my website header design look like?

When it comes to designing your website header, the creative possibilities are endless. Before pushing your site header live, you can test out features and design elements through A/B testing. Your header can be sleek and professional, interactive, colorful, simple, animated -- the list goes on. While the sky is the limit for the design of your header, keep in mind the principles for user engagement.

This is sample html code for a basic website header.

Understanding optimal website header size - BrightEdge

You can choose the design of your header from the CMS you use for your site, l or you can design it yourself through HTML and CSS. Below is the HTML for a simple website header:

What elements should my website header include?

  1. Company name or logo: you’ll need a brand identifier to let users know they’ve landed in the right place.
  2. Call to action (CTA): drive conversions with a header CTA. Make it attractive and obvious for the user. Use colors that pop, capitalization and actionable copy to encourage users to click.
  3. Tagline: here, you can be creative. Use your company motto, your well-known tagline, a promotion, etc. Whatever message you choose, make sure it is clear and concise.
  4. Search bar: give users the opportunity to search your site using keywords to find exactly what they’re looking for with ease.
  5. Image: an image is optional, and If you do include an image, make sure it’s optimized with a file name and image alt containing relevant keywords. Your image should also be compressed to load as quickly as possible. Choose a high-quality image that will look great when compressed.
  6. Contact information: a user may be looking for a direct way to contact your company, a salesperson, or help desk. Make your contact information or “contact us” page clearly visible to users. If they have to go looking, they may avoid the hassle of your company altogether.
  7. Shopping cart: if you’re a retail or transactional site, you will want to make sure a user’s shopping cart is visible.
  8. Social media links: some sites feature social media platforms in the header, others include them on the footer. You can use clickable icons in your header to indicate which social media platforms you are using and to encourage engagement.

What other website header design elements should I consider?

  1. Size: while you should consider the size of your header, there is no winning website header size for sites. You’ll want it to be small enough to load quickly but large enough to fit each asset without being overwhelming. If users have to scroll too much to move past your header, it’s probably too big.
  2. Responsiveness: more users are using their mobile devices to perform searches than ever before. Mobile search has become so common, Google is now crawling mobile sites to consider ranks instead of desktop. Your header, and site in general, should be responsive for all devices.
  3. Typography: your fonts should be clear and easy to read. Avoid extravagant fonts and colors and backgrounds that blend when overlayed. If your text isn’t readable, users will quickly leave your site.

Other SEO actions to consider when designing your header:

  1. Optimize image or video assets: this includes logos, social media icons, videos, etc. Image and video SEO includes giving each asset a file name and alt text with relevant keywords. 
  2. Optimize H1s, H2s and taglines: if your header includes any text beyond menu options and a contact page, optimize H1s and other text with keywords. Choose great keywords that explain your product or service and also give you the opportunity to rank for your homepage. Learn how BrightEdge Instant delivers real-time keyword research.
  3. Cache relevant static assets: static assets include JS, CSS and images. When you cache an asset on your site, you are telling the server to save that asset in order to load a page more quickly in the future. We recommend caching your logo for one year, at maximum. As your logo will likely remain the same and in the same position, one year is a standard caching timeline. For other statics that might change more often, three to six months is a recommended caching time.

Think of your header as the welcome mat to your website! Because it’s the first thing a user sees, it’s important to make it attractive and interactive but also functional. There is no right or wrong style for a header design, but these tips will help you maintain an overall clean and optimized header that will help guide users throughout your site.

TEST WEBINAR

TEST WEBINAR TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

TEST WEBINAR

 

CAPTCHA
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
 
 
 

Demo the BrightEdge Platform

[[nid:4777]]

What is SEO?

Website optimization – or SEO – is the practice of structuring your website’s pages to make it easier for search spiders to crawl your site, create an optimal user experience and provide unique information or helpful resources on a topic that searchers are looking for. This is all done in order to drive higher ranks in the SERPs – or search engine results pages. When you create content that is unique, informative, educational and optimized, you will likely find your pages naturally rising in ranks in the SERPs. This will drive both new traffic and more traffic to your site. 

Why do I need SEO?

As more businesses, more products and services, more education, etc. move online, there is a growing interest in learning SEO techniques and strategies with the hopes of ranking higher for important pages. We did some research via Instant to learn more about what users are hoping to understand about SEO. Below are some examples of growing search trends for topics surrounding SEO for beginners. We will answer these questions in the content below.

How to do SEO search trends increase - BrightEdge

What is website optimization search trend increase - BrightEdge

What is on and off page SEO search trend example - BrightEdge

As you can see, there is an increase in interest around the basics of SEO. If you’re reading this blog, you’re likely interested in performing SEO yourself and learning what exactly goes into the initial steps for optimizing pages of a website.

Statistics show that 28.5% of users click on the first organic SERP, 15.7% click on the second, and 11% click on the third. Less than 10% of searchers click on paid advertisements. Why? Because users don't trust them. Because of this, SEO is absolutely vital to the success of your website. 

Not only does SEO help the success of your site, though. Optimizing your site provides users with an overall better experience. For example, when you focus on page speed, a search engine ranking factor, Google will reward your site for loading quickly. On the other hand, search engines will also penalize your site for loading slowly. Slow loading pages, pages that don't provide valuable answers but are stuffed with keywords, an unresponsive website and more will get your site penalized and dropped in rankings via search engines.

Focusing on the overall health of your site will give search engines the opportunity to rank your pages well in the SERPs. 

Why is SEO important?

So, you might be wondering why SEO is important and if it is, is it important to your industry or business? The answer is yes. The organic channel makes up 53% of all web traffic and is expecting to rise above other search traffic, year after year.

Not only is the organic traffic channel growing, but there is no media cost for SEO. If that weren’t enough to interest you, SEO can provide substantial ROI. By creating unique content that is also well-optimized, you can increase your ranks. As they increase, you will drive traffic. The more traffic, the better your chances of converting a user to a customer.

While the organic channel continues to grow, it’s important for SEOs and digital marketers to grow with it. Learning the basics of SEO is imperative but also understanding the “why?” behind it is as well. Search engines like Google are continuously evolving their algorithm with new updates on a daily basis. Why? Because Google, Bing, Yahoo and other search engines want to provide searchers with the best possible user experience. Because of this, it is important to create content for the users, not bots.

While it’s tempting to practice keyword stuffing or accept low quality guest blogs just for a backlink, these are poor SEO practices, and you should avoid them at all costs. Going into the beginning stages of SEO, you should understand that SEO is an ongoing process that requires time and patience. While most SEO efforts can be quick to implement, the results will take time.

What is on-page SEO?

On-page SEO includes all of the optimization you can do to the front end of a page found in HTML source code. It includes everything involved in creating the best possible user experience for readers. Understanding on-page tactics is key to understanding SEO in general and how it works. 

On-page SEO includes the following elements:

  1. Title tags
  2. H1, H2 & H3 tags
  3. Image alt
  4. Anchor text
  5. Keyword density
  6. Meta descriptions
  7. Internal linking
  8. Tags
  9. URLs

Some best practices for on-page SEO include the following:

  • Write well-developed content that is fresh, original and provides real value to users
  • Use the keyword in the URL, titles, subtitles, and body copy
  • Write descriptive and engaging meta descriptions and titles to clarify content and encourage clicks from the search engine results page
  • Use a digestible layout that makes it easy for visitors to read your content
  • Work on producing fast page speeds
  • Optimize alt text and file names on images that includes the topic keyword

What is off-page SEO?

Off-page SEO refers to all of the actions of your site taken off of your domain. It includes all of the SEO elements and techniques used to prove your site's worth and reputation from external digital presences including reputable websites, directories and more.

Off-page SEO elements include the following:

  1. External backlinking
  2. Anchor text from external links
  3. Brand mentions
  4. Influencer programs
  5. Guest blogging or writing
  6. Social media

Use the following off-page SEO practices to gain a leg up on your competition:

  • Cultivate high quality backlinks from other websites - learn how in this whitepaper
  • Build internal links using the anchor text from other pages within your domain or other sites you manage
  • Develop content for publications like guest blogs that you can link back to your site
  • List your business in any applicable directories
  • Build your social media presence

How do I do SEO for a website step by step?

There is no perfect way to perform SEO step by step as each page and business will require different SEO elements based off of what a site is hoping to gain from page optimization. For example, if you’re optimizing a page for local users in order to drive foot traffic to your store’s location, your SEO efforts will differ. You’ll want to focus more heavily on optimizing locations pages, increasing digital citations and creating an optimized Google My Business page.

Questions to ask yourself while performing SEO

  1. Is my content out of date? If the date on your post is several years old, the content is likely also old. You may want to consider refreshing the content if there is new data and insights on the topic in order to see ranks improve.
  2. What are my primary, secondary and tertiary keywords for this page? You’ll want to begin the process of choose keywords with keyword research. You can leverage Data Cube in order to find relevant keywords for your site with high search volumes. You can also leverage Instant to dive into seasonality of search trends. Once you’ve completed some keyword research, you’re ready to choose the keywords to optimize a page for. If you’re looking to optimize a page, you should, at minimum, have a primary keyword. Secondary and tertiary keywords support the primary keyword but typically have smaller search volumes. You can check on keyword search volumes using Data Cube.
  3. Are the page’s images compressed and optimized? Optimizing an image includes giving it a file name and image alt text based on your chosen keywords. Compressing an image will assist the page in loading more quickly which prompts better UX and ranks.
  4. Does my keyword appear near the top of the page? Your keyword(s) should be used in title tags, H1s and within the first paragraph of the page’s copy to easily indicate to searchers and bots what topic the page is about.
  5. Can I share internal links throughout the page? Likely, if you don’t have other information or resources to link to on your page, the topic may not be optimal to include in your content calendar. If you do have opportunities to include internal links, you should do so where they’re relevant. Internal linking is used to link parts of your site together, to improve navigation and to keep users on your site for longer.

If you’re new to SEO and working on the perfect strategy for optimizing pages, we recommend checking out this on-page SEO checklist to better guide you through the initial steps of SEO. Once you’ve checked off all the boxes in the checklist, you’re ready to get SEO efforts implemented into your page. We recommend doing this for every page until you feel comfortable performing SEO without it.

<< Back to the SEO Glossary main page

Definition

Website optimization – or SEO – is the practice of structuring your website’s pages to make it easier for search spiders to crawl your site, create an optimal user experience and provide unique information or helpful resources on a topic that searchers are looking for. This is all done in order to drive higher ranks in the SERPs – or search engine results pages. When you create content that is unique, informative, educational and optimized, you will likely find your pages naturally rising in ranks in the SERPs. This will drive both new traffic and more traffic to your site. 

Why do I need SEO?

As more businesses, more products and services, more education, etc. move online, there is a growing interest in learning SEO techniques and strategies with the hopes of ranking higher for important pages. We did some research via Instant to learn more about what users are hoping to understand about SEO. Below are some examples of growing search trends for topics surrounding SEO for beginners. We will answer these questions in the content below.

How to do SEO search trends increase - BrightEdge

What is website optimization search trend increase - BrightEdge

What is on and off page SEO search trend example - BrightEdge

As you can see, there is an increase in interest around the basics of SEO. If you’re reading this blog, you’re likely interested in performing SEO yourself and learning what exactly goes into the initial steps for optimizing pages of a website.

Statistics show that 28.5% of users click on the first organic SERP, 15.7% click on the second, and 11% click on the third. Less than 10% of searchers click on paid advertisements. Why? Because users don't trust them. Because of this, SEO is absolutely vital to the success of your website. 

Not only does SEO help the success of your site, though. Optimizing your site provides users with an overall better experience. For example, when you focus on page speed, a search engine ranking factor, Google will reward your site for loading quickly. On the other hand, search engines will also penalize your site for loading slowly. Slow loading pages, pages that don't provide valuable answers but are stuffed with keywords, an unresponsive website and more will get your site penalized and dropped in rankings via search engines.

Focusing on the overall health of your site will give search engines the opportunity to rank your pages well in the SERPs. 

Why is SEO important?

So, you might be wondering why SEO is important and if it is, is it important to your industry or business? The answer is yes. The organic channel makes up 53% of all web traffic and is expecting to rise above other search traffic, year after year.

Not only is the organic traffic channel growing, but there is no media cost for SEO. If that weren’t enough to interest you, SEO can provide substantial ROI. By creating unique content that is also well-optimized, you can increase your ranks. As they increase, you will drive traffic. The more traffic, the better your chances of converting a user to a customer.

While the organic channel continues to grow, it’s important for SEOs and digital marketers to grow with it. Learning the basics of SEO is imperative but also understanding the “why?” behind it is as well. Search engines like Google are continuously evolving their algorithm with new updates on a daily basis. Why? Because Google, Bing, Yahoo and other search engines want to provide searchers with the best possible user experience. Because of this, it is important to create content for the users, not bots.

While it’s tempting to practice keyword stuffing or accept low quality guest blogs just for a backlink, these are poor SEO practices, and you should avoid them at all costs. Going into the beginning stages of SEO, you should understand that SEO is an ongoing process that requires time and patience. While most SEO efforts can be quick to implement, the results will take time.

What is on-page SEO?

On-page SEO includes all of the optimization you can do to the front end of a page found in HTML source code. It includes everything involved in creating the best possible user experience for readers. Understanding on-page tactics is key to understanding SEO in general and how it works. 

On-page SEO includes the following elements:

  1. Title tags
  2. H1, H2 & H3 tags
  3. Image alt
  4. Anchor text
  5. Keyword density
  6. Meta descriptions
  7. Internal linking
  8. Tags
  9. URLs

Some best practices for on-page SEO include the following:

  • Write well-developed content that is fresh, original and provides real value to users
  • Use the keyword in the URL, titles, subtitles, and body copy
  • Write descriptive and engaging meta descriptions and titles to clarify content and encourage clicks from the search engine results page
  • Use a digestible layout that makes it easy for visitors to read your content
  • Work on producing fast page speeds
  • Optimize alt text and file names on images that includes the topic keyword

What is off-page SEO?

Off-page SEO refers to all of the actions of your site taken off of your domain. It includes all of the SEO elements and techniques used to prove your site's worth and reputation from external digital presences including reputable websites, directories and more.

Off-page SEO elements include the following:

  1. External backlinking
  2. Anchor text from external links
  3. Brand mentions
  4. Influencer programs
  5. Guest blogging or writing
  6. Social media

Use the following off-page SEO practices to gain a leg up on your competition:

  • Cultivate high quality backlinks from other websites - learn how in this whitepaper
  • Build internal links using the anchor text from other pages within your domain or other sites you manage
  • Develop content for publications like guest blogs that you can link back to your site
  • List your business in any applicable directories
  • Build your social media presence

How do I do SEO for a website step by step?

There is no perfect way to perform SEO step by step as each page and business will require different SEO elements based off of what a site is hoping to gain from page optimization. For example, if you’re optimizing a page for local users in order to drive foot traffic to your store’s location, your SEO efforts will differ. You’ll want to focus more heavily on optimizing locations pages, increasing digital citations and creating an optimized Google My Business page.

Questions to ask yourself while performing SEO

  1. Is my content out of date? If the date on your post is several years old, the content is likely also old. You may want to consider refreshing the content if there is new data and insights on the topic in order to see ranks improve.
  2. What are my primary, secondary and tertiary keywords for this page? You’ll want to begin the process of choose keywords with keyword research. You can leverage Data Cube in order to find relevant keywords for your site with high search volumes. You can also leverage Instant to dive into seasonality of search trends. Once you’ve completed some keyword research, you’re ready to choose the keywords to optimize a page for. If you’re looking to optimize a page, you should, at minimum, have a primary keyword. Secondary and tertiary keywords support the primary keyword but typically have smaller search volumes. You can check on keyword search volumes using Data Cube.
  3. Are the page’s images compressed and optimized? Optimizing an image includes giving it a file name and image alt text based on your chosen keywords. Compressing an image will assist the page in loading more quickly which prompts better UX and ranks.
  4. Does my keyword appear near the top of the page? Your keyword(s) should be used in title tags, H1s and within the first paragraph of the page’s copy to easily indicate to searchers and bots what topic the page is about.
  5. Can I share internal links throughout the page? Likely, if you don’t have other information or resources to link to on your page, the topic may not be optimal to include in your content calendar. If you do have opportunities to include internal links, you should do so where they’re relevant. Internal linking is used to link parts of your site together, to improve navigation and to keep users on your site for longer.

If you’re new to SEO and working on the perfect strategy for optimizing pages, we recommend checking out this on-page SEO checklist to better guide you through the initial steps of SEO. Once you’ve checked off all the boxes in the checklist, you’re ready to get SEO efforts implemented into your page. We recommend doing this for every page until you feel comfortable performing SEO without it.

<< Back to the SEO Glossary main page

Beauty Retailer Triples Traffic and Revenue for Key Ecommerce Pages with BrightEdge Autopilot

See how this BrightEdge client saw rapid SEO results

2,043
highly competitive, non-brand keywords moved to Page 1
308%
increase in traffic from non-brand KWs

Beauty Retailer Triples Traffic and Revenue for Key Ecommerce Pages with BrightEdge Autopilot

See how BrightEdge client saw rapid SEO results

The Business Challenge

With hundreds of stores across North America, the beauty retailer's website is its largest store and the foremost prestige beauty destination on the Internet. Despite its online success, the company found its growth potential limited by legacy aspects of the site's design.

The site's structure made it difficult for Google to find and index valuable content beyond the top pages. They needed a way to scalably grow their share of organic search traffic despite the limitations of the site design.

The BrightEdge Solution

The company's marketing team knew it could help Google better find its content by building out internal links. However, doing so in a scalable, sustainable way remained a challenge.

The retailer's senior manager of SEO noted another challenge to internal linking. "We're limited in the real estate we have on the page where we can place links. We needed a way to scale internal linking in an intelligent way across the site."

BrightEdge approached the challenge with Autopilot, a new marketing automation technology that leverages internal links to move more high-value, non-brand keywords to page 1 of search where 75% of search clicks originate.

Intitially, the company's marketing leader voice some doubts about automating internal linking. Would it impact site performance? Would the links be high enough quality? Would it be able to support different markets and different languages?

The team decided to test Autopilot on its shop pages, saying of the implementation, "We had good communication with the BrightEdge technical team throughout the integration process. BrightEdge provided us with testing URLs, profiles and use cases, so that when it came time to release Autopilot, there were no issues."

The Results

Most importantly, the BrightEdge client saw rapid and significant results.

"We saw an increase in keyword visibility immediately. More significantly, we have seen a better conversion rate on pages that include the Autopilot link block and we've measured an increase in average order value on visits that engaged Autopilot."

Despite robust in-house SEO and technology operations, the company notes that Autopilot offered speed, scale and a "secret sauce" that further benefitted them.

"From just a cross-linking point-of-view, we could have built some sort of service back-end feature, but that doesn't get to the secret sauce, which is BrightEdge's Data Cube. That intelligence is where a lot of the value comes from, and it's not something we would have been able to develop. We couldn't put a price on that."

Following its initial success with Autopilot, the company has begun to expand its use of the technology. "We are expanding Autopilot into other product categories and other pages types. There is additional untapped value that we're really excited about."

That untapped value, according to the marketing team, goes beyond linking purely for SEO. "It is something we can enable on different areas of our site for different use cases. For example, I could use Autopilot to cross-link my support pages. There would be SEO value in doing that, but it would also improve my customer experience."

"In addition to measurable SEO value, we have also seen an increase in average order value on visits that engaged Autopilot. I would absolutely recommend Autopilot." - Senior Manager of SEO, Beauty Retailer

If you're interested in learning more about Autopilot, contact your BrightEdge CSM or request a demo of the SEO platform.

,