Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Brigthon SEO - The Xpath to discovery

Brigthon SEO - The Xpath to discovery

Spotting technical SEO issues and glitches in the DOM can be a nightmare.

To help solve this problem, this presentation shows you how to highlight issues using Xpath and Chrome Developer Tools.

Jonathan Moore

April 21, 2023
Tweet

More Decks by Jonathan Moore

Other Decks in Marketing & SEO

Transcript

  1. XPath is a query language. We can use it to

    select elements from an XML or HTML document. #BrightonSEO @nathanless
  2. XPath is mainly used in XSLT but can also be

    used as a much more powerful way of navigating through the DOM. Source: https://developer.mozilla.org/en-US/docs/Web/XPath #BrightonSEO @nathanless
  3. // footer // a 29 Axis Step Axis Step //

    Descendants #BrightonSEO @nathanless
  4. / / m e t a [ c o n

    t a i n s ( @ p r o p e r t y , " o g : " ) ] 33 // Contains #BrightonSEO @nathanless
  5. / / s c r i p t [ @

    s r c a n d @ d e f e r ] 35 // And #BrightonSEO @nathanless
  6. / / l i n k [ c o n

    t a i n s ( @ r e l , " n e x t " ) o r c o n t a i n s ( @ r e l , " p r e v " ) ] 37 // Or #BrightonSEO @nathanless
  7. / / i m g [ n o t (

    @ a l t ] 39 // Negation #BrightonSEO @nathanless
  8. //a[ cont ains (tex t(), "for sal e in May

    fair ")] 41 // Text #BrightonSEO @nathanless
  9. / / * / @ * [ s t a

    r t s - w i t h ( n a m e ( ) , " d a t a - " ) ] 46 // Data Attributes #BrightonSEO @nathanless
  10. / / l i n k [ c o n

    t a i n s ( @ r e l , " d n s - p r e f e t c h " ) o r c o n t a i n s ( @ r e l , " p r e c o n n e c t " ) o r c o n t a i n s ( @ r e l , " p r e l o a d " ) o r c o n t a i n s ( @ r e l , " p r e f e t c h " ) o r c o n t a i n s ( @ r e l , " p r e r e n d e r " ) ] 48 // Resource Hints #BrightonSEO @nathanless
  11. / / * [ s e l f : :

    h 1 o r s e l f : : h 2 o r s e l f : : h 3 o r s e l f : : h 4 o r s e l f : : h 5 o r s e l f : : h 6 ] 50 // Header Elements #BrightonSEO @nathanless
  12. / / h e a d / * [ s

    e l f : : i m g o r s e l f : : i f r a m e o r s e l f : : n o s c r i p t ] 52 // Invalid <head> tags #BrightonSEO @nathanless
  13. / / i m g [ n o t (

    c o n t a i n s ( @ l o a d i n g , " l a z y " ) o r c o n t a i n s ( @ c l a s s , " l a z y " ) o r c o n t a i n s ( @ c l a s s , " l a z y l o a d e d " ) ) ] 56 // Image Lazy Loading #BrightonSEO @nathanless