SEO Essentials for Front-End Developers

Posted on: May 14, 2018 by Rajeev Edmonds

More than often, search engine optimization is one of the neglected domains, front-end developers may not pay that much attention when building a custom design for a business website. I personally think that core SEO work is part of front-end development and one must take it into account while building a custom design.

Let's see what are some of the best practices for implementing these essential SEO features while designing a website.

White color dices with SEO engraved on them

Broadly, we can divide these SEO essentials into three broad categories.

Visibility & accessibility - Ensures easy and correct access to website content both for humans and search engines.
Core metadata (on-page) - Ensures web pages include the essential data search engines require to analyze and rank a website.
Website speed - One of the factors search engines use to rank websites front-end developers must pay attention to.

Visibility & Accessibility

No matter how classy the design is, a website is created poorly if parts of it can't be accessed or interpreted easily by search engines and visitors. A thorough audit and test for the same are highly recommended before a website should be opened for the outside world.

Following things must be configured and checked to ensure good visibility & accessibility of the website.

Sitemap - Whether you're building a static website from scratch or using a popular content management system, the sitemap is one of the important assets, search engines look for to correctly index a website. Do include it in your final website health checklist.

Robots.txt - An incorrect directive in this file and the entire website can be a mess for crawlers and indexing bots. Cross-check if the robots.txt file is up-to-date and includes the correct directives for the crawlers.

Orphan links - If you're building a large portal or a website, it is possible that some of the web pages are completely inaccessible both through website navigation and through crawling software. Such web pages are categorized as orphan pages as they're not visible to anybody unless one has direct access to the URL of that page.

Once the site design is finished, do take the pain to test that each and every page (except protected content) is accessible to the outside world without any restriction.

Redirection - Do take care of proper redirection of permanently shifted content (301) and other various types of common redirects to ensure the visitors and crawlers do not get lost while accessing the content. Here, I may also include the configuration of the 404 page for visitors landing through a broken link.

Canonicalization - If you've not handled canonicalization, your client's website may be seen as hosting duplicate content which may hurt their search engine presence. You must ensure that the site's content accessible through different URLs is appropriately interpreted to ensure it is identified as a distinct piece of content instead of being counted as a copy of the same content.

Meta Data (On-Page)

This is the core of search engine optimization that adds essential metadata giving structure and shape to the content from an SEO perspective. That's how search engines are able to extract the right information vital to understanding website data.

Let's start with the basics and see the important SEO stuff one needs to include in a typical web page.

Core/Basic meta tags - We'll start with the most important ones. Below are some of the vital meta tags which should be present in the <head> section of a web page. Keyword meta tag is no more relevant as it is ignored by all major search engines.

<title>My Awesome Site</title>
<meta name="description" content="Just a demo website" />
<meta name='robots' content='index, follow' />

Social meta tags - The second set of important meta tags is associated with social media platforms that gobble up your content, viz., Facebook and Twitter. Here's a sample of Facebook's Open Graph meta tags.

<!-- Facebook Open Graph meta tags -->
<meta content='en_US' property='og:locale'/>
<meta content='Web page canonical URL' property='og:url'/>
<meta content='Website name' property='og:site_name'/>
<meta content='Website Facebook page URL' property='article:publisher'/>
<meta content='Web page description' property='og:description'/>
<meta content='website' property='og:type'/>
<meta content='Web page title' property='og:title'/>  
<meta content='Web page image URL' property='og:image'/>  
<meta content='article' property='og:type'/>

And, here's a sample of common Twitter summary card meta tags.

<!-- Twitter summary card meta tags -->
<meta name='twitter:card' content='summary'>
<meta name='twitter:site' content='@rajeevedmonds'>
<meta name='twitter:creator' content='@rajeevedmonds'>
<meta name='twitter:title' content='Page title'>
<meta name='twitter:description' content='Page description'>
<meta name='twitter:image' content='Absolute URL for the image'>

Rich snippets/Schema data - And last but not least, is the structured data (schema) used within HTML markup to help search engines interpret the content sections in an easy way. It also helps in facilitating the structuring of rich snippets displayed within search results.

One of the widely used schema data is on food blogs for recipes. It allows search engines to easily grab the data associated with the recipe which is used while displaying rich snippets of the recipes. Following is a sample HTML markup for the recipe structured schema data.

<!-- Recipe scheme markup -->
    <div itemscope itemtype='http://schema.org/Recipe'>
          <span itemprop='name'>Recipe Name/Title</span>
          By <span itemprop='author'>Author Name</span>,
          <meta itemprop='datePublished' content='2010-05-08'>May 8, 2010
          <img itemprop='image' src='Recipe image URL' alt='Image description' />
          <span itemprop='description'>Recipe description in about 150 or 160 words.</span>
          Prep Time: <meta itemprop='prepTime' content='PT15M'>15 minutes
          Cook time: <meta itemprop='cookTime' content='PT1H'>1 hour
          Yield: <span itemprop='recipeYield'>1 cup</span>
          <div itemprop='nutrition' itemscope itemtype='http://schema.org/NutritionInformation'>
            Nutrition facts:
            <span itemprop='calories'>80 calories</span>,
            <span itemprop='fatContent'>12 grams fat</span>
          </div>
          Ingredients:
          - <span itemprop='recipeIngredient'>Ingredient 1</span>
          - <span itemprop='recipeIngredient'>Ingredient 2</span>
          - <span itemprop='recipeIngredient'>Ingredient 3</span>
          
          Instructions:
          <span itemprop='recipeInstructions'>
          Complete recipe instructions either in paragraph form on in the form of a list.
          </span>      
    </div>

And, here's a sample recipe rich-snippet appearance within search results which attracts more visitors.

Search result rich snippets with support of recipe schema

There are several other types of schema data for posts, events, reviews, and other types of content one can include within the site's markup for better interpretation of important sections by the search engines.

Speed & Performance

Search engines no longer love sluggish websites which take ages to load. To a greater extent, for a simple website, it's the front-end developer's responsibility to ensure a custom design is blazing fast. I'll also add the responsiveness of the design in this section as it is now one of the important factors search engines consider to rank your website for mobile search results.

The two best tools to find the bottlenecks and to ensure your website doesn't open like a drunk sloth are WebPagetest and Google PageSpeed Insights.

Learn about critical rendering path, render-blocking assets, minified assets, caching, and similar performance-related techniques to ensure you deliver a fast custom design to your client. Working on these features may involve refactoring or modifying the existing code altogether. Your goal should be to lower the above-the-fold rendering time to the minimum.

One can also use lazy loading techniques for different web assets to counter the latency involved in opening heavy web pages.

Miscellaneous Guidelines

And, now we'll cover some of the points not discussed in the previous sections. They are equally important and augment the overall SEO weight of a website. So here we go.

rel='nofollow' attribute - It is an important link attribute search engines evaluate every time they encounter one while crawling and indexing the pages. Use it for links you don't want to pass on the link juice. One can also educate the client about the same.
Pagination link attributes - For multi-page content, use the rel='prev' and rel='next' link attributes to indicate the same to search engines crawlers.
Anchor texts - Educate your client to avoid creating loads of keyword-rich anchor texts.
URL structure - Use hyphen '-' to link characters within URLs and try to keep it short with a maximum of one keyword. Again, one must update the client about it.

So that wraps up the list of the most common and essentials SEO features, a front-end developer must implement on the site he is designing.

seo html