Google explains how to ensure links work properly with JavaScript in the first episode of the new Lightning Talks series.
Google Lightning Talks are short versions of presentations that might have been shared at Google Webmaster Conferences around the world.
Given that in-person events are cancelled for the foreseeable future, Google is adapting its conference content for the web.
Videos in the Google Lightning Talks series are scheduled to be published throughout the year.
Google’s Martin Splitt on Links & JavaScript
Splitt dedicates the first installment of Lightning Talks to discussing “everyone’s favorite” topic: links.
More specifically – links in JavaScript web apps.
Splitt goes over the important role links play for both users and search engine crawlers.
He also lists the do’s and don’ts of combining links with JavaScript functionality.
Links Matter to Humans and Bots
Links serve the obvious purpose of letting users navigate between pieces of content.
But site owners must be mindful of the role links play for bots and search engines as well.
First and foremost – links allow crawlers to find other pages of a website.
Crawlers discover and index other pages of a website by following links from one page to another.
By following links, the crawler gains an understanding of site structure and information architecture.
This is helpful for understanding what pages might be relevant for a given topic.
Related: A Hands-On Introduction to Modern JavaScript for SEOs
Creating Links With JavaScript – Do’s and Don’ts
Creating a link is not as straightforward as you might think, cautions Martin Splitt.
That’s especially true when it comes to adding JavaScript functionality to a link.
JavaScript allows sites to customize links in different ways, but doing so may render the link unusable to crawlers.
Here’s what Splitt recommends.
Do: Keep it Straightforward
The most straightforward way to put a link on a site is to use an ahref tag.
It’s also fine to upgrade standard links with JavaScript functionality, as long as some conditions are still met.
Examples of straightforward linksDon’t: Leave out the ahref attribute
When adding JavaScript functionality to a link, you might consider leaving out the ahref attribute
“That’s not a good idea,” Splitt says.
The reason for that is because the link will only work when the JavaScript works properly.
Without an ahref attribute, crawlers will not be able to determine where a link goes to because the crawler doesn’t run JavaScript.
Don’t: Use Psuedo URLs
It also doesn’t help to add an ahref attribute without a useful URL, or with a “pseudo URL” like in the example below:
The result is the same as a link without an ahref attribute, which means it’s not a good idea.
Don’t: Use Buttons
Using a button may seem like a viable option for adding a link to a page, but that’s not a good idea either.
The rule of thumb is – if a link triggers something to happen on the current page it should probably be a button.
On the other hand, if a link takes a user to another piece of content that wasn’t on the page before, then it should be a standard link.
Don’t: Rely on click handlers
Site owners also shouldn’t simulate links by using other HTML elements and using a click handler in JavaScript, for example.
This breaks the built-in accessibility features and isn’t a good idea.
Do: Use Semantic HTML
The bottom line to all of this is – use semantic HTML markup and point your link to a proper URL.
What’s a proper URL? That’s explained in the next section.
Using “Proper” URLs
These URLs are typical examples of what is considered a “proper URL”:
Those are proper URLs because they contain the following attributes:
- A protocol
- A host
- A path to a specific piece of content
- A fragment identifier (optional)
Related: SEO & JavaScript: The Good, the Bad & the Uncertainty
Beware of Fragment Identifiers
Given that fragment identifiers are optional, and point to locations within the same piece of content, crawlers ignore them.
That’s especially important to note if you build a single page application with links full of fragment identifiers.
Crawlers will not follow the links, so they will not be able to understand the web app.
In Summary
Here are your key takeaways from the first installment of Google Lightning Talks:
- Use proper link markup.
- Do not use fragments to load different content in single page apps.
- Build websites that work well with JavaScript and the links will be found.
FAQ
What mistakes should be avoided when creating JavaScript links?
- Don’t leave out the ahref attribute.
- Don’t use psuedo URLs.
- Don’t rely on click handlers.
- Don’t use buttons.
Does Google crawl fragment identifiers?
Given that fragment identifiers ( href=”#fragment-identifier” ) are optional, and point to locations within the same piece of content, crawlers ignore them.
