8 html elements web designers shouldn't ignore

Many companies look to gain search visibility in Google but unfortunately fall short due to hiring the wrong web design agency who fail to get them the attention they deserve by ignoring certain key factors.

Whatever the case may be that these technical factors were ignored, they are certainly a surefire way to have your website go unnoticed to the benefit of your competitors.

In this article, you’ll be able to find out certain HTML elements that can boost search visibility, increase search listing clicks & traffic to your website and potentially increase your businesses bottom line.

1. Title Tag

Arguably the most important SEO element on a web page, the Title Tag is one HTML element that should not be ignored.

The title tag is an HTML element that provides a web page its title. It’s used along with the web pages meta description to create the search listing in Google.

When title tags are not set, Google will create one by using a websites name. This can negatively affect click through rates (CTR) as users may glance over to a listing that likely has used select keywords in their title.

From an SEO perspective, Google considers keywords used in Title Tags when ranking websites, so it’s good practice to make sure it is set and well written.

Title Tags can also be seen in web browser tabs, through social media sharing and as mentioned the search engine results page.

Tips for setting Title Tags:

  • Must be between 50-60 characters or 528 pixels wide
  • Include target keyword(s)
  • Not be keyword stuffed (ie Vacations, Best Vacations, Cheap Vacations – Vacation Site)
  • Use target keyword first
  • Should be unique for every web page
  • Mention brand or company name
  • Accurately describes page

2. Alt Image Attribute

Alt tags, alt text, alternative text, alt attributes or alt descriptions all denote the same HTMl element which is used to provide a description for images on a web page.

The primary purpose of alt tags is for web accessibility for those who are visually impaired however they also carry SEO benefits by providing search engine crawlers a better understanding of images.

Misconceptions:

The alt tag does not have to always describe the contents of an image.

Alt text example:

Tips for setting ALT tags

  • Don’t be spammy with keywords
  • Should accurately describe image(s)
  • Shouldn’t be long sentences
  • You don’t need to assign alt tags to every image
  • It was not intended to be used as a tool tip

3. Meta Description

A Meta Description is an HTML attribute is used to provide a brief summary of a web page.

Along with the title tag, search engines also use meta descriptions to create listings in the search results. Although they do not influence SEO ranking, they can certainly influence click-through-rates in the search results. It’s important to write catchy and descriptive descriptions for every page. If one is not set, Google will select a snippet from the page content.

Tips for Meta Descriptions:

  • Include target keyword in meta description
  • Should be up to 155 characters in length
  • Should be written in an active voice
  • Include a call-to-action if possible
  • Should be relevant to the page it describes
  • Should be unique for every page / Do not duplicate meta descriptions
  • Do not use double quotes

If you’re website is developed using WordPress and you have installed YOAST for SEO, setting the title tag is easy.

4. Heading Tags

Headings are used to define structure in web page content into headings and sub headings.

Headings come in 6 levels from H1-H6. The larger the font and higher the heading level, the more important the heading level.

Heading tags can improve a website search ranking and should not be ignored. The following tips below should be used as a guide when setting heading tags however there is no exact way for setting HTML elements as there may be rare occasions which require a bespoke heading.

Tips for Heading Tags:

  • Should include focus keyword
  • Do not use simply to make text look big
  • Every page should have an H1
  • Use them to structure content on a page
  • Only use only 1 H1 per page
  • Should not be greater than 70 characters

5. Nofollow Links

Nofollow links are an HTML attribute rel=”nofollow” added to website links that tell search engines not to endorse the page they are linked to.

By default links are set to follow. By including the nofollow attribute your site will not pass any pagerank.

Google looks at the backlink profile of websites as a ranking factor. Ideally it is beneficial to have backlinks that are niche-relevant, from authoritative websites and of course “follow” or “dofollow” backlinks.

In an effort to crack down on SEO spammers trying to get backlinks every which way they can to optimize their website. By introducing the nofollow attribute this cut down on pesky spammers flooding forums and blog comment sections.

