We’ve all been there before. You, as the SEO, have a recommendation for your site but you need a developer to implement it.
This is a very common scenario when working in an agency model and dealing with clients as a consultant; we rarely make the actual changes ourselves.
At this point, you’ll hopefully see your recommendations get deployed by the development team, and at other times, you’ll just have to wait in the queue until it's your turn! But let's say you’re one of the lucky ones who can get recommendations deployed quickly. Once your developer says they’ve deployed your recommendations, how do you verify it has been done correctly?
Beyond asking for verbal confirmation that the work is done, you can take it into your own hands and verify it yourself!
Verifying standard SEO-focused updates is usually pretty straightforward. If the client updates the page copy you can just look at the page. If they update the page title or description you can use one of the million tools available online that shows you basic page information interesting to an SEO.
But what if you don’t have access to those tools? Or the tools aren’t working, or the result they give you doesn’t seem right? How would you go about verifying the page’s status just using a web browser?
Using a Web Browser to Verify SEO Updates
Almost every modern web browser has built-in functionality that lets you look at the guts of a webpage.
In Google Chrome, it's "Inspect". This tool reveals another browser window that shows many things related to the webpage you’re viewing, but most importantly for us -- it shows the DOM or "Document Object Model".
Using this tool and viewing the DOM, we can see the entire HTML of the page, allowing us to see what is really on the page and not rely on tools that aren't always 100% accurate.
Let’s walk through viewing the DOM for seerinteractive.com:
The following steps will show the DOM of a webpage:
- Open a webpage, right-click somewhere on the page and click Inspect.
- A window will pop up revealing the DOM of the page, along with a bunch of other tabs that let you inspect the page you’re viewing.
- Using this window you can a better idea of what a bot might see, in combination with the “viewsource:” function, you can get a great view of what Google sees.
So, how is this useful? We recently had an issue where we needed to update a site's metadata at scale but didn’t have a way to do it programmatically or by hand. This would have required 1000s+ pages having their tags needing to be hard-coded by a person. This was a major resource drain on the client and something they wanted to avoid; totally understandable.
They attempted to change the tags using JavaScript in the user's browser, in an effort to leverage code they already had. In practice, this means the page would load the initial HTML with a placeholder page title, description, and canonical tag in place, and then a JavaScript script would change the metadata on the page once ran.
Upon initial inspection of the page, just viewing it in a normal browser, the page title looked correct because the JS works so fast that the necessary elements are updated very quickly. However, we noticed that various SEO tools we ran the page through reported various outcomes including:
- No page title being reported
- The page title would be the placeholder title
- The page title would be correct
Of course, this isn’t ideal for SEO. We want the page’s metadata to be correct when the page is delivered to the user and when bots crawl it, which usually means not requiring any additional JavaScript to fix things. Even one or two seconds between the page loading and the Javascript fixing things is too long when it comes to bots crawling the site.
This wasn’t obvious upon initial inspection – it's a fairly rare issue and one you might only understand after encountering it for the first time. Visual inspections of the page looked okay, and the tools weren’t giving us a consistent answer. At this point, it was time to not rely on any external tools and just dive into the page’s code.
Using the Inspect tool, we were able to see exactly what was happening and when along the load process.
This extra layer of insight and ability to QA allowed us to identify a problem with how our recommendations were deployed, come up with a plan and give feedback to the developers so they could get the issue fixed. Without verifying these changes beyond just a visual check we might not have noticed the wrong metadata was being crawled until much further down the line.
Tips for Using Chrome Inspect for Verifying SEO Fixes
Here are some common use cases where you might want to consider diving into a page’s code and verifying things are as they should be.
Verifying Metadata
- Open the webpage in question, right-click on a non-clickable area of the webpage and click Inspect. When the window opens up click on the Elements tab and you’ll see the HTML of the page.
- From here you can hit control + F to bring up a search bar. Use this bar to find the meta elements you want to verify.
- For page titles, you can search “<title”. To search for a description, search “description”, and so on. You might have to play around with this a bit depending on the developer's preferred method of writing code.
- Once you find what you’re looking for, verify that it is indeed correct.
Inspecting UX/Visual Elements
You can inspect any UX or visual element on a page by right-clicking on that element and clicking Inspect. The chrome developer tools will pop back up with the element you right-clicked on highlighted in the DOM.
Verifying Google Analytics or Google Tag Manager on Page With Chrome Dev Tools
Just like other meta elements, click on a non-clickable part of the page to bring up the dev chrome tools.
Search the dom for either “analytics.js”, “ua-”, or “gtm” or another code snippet related to your analytics suite that might be on the page.
In Conclusion
We’ve just scratched the surface of what you can do with Chrome Dev tools and the DOM.
From here you can fully explore a webpage down to a very low level. So, go forth and explore and verify!
Sign up for our newsletter for more posts like this in your inbox:
