I'll help you trade an imposter syndrome for a technical SEO superpower. My mission is to break down and simplify complex technical SEO things so that you can understand and use them to advance your SEO career.
This technical SEO topic is too important to ignore
|
Let’s talk about Links 🔗 vs. buttons ▶️ Too many people get it wrong, so let me explain a few things so that in 2 minutes you’ll feel you’ve learned something new and important. I covered this topic in a recent video for my Tech SEO Pro course - Everything you need to know about internal linking (Module 5, you’ll get instant access to it when you join). Many don’t think that wrong usage of links and buttons can sauce any SEO issue… before they face one. From a UX perspective, links and buttons are very different: links point from one page to another. They help with internal linking and help to navigate through a website. Buttons trigger an action. For example, a form submit or adding to cart. They are not meant for internal linking. To complicate this:
Too often buttons are added when there should be links. Why is this an issue? From a web standards perspective, links are HTML elements added with . Buttons are added with From a technical SEO perspective, Google can see and follow links added according to the web standards, i.e. using . But if you have just a button, there’s no link. And even if you add an onclick event to open a link once the button is clicked, Google still won’t see that link.
It also means that buttons should stay buttons when they trigger an action. For example, the “Add to Cart” buttons should not have links attached to them. ✔️ Use links 🔗 to direct people to other pages. ✔️ Use buttons ▶️ to trigger an action. ✔️ Don’t confuse the two. |
Smart SEO Newsletter
I'll help you trade an imposter syndrome for a technical SEO superpower. My mission is to break down and simplify complex technical SEO things so that you can understand and use them to advance your SEO career.
Do you know what the Critical rendering path is? It’s what your browser goes through in order to build a beautiful usable page from your source code. It requires communication between the server and browser: Steps to render a page in a browser (Critical rendering path) Begin constructing the DOM by parsing HTML incrementally Request CSS and JS files Parse CSS and construct CSSOM Execute JS, build a render tree Merge Document and CSS Object Models Run layout and paint Optimizing critical...
This shouldn’t come as a surprise to you: Google uses rendered HTML of your page to evaluate the page’s optimization. First, let’s make sure we’re on the same page here. What is rendered HTML? Rendered HTML is displayed after CSS and JavaScript are processed. It means that if you’re only relying on the source code for your SEO efforts, it’s easy to miss many important things that can be altered by JavaScript, such as: Rewritten title tag A sneaked noindex tag A removed canonical Added/removed...
Critical knowledge alert 🚨🚨🚨 As a technical SEO, it’s crucial you know the difference between source code and rendered HTML them. Source code It is the initial code of the page before any JavaScript files are executed and CSS files are parsed. It’s the code you see when viewing the source code of a page in your browser. Rendered HTML It is displayed after CSS and JavaScript are processed. When you inspect an element on a page using Chrome dev tools, you’re looking at the rendered HTML. Why is...