<a> tags can have the rel attribute applied to outbound links, that helps browsers and search engines understand the relationship your website has with the link.
The three most relevant values are:
- rel="nofollow" Tells search engines that they should not follow this link when crawling
- rel="sponsored" Marks as advertisement, paid backlinks, or other monetary gain
- rel="ugc" Marks the link as generated by a user (not the owner) of the website, commonly used for links in comment on blog posts, forums etc.
Generally speaking, you would mark links to external sites you don't fully endorse with nofollow, links where you stand to gain monetarily as sponsored, and have all links by users as ugc.
Links to sites that you fully trust, but don't gain money for linking to, are free to be without a rel attribute.
Note: You can apply multiple values to the rel attribute, such as rel="ugc nofollow".
Note: The attributes noopener and noreferrer can be used to prevent the website you link to from knowing where the link came from.
A link, or hyperlink, is a an element on your website, than when clicked or tapped, leads to another location. This location can be both on the same page, another page of your website, anywhere else on the internet or even a file or service.
Example:
<a href="https://northrook.com/glossary#link">link to the Glossary</a>
This code will create this link to the Glossary.
<meta> tags are elements of your HTML code that provide structured meta data and information about the page.
Some of this can be used by search engines, the "description" meta tag for instance will be used to fill the the text snippet in search results. You don't strictly speaking have to fill out a description tag, but it is highly recommended. Having an enticing description will improve your click-through rate, resulting in more conversions!
Note: Search engines limit how long of a text snippet they're willing to present. Google limits this at ~160 characters, or a pixel length of ~940px. Good SEO tools for WordPress (like SEOPress and Rank Math) will let you know if you exceed either.
Example:
<meta name="description" content="Northrook is delivering high-quality Web Design, Marketing, SEO and Hosting services to businesses, charities and beyond." />
The <title> tag is a HTML element that browsers and search engines use to determine the title of a given page.
You would typically be using a phrase built around one or more of your most valuable keywords, likely along with your brand or site name.
Example:
<title>Web Design, Ads, SEO Agency Southampton • Northrook</title>
Note: Most search engines, including Google and Bing, have a limit on how long of a title they're willing to display. This is typically around ~60 characters, or a pixel length of ~560px. Good SEO tools for WordPress (like SEOPress and Rank Math) will let you know if you exceed either.
Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
A style sheet language used for formatting and positioning the presentation of your pages markup language, most often HTML.
CSS is one of the three major cornerstone technologies of the internet, alongside HTML and JavaScript
Need more details? Read the Mozilla Developers resource on CSS here.
A link on your website, typically styled to attract the visitors eye, designed to further a specific action.
These actions commonly include; purchase intent, reading more about a key product or feature, sign-ups to product feeds or newsletters.
Basically the main thing you would like your visitors to click on.
Call to Action elements should be tracked with your analytics tool of choice, so you can determine how successful it is.
A way to consolidate and canonicalise your website addresses.
If you have a page that can be reached by multiple addresses, adding a canonical tag will allow you to not only inform browsers which one is the "real" one, but also allows you to avoid duplicate content penalties.
There are many ways to enforce canonicalisation, but the simplest is with a <link> tag.
Example:
<link rel="canonical" href="https://northrook.com/" />
In this example, if visiting the site via www.northrook.com, it would inform the browser that we intend only to use the non-www version, northrook.com.
Note: There are many ways to help enforce this, from server-side actions to DNS configuration.
If you'd like to learn more in detail, we recommend reading Google Search Central's in depth article on Consolidating duplicate URLs.
Content within an <a> tag, most often text or an image.
For SEO, it is important to have descriptive anchor content. Non-descriptive text like "Read more.." should be avoided where possible, unless it in semantic context, such as within an <article> tag.
Anchor text is typically styled differently than body text, as an example, we use a different colour and bolder font, along with an underline.
Styling can be applied with CSS using pseudo-classes, the most common used are:
- a:hover for mouse-over effects
- a:visited for links that have already been visited
- a:active when a click or tap is held
- a:focus is not specific to a tags, but can be used to help keyboard navigation
Example:
<a href="https://northrook.com">This is anchor content</a>
Note: When using an image within an a tag, if the visitor is using a screen reader, or if for any reason the image cannot be loaded, the alt text will be used. Search crawlers like Googlebot will also use the alt text.
A HTML attribute used to provide an alternative text for something, often images.
For SEO, it is critically important that as many images as possible (and relevant) have alt texts. Search engines cannot visually see your images, so they rely entirely on your alt text to figure out what the image is about.
For accessibility, it is equally important that all relevant images have descriptive texts. This helps screen readers inform visitors who might not be able to see your image, what an image is about.
Example:
<img src="image.png" alt="A car parked next to a bus stop.">
Tips:
- You are free to write what you want, as long as it is relevant.
- Do not add keywords just to boost your SEO, search engines will see right through it.
- With punctuation, you can end with a period, or leave it open, either works.
- Note that the alt text will be displayed if the image cannot be displayed for some reason, such as the image not being available, or if the visitor is using a text-only screen reader.
Absolute URLs are internet addresses written as their full path to find a web page, image or anything else that has a path. This is opposed to a relative URL.
Relative URLs can only be used for internal linking, when creating a link to something on the same domain. Absolute links are always used when linking between different websites.
Example:
The absolute URL to this glossary entry is:
https://northrook.com/glossary/#absolute-url
As long as we're on the same domain, we can use this relative URL:
/glossary/#absolute-url