Understanding how a page title, a title tag and the HTML code link together is important if you want to be able to debug or optimise your SEO. In this article we’ll give you a short introduction and show you exactly the HTML code that is behind those title tags.
What’s the importance of title tags for a website?
Your title tag is the first thing a potential visitor to your site will see in the search results. When someone searches on an engine like Google, your title will be the blue hyperlinked line of text. It’s also what gets displayed on the browser tab for your page.
As well as wanting to make a good impression to people searching for your services or content, Google places a lot of emphasis on title tags. It needs to be relevant to the content of the page and contain your keywords.
There’s a skill to writing title tags that we’re not going to cover here, but check out our comprehensive guide on the topic.
How do I code title tags in HTML?
Title tags are part of the HTML language which defines how a web page looks and, and is configured.
The title tag of your page will be coded like this:
<title> Your title here </title>Here’s an example and you can view these when you look at a website by right clicking on the text where you should see a View page source option.
When you’re working with HTML code, you need to make sure you open and close the tag with the less-than and more-than signs (< and >.) The second occurrence of the tag closes it with a preceding / slash. Forgetting to close the tag may corrupt the rest of your HTML code and text.
Adding a style such as bold or a font colour won’t have any effect, since it appears in places that have a standard format such as Google and browsers tabs.
Save styling details can be added to your H1 heading tags, which is usually the title of your page and from which the original title tag is derived. It’s the H1 title that will appear on your website for your users to see whereas the title tag is what’s seen on the search results.
Where in my code do I add a HTML title tag?
If you have a custom-built site or use a builder that allows you access to the source coding, you can manually add your HTML title tag. However, it shouldn’t be needed as most website systems will take care of it.
If you are writing or debugging your HTML, the <title> tag needs to be nested in the <head> section of your HTML, towards the top of the HTML code.
Final thoughts
For people who use common website builders such as WordPress, you won’t need to change or amend the HTML code for your title tag. If you do, there are other ways. Adding your title to the text box at the top of each page will do exactly what you need.
Custom-built sites that have their own code may require you to go in and add a title tag using HTML. Take care when editing your source code because it’s easy to make a mistake and break the structure of the HTML code which, in turn, will prevent your content from being shown.
