Learn More
Advertisement
  1. SEJ
  2.  » 
  3. News

Google SEO 101: Do’s and Don’ts of Links & JavaScript

Google SEO 101: Do’s and Don’ts of Links & JavaScript

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.

Advertisement
Continue Reading Below
Google SEO 101: Do’s and Don’ts of Links & JavaScriptExamples of straightforward links

Don’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:

Google SEO 101: Do’s and Don’ts of Links & JavaScript

The result is the same as a link without an ahref attribute, which means it’s not a good idea.

Advertisement
Continue Reading Below

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”:

Advertisement
Continue Reading Below

Google SEO 101: Do’s and Don’ts of Links & JavaScript

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.

Advertisement
Continue Reading Below

In Summary

Google SEO 101: Do’s and Don’ts of Links & JavaScript

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.

CategoryNewsSEO
ADVERTISEMENT

Subscribe to SEJ

Get our daily newsletter from SEJ's Founder Loren Baker about the latest news in the industry!

Ebook

Matt Southern

Lead News Writer at Search Engine Journal

Matt Southern has been the lead news writer at Search Engine Journal since 2013. With a degree in communications, Matt ... [Read full bio]

ADVERTISEMENT
Advertisement
Read the Next Article
Read the Next
ok