How to Apply JavaScript in Your Links for SEO
Not all links are created equally, that’s the number one thing you should know when it comes to applying JavaScript in your links for SEO.
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.
Reducing your chances of ranking well for relevant search queries. Which makes knowing how to insert links for JavaScript based pages correctly all the more important.
Here are a couple of tips AOK Marketing has picked up when applying links for SEO in JS:
Use HTML <a> Tag
When it comes to applying links to JavaScript, the easiest way is to add the HTML <a> tag. And not change the destination URL in the href attribute.
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
The thing about JavaScript-powered sites is your links will only work if your JS code also works. So while developers may not like how disorganized or unappealing the code looks. Removing the href attribute or cleaning the code completely can make your links fragile and harm your site’s SEO.
How, you ask?
What few people know is that crawlers don’t handle JavaScript. In fact, without the href attribute, crawlers wouldn’t know which content to access or even where links are pointing to and coming from. Which means users also won’t have access to the JavaScript parts of your site.
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
Here’s another tip when applying JavaScript in your links for SEO that brings us back to the basics- the transfer of metadata to the bot. In fact, always remember- most of the technical SEO requirements that apply to HTML sites are also relevant on JS powered pages.
Start by putting your social tags, meta information, and title in your HTML code such that all search engines (not just Google) can access your pages. Include a robot.txt file to allow Googlebot to crawl JavaScript parts of your site. And if down the road you plan on making changes to your site, it’s a good idea to keep your “lastmod” attribute current in your XML sitemap.
Plus, since JavaScript codes are rendered into preDOM and postDOM versions. Giving rise to two files that may contradict each other and result in cloaking of canonical tags or pagination. Creating a unified version of both files should solve this problem.
JavaScript opens up a world of opportunity for customizing links and implementing SEO best practices- but only when implemented correctly. Following the tips listed in this article can help you get ahead of issues that may impact your traffic and revenue.
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.
About The Author
