Developers may want clean codes or to use hashes to point to subsections of a page. But search engines have the last say.
After all, if Google can’t crawl the links of your JS-powered site. Then Googlebot won’t understand what your content is about.
Here are a couple of tips AOK Marketing has picked up when applying links for SEO in JS:
Use HTML <a> Tag
Such a straightforward method of inserting links is the recommended format for JS powered sites because it reduces the likelihood of making mistakes. Which, when it comes to SEO, can mean the difference between 2 and 2k views.
While we’re on the subject of simplicity in links, it’s also a good idea to add a bit of JS to a standard connection.
It’ll help increase functionality. But only if you meet both the technical SEO requirements and the JS best practices.
Always Include the Href Attribute
How, you ask?
Reduce Fragment Identifiers
In the past, JS-based sites used fragment identifiers in URLs. But Google’s Martin Splitt cautions developers and technical SEOists from using hashes (#) or hashbangs (#!). Largely because hashes point to a specific place on a page and not an entirely different page. And because of that crawlers tend to ignore fragment identifiers.
If your application consists of a single-page created using multiple hashes and hashbangs. Google won’t crawl the links on your page.
A better alternative is to use pushState History API. Where site navigation is based on users’ History API- which is quite similar to the web browsing history.
Such that each time the site visitor gets to a new part of your page, the URL automatically updates. What we in the SEO world call an infinite scroll.
Check out this great example from Google’s John Mueller on how pushState History API works.
Avoid Use of Buttons
SEOs and developers alike love using buttons. It’s an easy and convenient way not only to link pages but also help call-to-actions stand out. But for JS based sites, use of buttons hurts more than it helps.
So the next time you’re thinking of adding a button, first answer ‘yes’ to the below questions:
- Does the link point to something on the current page?
- Users won’t be redirected to content that wasn’t there before?
- Are your links unique and not simulated by other programming languages like HTML?
Ensuring the above conditions are met before inserting a button prevents breaking of built in accessibility features. Which is a bad idea especially if you want your pages to appear on Google’s organic searches.
Get Semantic Link Mark-up Right
In a nutshell, Google recommends you use semantic HTML mark-up to point a link to a correct URL. To understand what a correct URL means, you must first look at the attributes of a basic link.
The first characteristic is the protocol. Which in layman language refers to the language used to access the URL, for instance HTTP or HTTPS. Then we have the host- which for this site is aokmarketing.com.
There’s also the path toward a specific content of the host. It would look something like this: aokmarketing.com/learningcenter. And the option to use fragment identifiers to point to a specific section of a page. For example, aokmarketing.com/learningcenter#2.
Given that fragment identifiers are optional and Google doesn’t recommend using them. Creating a site free of lone hashes and hashbangs increases the likelihood that crawlers ‘see’ all your content. And as a result, your pages will be indexed and appear in search results.
Transfer Metadata to The Search Engine Bot
You’ll not only improve user experience but also provide relevant information to interested buyers. Seamlessly guiding readers through your sales funnel, turning site visitors into paying customers and improving your website’s SEO return on investment.