Nofollow links should be used on paid links, forums, comments or anything that would denote content that is “untrustworthy” by Google.

Despite receiving a nofollow link from a website, they are still worth pursuing. Wikipedia is well known for using nofollow on all links however it’s still worth getting a link as they can sometimes be a source of traffic.

6. Internal Links

Internal links are links within a website that point to another page within the same domain or the sites root directory. Alternatively, links that point to external websites are considered external links.

Internal linking can provide several benefits to user experience since they can help visitors navigate within a website, discover new or orphaned pages, helps search engines such as Google understand a websites structure and pages and lastly it helps pass link equity similar to external links.

Just as important as a link may be to a page, the anchor text also carries weight. If you are linking to a page that discusses web design then it would make sense to link that keyword to its appropriate page.

If used correctly, internal links can optimize a website by sending page authority to specific pages. Unlike external links, it’s fine to use exact match keywords within anchor text, however it’s best not to seem spammy and always use the same anchor text all the time.

Internal links can be used to optimize the pages you’d like to get the most visibility. For example, it would beneficial to link anchor text inside a blog post to a service page mentioned in the article.

Internal Sitelink Tips:

  • Don’t use the same anchor text for two different pages
  • Internal links at the top of the page can increase time on site and decrease bounce rate which can both contribute to better search ranking
  • Install an HTML sitemap which can help with internal linking
  • Link strategically from the homepage
  • Avoid automated tools for internal linking

7. Canonical Tags

A Canonical tag is a used to let search engines know the specific URL to be used in the search results and prevents duplicate content issues.

Duplicate content is often caused unknowingly by web designers and can cause a host of SEO issues such as diluting a websites ranking ability. Using canonicalization helps control duplicate content.

Search engines may see your website in the following ways:

  • https://domain.com
  • https://www.domain.com
  • http://domain.com/index.php
  • https://domain.com/

Of course to most people they would all represent the same page but to search engines they can be treated as separate and unique pages.

To find out if the canonical tag has been set for your website, right click on your home page and select view source then search for rel=”canonical”. For this website you’ll see the canonical URL is set to the following:

WordPress uses the websites address as the default canonical URL. Any other variations of the domain will be redirected to the set canonical URL.

8. Schema.org Markup

Often called Schema or structured data, this semantic definition of tags (or microdata) allows you to improve the way search engines understand your website.

Schema was created in collaboration with Google, Bing, Yandex and Yahoo to help search engines understand content and provide improved search results.

Rich snippets use data from Schema to enhance search results. So rather than simply displaying a title and description, they may also include images, ratings and other data which can improve visibility and click-through-rates.

Schema Example:

To test your websites Schema, use the following Google Structured Data testing tool.

Structured data can be used to mark up different types of items including:

  • Products
  • Recipes
  • Organizations
  • People
  • Places
  • Events
  • and more!

Whether schema can affect search rankings is up for debate, however it can certainly make listings stand out and improve click-through-rate which by some SEO’s can improve search rankings.

Schema is certainly ignored by many SEO experts due to lack of technical expertise and often lacked by web designers due to lack of SEO knowledge.

If your website is developed in WordPress, there are several plugins available which allow adding Schema to individual pages easy.

Using Screaming Frog’s SEO Software for HTML & SEO Elements

Sceaming Frog Website Crawler

Screaming Frog is a handy tool for crawling your website and identifying HTML and SEO issues including:

  • Analyze Page Titles and Meta Data
  • Find Broken Links
  • Find Duplicate Content
  • Audit Redirects
  • and more!

If you’ve downloaded the software already, it’s easy to use. Simply enter your domain in the top search and hit the “start” button. After a few minutes it will provide results below into a table which can be exported as a CSV however table headings can be sorted using the software. The tabs at the top can be toggled to analyze select page elements along with a a right sidebar.

Final Thoughts

By implementing the following HTML elements on a website you can improve your websites user experience and search ranking.