Web developers should have a good grounding of ‘On-Page SEO’, i.e. how the technical structure of a web page, and some relatively simple procedures can improve a web page’s search ranking and visibility.
Search Engine Optimisation (SEO) covers three main areas:
- Your site’s technical structure and performance — what we’ll discuss in this article
- Content and keywords (i.e. readability and relevance of your text content)
- Backlinks (links to your site form other websites)
Below we are going to outline the fundamentals of the first of those factors: ensuring as a web developer your site is optimised for Search Engines Results Pages (SERPs), which will help increase a site’s search engine ranking and visibility.
1. HTML Structure
Title and Description tags.
Page title and description tags are placed within the <head> section of a web page. The <title> tag is one of the most important on-page ranking factors and should consist of up to 60 characters of text that best describes the content of the page. The <description> tag should contain up to 300 characters.
HTML
<head>
<title>Design, Development and Marketing News</title>
<description>Take a look through the latest articles and tutorials covering web development, design and marketing.</description>
</head>
Although the <description> tag doesn’t work as a stand-alone ranking factor, having a visible site description below the title on search engine results pages will increase the click through rate to your site.
Note: The character limits are for readability because search engines cut off text at a certain length. Although you won’t be penalised for going over these limits it will affect the readability of the snippet that shows on the search engine results page.
Heading Tags
Your website should have a well-structured heading tag hierarchy. This should consist of:
- A single <h1> heading and the use of other heading tags should follow in a logical order.
- Avoid skipping heading levels, i.e. jumping from <h2> to <h4> tags.
- Keywords used in the <h1> tag should also be used in the body content of your site.
A good heading hierarchy is also required for site accessibility and assistive technologies.
An example of a well structured heading hierarchy:
HTML
<h1> What this page is about </h1>
<h2> A Topic Heading </h2>
<!-- content -->
<h3> A Topic Sub-heading </h3>
<!-- content -->
<h2> Another Topic Heading </h2>
<!-- content -->
Image Markup
The optimisation of images is covered further on in this article, but you must also ensure images are marked up correctly. All images must have an ‘alt’ attribute which provides information on the content of the images. Images marked up incorrectly will not appear in search engine image results.
HTML
<img src="./building.jpg" alt="large building in a city centre">
Links / Anchor Tags
Anchor <a> tags should have a ‘title’ attribute. This is short piece of text that is relevant to the link. Avoid just duplicating the link text where possible.
The title attribute should be descriptive for the user and will show when a user hovers over a link. Link attributes can increase click through to other pages on your site.
HTML
<a href="./contact.html" title="View our contact details">Contact Us</a>
2. Optimisation
CSS and JavaScript
As a website developer you should ensure that code on the websites you build is minified. Google does place emphasis on the minification of CSS and JavaScript on your site. If you aren’t doing this with build tools you can use a site such as https://www.minifier.org/ which minifies both CSS and JavaScript.
Image Files
Images can take up a large amount of kilobytes on your site causing a performance bottleneck, which can ultimately lead to the website taking an SEO hit.
Tools such as Squoosh by Google, allow you to optimise images whilst also being able to view the image during optimisation, so you can reduce the file size, but still retain a visually high quality image.
3. Use GZIP Compression
GZIP compression is the web server equivalent to file zipping on your computer and can produce significant file size reduction and performance improvements.
To manually GZIP files on an Apache web server you can add the following code to the bottom of your .htaccess file which sits in the root folder of your website.
To view a .htaccess file you may have to ‘show invisible files’ in your FTP application (Cyberduck, Filezilla etc) or web hosting provider’s file manager.
Apache Configuration
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
4. Leverage Browser Caching
In addition to the GZIP code we added to our .htaccess file above, we can also leverage browser caching. This tells a web browser which files to cache and how long for, and is one of the performance parameters Google uses when judging site performance.
Content management systems such as WordPress do have plugins for caching, but doing it manually does give you more fine-tuned control.
Apache Configuration
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 week"
ExpiresByType text/html "access 1 week"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 week"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 7 days"
</IfModule>
In the code above, files that are likely to have a new file name if changed on a website you are developing (such as image files) are cached for a year, files that are more likely to be amended are given a shorter caching period (a week).
5. Use an XML Site Map
Although a sitemap isn’t a ranking factor in itself, it will improve the speed at which all of the pages on your site get crawled by search engines and the visibility of these pages. It can also contribute to the readability of your site’s snippet on a search engine results page, which will have an effect on your click through rate.
You can create an XML sitemap with tools such as https://www.xml-sitemaps.com
A sitemap should be uploaded into the root folder of your website. If using a content management system such as WordPress, most SEO plugins have the option of creating a site map for your site.
The URL to your sitemap should then be added to your Google Search Console and Bing Webmaster accounts.
6. Structured Data /Schema.org
Structured data allows search engines to better understand the content on your site and improves the presentation of content on search engine results pages.
The most popular type of structured data in use is provided by Schema.org. This provides information to browsers via the JSON-LD syntax. By adding schema mark up you can have assets such as images show in the snippet that a search engine returns.
You can ‘inline’ the structured data or use the JSON-LD syntax inside <script> tags. For generic information about your site (such as in the example below), you only need to include this at the bottom of the home page of your website.
In the following example we have used a script tag. You will always state the context, which will be “@context”: “https://schema.org”. You then use what are called vocabularies to add information about the site or a particular page. Vocabularies always start with the @ symbol.
JSON-LD
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "organization",
"name": "Example Ltd",
"url": "https://example.com",
"email": "hello@example.com",
"logo": "https://example.com/img/logo.jpg",
"telephone": "020 777 77777",
"address": {
"@type": "PostalAddress",
"name": "Example Ltd",
"StreetAddress": "9 Example Street",
"AddressLocality": "London",
"AddressCountry": "GB",
"PostalCode": "EC1 111"
}
}
</script>
To learn more about Microdata and JSON-LD visit Schema.org
Summary
In summary the six things a developer can do from a technical point of view to increase the visibility and ranking of web pages are:
- Use Title and Description tags and a good hierarchical and semantic HTML structure
- Optimise your files and images
- Use GZIP compression
- Leverage Browser Caching
- Use an XML sitemap
- Include structured data
