In the first episode of the new script, Google explains how to make sure your links work properly in JavaScript. lightning talk series.
Google Lightning Talks are short versions of presentations shared at Google Webmaster Conferences around the world.
Given that in-person events are canceled for the foreseeable future, Google is adapting conference content to the web.
Videos from the Google Lightning Talk series will be available throughout the year.
Google’s Martin Splitt on Links and JavaScript
Splitt dedicates the first installment of Lightning Talks to discussing “everyone’s favorite” topic: links.
More specifically, links within JavaScript web apps.
Splitt explains the important role links play for both users and search engine crawlers.
He also lists dos and don’ts when combining links with JavaScript features.
Link Matter to Humans and Bots
Links serve the obvious purpose of allowing users to navigate content.
However, site owners should also be mindful of the role links play for bots and search engines.
First and foremost, links allow crawlers to find other pages on your website.
Crawlers discover and index other pages on your website by following links from one page to another.
By following links, crawlers understand the structure and information architecture of the site.
This helps you understand which pages are related to a particular topic.
Related: A hands-on introduction to modern JavaScript for SEO
Creating Links with JavaScript – Dos and Don’ts
Creating links is not as easy as it soundsMartin Splitt warns.
This is especially true when adding JavaScript functionality to your links.
JavaScript allows sites to customize their links in many ways, but doing so can make them unusable for crawlers.
Here are Splitt’s recommendations:
Do: Make it clear
The easiest way to place a link on your site is to ahref Tag.
Upgrading standard links with JavaScript functionality is also fine, as long as some conditions are met.
Simple link exampleDon’t: Exclude the ahref attribute
If you add JavaScript functionality to your links, you might consider leaving out the ahref attribute.
“That’s not a good idea” Split says.
The reason is that links only work if the JavaScript is working correctly.
Without the ahref attribute, the crawler won’t run any JavaScript, so it won’t know what to link to.
Don’t: Use fake URLs
Also, adding an ahref attribute without a useful URL or using a “pseudo-URL” as in the example below doesn’t help either.
The result is the same as a link without the ahref attribute, which means it’s not a good idea.
Don’t: Use buttons
Using a button might seem like a viable option for adding links to your page, but it’s also not a good idea.
As a rule of thumb, if a link causes something on the current page, it should probably be a button.
On the other hand, if the link takes the user to different content that wasn’t on the previous page, it should be a standard link.
Don’t: Rely on Click Handlers
Also, site owners should not use other HTML elements or use click handlers in JavaScript to simulate links, for example.
This breaks built-in accessibility features and is not recommended.
Do: Use Semantic HTML
The whole point of all this is to use semantic HTML markup and point your links to the right URLs.
What is the proper URL? We will discuss this in the next section.
Using “proper” URLs
These URLs are typical examples of what would be considered “good URLs”.
These are good URLs because they contain the following attributes:
- protocol
- host
- path to specific content
- fragment identifier (optional)
Related: SEO and JavaScript: Good, Bad and Uncertainty
Note the fragment identifier
If fragment identifiers are optional and point to locations within the same content, the crawler will ignore them.
Be especially careful when building single-page applications that contain links full of fragment identifiers.
Crawlers don’t follow links, so they can’t understand web apps.
In summary
Here are the main takeaways from the first Google Lightning Talk article:
- Use proper link markup.
- Don’t use fragments to load different content in single page apps.
- If you build a website that works well in JavaScript, you’ll find the link.
