SEO Fundamentals Every Web Designer Should Know
Today I will share 5 of the most fundamental Search Engine Optimisation (SEO) techniques that I was often doing wrong when I was a freelance web designer and Front-End Developer.
Get ready to laugh at and hopefully learn from some of my embarrassing past mistakes.
My Background In The Web
I started out in the web industry as a freelance front-end developer and designer. I specialised in designing custom websites in photoshop and then coding them into living, breathing websites using my modest front-end development stack of html, css and javascript.
At this stage of my career, I didn’t know a whole lot about Search Engine Optimisation (SEO) and honestly, I didn’t have a great deal of respect for the process or the techniques.
I must confess that I had been known to pay the $99 setup fee to my web hosting provider who would submit the client websites that I had built to all of the major (and minor) search engines, all because I was ignorant and knew very little about the SEO process.
Fast Forward 8 Years To Today
I work here at e-CBD, a full service digital marketing agency based on the Gold Coast.
I am now a front-end developer that has evolved into an SEO specialist and I have learned an incredible amount about the process of performing SEO, tracking results and creating SEO reports.
I look back to my freelancer days and cringe at some of the bad SEO practices I was unknowingly performing during my front-end development process.
Here are what I believe to be the 5 most important SEO tips and techniques that I wish I knew when I was starting out as a designer and front-end developer.
The Critical Importance Of Page Titles
Page titles are powerful.
So powerful in fact, that a page title can more or less determine what types of keywords and search phrases your page will rank for in organic search results.
Title Tag Basics
A page title is a HTML element located in the <head> section of a webpage and it looks something like this:
<title>The Name Of Your Page | Your Website</title>
The title tag of a web page is meant to be an accurate, succinct and unique representation of the content on a page.
Title tags are displayed on the search engine results page (SERP) as the linked headline when that page shows up as a search result and are important for the usability (think web browsers), SEO and social sharing of a page.
Basically, a page title is pretty big deal and it is crucial that you get the page title structure right.
The Optimum Title Tag Structure
Here are some examples of how you can structure your title tags.
Title Structure
An effective title tag format for a basic page goes something like this:
Primary Keyword/Phrase | Brand/Website Name
If you have a secondary keyword you want to target:
Primary Keyword/Phrase: Secondary Keyword/Phrase | Brand/Website Name
If you are developing using a CMS, it should be fairly easy to set up a title tag template that looks like this:
[Page Title/Name] | [Site Name]
Pro Tip: Use the pipe | as your keyword/phrase separator because it takes up less pixel space than a hyphen.
Show Title Tags Extra Love: Keep Them Unique
Avoid using duplicate title tags across the pages on your site. There should not be any 2 pages that have content so similar that the page titles are the same. If this happens to you, combine those pages into a single page.
Stressful Tip: Much like a HTML elements ID, page titles MUST be unique.
Mind The Title Tag’s Length
As an example, Google usually displays the first 50-60 characters of a title tag, however there is no exact length limit. Because Google measures the width of the tag in pixels and currently truncates the title at 600px wide.
You can use a SERP length checker to correctly optimise your page titles for length.
For example: https://totheweb.com/learning_center/tool-test-google-title-meta-description-lengths/
Use Your Keywords/Key Phrases Sparingly
Be careful not to overdo your keywords/phrases in the title tag. It is no use stuffing the title full of keywords if it doesn’t make any sense when you read it.
For example:
Cheap Item, Low Price Item, Affordable Item, Low Cost Item | Site Name
Avoid titles with repeated keywords or repeated variants of the same phrase. Search engines understand that different people may search using slightly different phrases so it is unnecessary to write every version of a keyword in a page title.
Pro Tip: Try to place the most important and relevant keywords first in your page title if possible.
Think Of The User When Constructing Page Titles
Write your page titles with the end user in mind, not the search engine. Search engines like Google are sophisticated and are able to interpret content on page much like a human.
This means that your page titles should accurately represent the content on the page whilst sounding natural and remaining readable.
Meta Descriptions Matter
A meta description is a concise summary of the content of the page and is practically the little brother of the title tag.
Meta Description Basics
The description tag also resides in theof your HTML document like so:
<meta name=”description” content=”Your meta description content here”>
Your meta description is what will usually show up in a SERP (unless Google chose to use page content instead) as the snippet of text underneath your page title.
For example:
Meta Description Discourse
Does Not “Directly” Impact SEO
It is common knowledge that meta descriptions do not directly impact the search engine rankings of a website from a technical point of view.
However, it is also common knowledge among the SEO crowd that meta descriptions DO influence the click through rate (CTR) of a site when it appears on a search engine results page…and if a page is getting more click throughs than the results around it, it is more likely to be promoted up the rankings for the search query that was used.
Try to write compelling, enthralling and attractive meta descriptions that make the user want to click through to your client’s website.
Pro Tip: Descriptions are your best chance to influence the actions of the user. Try to keep your meta descriptions clear and concise. These should read naturally and intelligently in a completely non spammy way.
Length Can Vary
Google truncates meta descriptions that are more than 300 characters in length, so the optimum length of a meta description is anywhere from 50 – 300 characters depending on the type of page and the content on the page.
Again, you can use a tool to measure the length of your proposed meta descriptions and get an idea of how they would look
Try this: https://totheweb.com/learning_center/tool-test-google-title-meta-description-lengths/
Avoid Duplicate Meta Descriptions Across Your Site
Just like your title tags, you should take the time to carefully craft positive and unique meta descriptions for each and every page.
You won’t be penalised for having duplicate descriptions, however it does negatively impact on the user experience when it comes to displaying search engine results.
Leave Out “Double Quotation Marks”
Google will cut off a meta description from where the opening double quotation mark was encountered.
If you absolutely must use a double quotation mark in your meta description, use a HTML encoded double quote. For example:
<meta name=”description” content=”This sentence needs to be " double quoted " in a search engine friendly way.”>
Build Internal Links Damn it!
Internal links are very important for both search engines and users. If you are developing, making sure that you are creating an SEO friendly website architecture is paramount.
An SEO Friendly Site Architecture
Search engines need to have access to a link structure that is crawlable. A crawlable link structure has internal links connecting each and every page together.
This way, if a search engine crawler followed every link on the website, it would eventually land on every page and index it accordingly.
If you have stray or ‘orphan’ pages that are not linked from the main website or one of it’s pages in any way, search engines do not have a natural way to crawl and index these stray pages.
The optimal structure for a website looks like a multi-level marketing scheme except that it actually works. For example:
Don’t Tank Your Anchor Text
This brings us to anchor text. Anchor text is the visible portion of a text link that the user will see and interact with.
<a href=”link.html”>This is the anchor text</a>
Anchor text is important because it should be used to describe the page that it is linking toward. I cannot stress how much better you can make your internal link structure by using descriptive anchor text.
Anchor Text Examples
Example of bad anchor text
We also stock a range of industrial sized widgets for use around the workplace, <a href=”link.html”>click here</a> to view our range.
Example of good anchor text
We also stock a range of <a href=”link.html”>industrial sized widgets</> for use around the workplace.
Pro Tip: When crafting your anchor text you can include a relevant keyword, however you don’t want it to be spammy. A relevant keyword should naturally fit into your anchor text so that it is succinct, readable and descriptive of the target page.
Things To Avoid When It Comes To Anchor Text
Problem: Pages hidden behind a search function.
Why is this a problem: Search engine crawlers do not use site search functions.
Solution: By all means keep your search function for humans, but make sure that you link to and from these pages in other ways as well.
Problem: Links in Un-Parseable Javascript
Why is this a problem: These types of links may be uncrawlable or undervalued by search engines.
Solution: Avoid this practice if you can and stick to using standard HTML links.
Problem: Links on pages that container hundreds or thousands of links.
Why is this a problem: Search engines have an approximate crawl limit of 150 links and may stop crawling links on that page after this limit is reached.
Solution: Limit the number of links on any given page to 150 otherwise you may lose the ability to have additional pages crawled by a search engine.
Problem: Links in Java or Flash
Why is this a problem: Inaccessible to search engines.
Solution: Avoid keeping important links inside these technologies. Ensure you have other supporting internal links to important pages.
You Don’t Need To Be A Detective To Find Internal Linking Opportunities
Once you have put all the content into the client’s website, read back over each page and you will start to see opportunities to include internal links within the page content that link out to other relevant pages of the website.
Pro Tip: Don’t forget about blog posts, these are a goldmine for creating relevant internal links.
Integrating Google Analytics and Google Search Console
Google Analytics & Google Search Console Basics
It is essential to include Google Analytics (GA) and Google Search Console (formerly known as Webmaster Tools) in every site that you develop.
Google Analytics
GA is a free web service used to measure statistics and provide analytical tools for SEO.
Installation is simple, anyone with a Google account can create a Google Analytics account and create a profile for their website.
From there, Google will generate a chunk of Javascript with your sites tracking code that you will place on every page that you want to track.
I would advise you to simply place it in the header template of your website inside the <head> section across all pages.
GA is an SEO specialist’s bread and butter and there is simply so much that you can do and measure with GA that it would take a very long time to talk about all the benefits.
A few things you can do with GA include:
Data visualisation tools including a dashboard, scorecards and motion charts, which display changes in data over time.
- Segmentation for analysis of subsets, such as conversions.
- Custom reports.
- Email-based sharing and communication.
- Integration with other Google products, such as AdWords, Public Data Explorer and Website Optimizer.
Your role with Google Analytics as a Developer
As a web designer or front-end developer, all that you need to know how to do at this stage is set up a Google analytics account correctly and include the tracking code on the website.
Here is a handy video on how to set up GA: https://www.youtube.com/watch?v=mXcQ7rVn3ro
This will greatly help any SEO person who needs to work on the website in the future.
Google Search Console
Search console is a free web service provided by Google that allows webmasters to check the indexing status and optimise the visibility of a website.
How to set up Search Console: https://www.youtube.com/watch?v=UdMkesQ_PDo
What You Can Do With Search Console
Here is a quick summary of the some of the information available through Search Console.
View search query data
This section shows the keywords/phrases that users typed into Google that resulted in a page on your website showing up in the search results. It also tells you how many impressions (views) your listing got in the results and how many people clicked on your website
Crawl error reporting
This section shows any errors that the Google crawlers encountered when trying to index your website. This includes inaccessible pages, missing pages, server errors and any other issues that prevented Google from crawling your website.
Links
You can view where your websites internal links and backlinks (external links to your site from another website) come from and the pages that they are linking to.
Sitemaps
Displays a list of sitemaps that you have submitted to Google for indexing. It also shows how many pages on your website have been submitted and how many are currently indexed.
It goes without saying that Search Console is an invaluable instrument in the SEO game and it is a must have for every website.
Your role with Search Console as a Developer
It is essential that you set up Search Console as part of your website development services.
If a website is going to have any chance of achieving and maintaining rankings in Google, you need to integrate Google Search Console.
The Power Of The Sitemap
Ever wondered why it has been 2 weeks since launch and your client’s website is still not appearing in Google search results?
Chances are you probably haven’t submitted a sitemap to Google and requested they index your newly developed website.
What is a sitemap?
A sitemap is an xml document that is used to provide search engines with a list of links to each of the pages on your website that are available for crawling and indexing.
Google has stated that a sitemap can improve the crawling of your website, especially if you have a new website.
How to create a sitemap
First off, we need to create a sitemap.
WordPress users
Wordpress has a few popular SEO plugins such as All In One SEO Pack or Yoast SEO that can be used to generate an XML sitemap and update itself automatically whenever content is changed on the site.
How to generate a sitemap in Yoast SEO plugin: https://www.youtube.com/watch?v=mfdzPQwlqQs
How to generate a sitemap using All In One SEO Pack plugin: https://www.youtube.com/watch?v=2dnCV1LnANs
Everyone else
Whether your site is flat HTML or in another Content Management System, we can use an online tool to generate a Google compliant xml sitemap.
For example, try this website: https://www.xml-sitemaps.com/
Once you have generated your sitemap, upload the file via FTP to the public_html folder of your website.
How to submit a sitemap to Google
Assuming you have set up Google Search Console, submitting a sitemap is relatively simple.
- You will need to navigate to the sitemaps area by clicking on ‘Crawl’ in the left hand navigation menu and then selecting ‘Sitemaps’.
- Click on the red Add/Test Sitemap button in the top right corner.
- Enter the name of the sitemap file, it should be something like ‘sitemap_index.xml’ or ‘sitemap.xml’.
- Click the test button.
- Once Google has confirmed that the test worked correctly, click the close test button.
- Now click add/test sitemap again and this time instead of testing the sitemap, click to submit it.
That’s it! You have successfully submitted the sitemap, it may take several days for Google to begin indexing the site.
Providing that your site architecture is sound, all of the pages on your website should be included in the sitemap file and will be indexed accordingly by Google.
Wrap Up
If you made it all the way to the end of this article, I hope you found some of these SEO fundamentals informative and helpful.
If you have any SEO related questions or you need a local, Gold Coast SEO company, you can contact e-CBD on (07) 5531 3810 or send us a message online.
