How about DevTools' Snippets for daily SEO tasks?

How about DevTools' Snippets for daily SEO tasks?

Riad Joseph Riad Joseph

Riad Joseph

SEO Consultant

发布日期: 2023年12月3日
+ 关注

This covers 5 useful snippets to use in your browser. If you already use the browser's Network and/or the Elements (Chrome) / Inspector (Firefox) tabs to check for the most common issues in SEO, you might enjoy these Snippets as well.


Save time validating SEO Governance / Technical SEO issues, when you cannot use extensions or SEO tools

So why go through this "hassle" (it's just a right click + Cmd/Enter) when I could use any crawler or browser extension? Good question > 2 answers at least:

  • This is useful when you cannot use or don't want to use browser extensions in closed environments such as what "enterprise" can be, that is my case at least.
  • You are OK with the results being printed in your browser's Console. Of course you could modify any of the below snippets to make them act like bookmarklets and more (maybe, export the table?)
  • You need very specific information, fast.
  • No distraction: Check it in the browser, stay in the browser.


?? Maximum 999 results returned in the Console of your browser.
?? Case sensitive.


Snippet #1: Check URLs on an XML Sitemap (along with their canonical, meta robots tag, status code & disallow directive) from your browser

Find particular URLs on an XML sitemap along with their Robots meta, H1, Disallow directive and HTTP Header Status code, on live or staging environment.
Find particular URLs on an XML sitemap along with their Robots meta, H1, Disallow directive and HTTP Header Status code, on live or staging environment.

Snippet #2: Find href attributes on a page ?? (along with their status code & anchor text)

Find href attributes on a page along with their status code & anchor text
Find href attributes on a page along with their HTTP header status code & anchor text.

Snippet #3: Find un-crawlable "empty" links ???

Find uncrawlable links with this snippet. Instead of running a crawler or a lighthouse report, you could use this simple snippet to find anchor tags that do not have an href attribute.
Possibly the most underrated; find uncrawlable links with this snippet. Instead of running a crawler or a lighthouse report, you could use this snippet to find anchor tags that do not have an href attribute.

Snippet #4: Work with JavaScript based frameworks? Find and compare Rendered HTML Canonical URL vs Source HTML Canonical URL

When dealing with Javascript rendering, you will find situation where the HTML is modified in the browser after receiving the server HTML.
When dealing with Javascript rendering, you will find situation where the HTML is modified in the browser after receiving the server HTML.

Snippet #5: Run a mini-crawler script on a page

Check the canonical URL, the title and meta description along with the character count, the Hn headings, the meta robots tag and the URLs found on the page along with their HTTP status code, anchor text, CSS Selector and their canonical URLs.
Why launch a crawler when you can do it in your browser?

领英推荐

Bonus snippets:

Snippet #6: Get meta tags found in the <head> on the fly

Get all meta tags found in the head
Get all meta tags found in the head

Snippet #7: Get the SRC attribute of the images on the page (along with their ALT text and HTTP status code)

Get the SRC attribute of the images on the page (along with their ALT text and HTTP status code)
Handy to find the errors when the image is served from your site. Note that CORS settings will return an error, like the the youtube image above. It does not mean the image is 404 not found.

Snippet #8: Get the hreflang alternate tags found on the page

Get hreflang link alternate tag found on the page
Handy to check in the fly who does the hreflang look like on a page. Note it does not check the XML sitemap where hreflang could be located. See below.

Snippet #9: Get the hreflang URLs on an XML Sitemap

Get the hreflang URLs on an XML Sitemap
Get a quick snapshot of the XML sitemap hreflang URLs


Not familiar with the browser's DevTools?

This video will help:

DevTools Snippets from Google Devs
Snippets and live expressions - DevTools Tips - Chrome for Developers (725K subscribers)


You guessed it right, there are no limits to what you can do with Snippets. Best part is that you can save them for daily usage.

Curious to learn what your favorite snippets are....

Cheers





要查看或添加评论，请登录

社区洞察

其他会员也浏览了