How to monitor website changes: 4 methods and a setup guide
Monitor website changes: pick a method (HTML diff, CSS selector, visual or keyword), set a schedule and send alerts to Slack or email.
Rebecca Pearson9 min read
On this page
To monitor website changes, pick the page, choose what counts as a change, and let an automated check compare each new version with the last one on a schedule. A change can be the whole HTML (HyperText Markup Language) code, one element such as a price, the page layout, or a keyword. When the check finds a real difference, it sends an alert to Slack, email, or a spreadsheet.
Checking by hand works for one or two pages. It stops working when you track competitor pricing, terms of service, stock levels, or job boards across dozens of pages. This guide covers the six setup steps, the four detection methods, and how to turn a change into an action.
Key takeaways
- Monitoring website changes takes six steps: list pages, pick what to watch, set a schedule, filter false alarms, route the alert, and review after one week.
- Four methods detect changes: HTML diffing, CSS selector monitoring, visual comparison, and keyword monitoring. Each method sees a different kind of change.
- Pages that load content with JavaScript need a tool that opens the page in a real browser first.
- Keep a monitor only if a named person acts on its alerts.
How to monitor website changes, step by step
Monitoring website changes takes six steps: list the pages, pick what to watch, set a schedule, filter false alarms, route the alert, and review after a week. Do the steps in this order, because the method you choose in step 2 decides how many false alarms you must filter in step 4.
- List the pages. Write down each URL (web address) and why it matters, such as pricing, compliance, stock, or hiring.
- Pick what to watch. Use the whole page for policy text, a CSS (Cascading Style Sheets) selector for a price or stock label, a screenshot for layout, or a keyword for specific terms.
- Set a schedule. Match the check to how fast the page changes: hourly for prices and stock, daily for most competitor pages, and weekly for policy pages. Confirm your tool supports that interval.
- Filter false alarms. Ignore ads, timestamps, and comment counts so only meaningful changes trigger an alert.
- Route the alert. Send it where your team already works, such as a Slack channel, an email, or a row in Google Sheets or Notion.
- Review and adjust. After a week, tighten the selector or the threshold for any page that alerts too often.
How does the CodeWords website monitoring template work?
The CodeWords website monitoring template takes a list of URLs and a schedule. It scans each page with Firecrawl (a web scraping service), saves the page text and a full-page screenshot as a versioned snapshot, and runs a Gemini AI check on each difference to judge its impact (CodeWords template, 2026).
The template covers steps 1, 3 and 4. For step 2, it watches the whole page as text and as a screenshot. The template page does not list CSS selector or keyword settings, so use a selector-based tool for a single price. For step 5, describe where the alert should go when you set it up in CodeWords.
What are the core techniques for detecting website changes?
The four core techniques for detecting website changes are HTML diffing, CSS selector monitoring, visual comparison, and keyword monitoring. Each technique sees a different kind of change, so choose by the change you need to catch, not by the tool you already know.
What is HTML hashing and diffing?
HTML diffing saves the raw HTML of a page and compares it with the next copy. A hash (a short fingerprint of the file) shows whether anything changed. A diff (a line-by-line comparison) shows what was added or removed. Use it for pages where any wording change matters, such as legal terms.
What is CSS selector monitoring?
CSS selector monitoring watches one element of a page instead of the whole page. You give the tool a selector such as div.price, #product-title, or span.stock-status, and it tracks changes only inside that element. Ads and comments elsewhere on the page are ignored, so you get fewer false alarms. The same selectors are how you extract website data for analysis.
What is visual regression testing?
Visual regression testing compares screenshots of a page over time and highlights the pixels that changed. It catches layout breaks, swapped images, and banner changes. An HTML check misses these changes or reports them as many small differences.
What is keyword monitoring?
Keyword monitoring scans a page for a word or phrase that appears or disappears. For example, you can get an alert when "Out of stock" disappears from a product page, or when a job title appears on a company's careers page.
Which monitoring technique is right for you?
Use HTML diffing for policy text, CSS selector monitoring for prices and stock, visual comparison for layout, and keyword monitoring for specific terms. The table shows the best use and the main risk of each technique.
| Method | Best for | Main risk |
|---|---|---|
| HTML hashing and diffing | Policy pages, terms of service, documentation | Alerts on any markup change, including ads and timestamps |
| CSS selector monitoring | Prices, stock status, product titles | Stops working if the site renames the element |
| Visual regression testing | Layout, banners, design changes | Larger files and more computing per check |
| Keyword and content monitoring | Mentions of a brand, product, or term | Misses changes that do not use the keyword |
Pages that load their content with JavaScript need a tool that opens the page in a real browser (a headless browser) before it compares. A plain HTML check of such a page sees no content. You can also combine two methods, for example a CSS selector on the price plus a keyword check for "discount".
What should you monitor website changes for?
You should monitor website changes to catch a competitor price, a supplier term, or a mistake on your own page on the day it happens. Each monitor needs one owner and one next step, or it only adds alerts.
- Competitive pricing: A CSS selector monitor on a rival's pricing table sends a Slack alert when a price changes. The product team reviews the move and decides on a response the same day.
- SEO and brand protection: A developer leaves a
noindextag (a code that tells Google not to list the page) on a key landing page after a release. An HTML monitor catches it on the next check, so the marketing team can remove it before the page drops out of search. - Compliance and suppliers: A keyword monitor on a supplier's terms page flags new wording on fees or delivery. Finance sees it before the next invoice.
How do you avoid too many alerts?
Avoid too many alerts by watching a narrow part of the page, or by adding a second check that decides whether a change matters before anyone is told. Visualping and ChangeTower both describe this problem: Visualping scores change importance with AI, and ChangeTower filters noise (Visualping, ChangeTower, 2026).
If a change has no owner and no next step, stop monitoring that page. Fewer alerts get read more closely.
How can you automate monitoring with workflows?
You automate monitoring by connecting the change check to an action, so a change starts a task instead of only sending a message. Set the action by the type or size of the change.
- Conditional routing: If a competitor's pricing page changes and the new text includes "discount", send an alert to your
#sales-intelSlack channel. Otherwise, log it in a Notion database. - Data enrichment: When a new job posting appears, pull the full job description with a web data extraction tool before passing it to your team.
- Thresholds: Start the workflow only when a price moves by more than an amount you choose, so small changes are ignored.
What is a practical workflow for competitor tracking?
A competitor hiring monitor is a good first workflow to build in CodeWords. It checks a careers page every day and reports new roles, which shows where a company is investing. You describe the task to Cody, the CodeWords AI agent, in plain English.
CodeWords workflow: Competitor talent monitoring
Prompt to Cody: Every day, check [competitor_careers_url] for new job titles. Then send a summary message to the #competitive-intel channel in Slack and add a row to my "Competitor hires" Notion database with the title, link and date.
Expected output: A Slack message lists the new roles (for example, "New role: Senior AI Engineer"), and a new row appears in the Notion database.
Result: The daily manual check of each careers page stops. You read one message instead.
To start from a ready workflow, open the website monitoring template. For more competitor workflows, see how to automate competitor monitoring.
FAQs: How to Monitor Website Changes
How to tell when a website changed?
You can tell when a website changed by comparing archived copies in the Wayback Machine (Internet Archive) with the live page. Some sites also show a "last updated" date, a Last-Modified header, or dates in their sitemap, but each site sets these itself. For ongoing checks, use a change monitoring tool instead.
What is the best website monitoring tool?
The best website monitoring tool depends on what you watch. Visualping compares screenshots and scores importance with AI. changedetection.io is open source and self-hosted. ChangeTower adds keyword monitoring and Slack alerts (vendor sites, 2026). Uptime tools only check that a site is online. CodeWords fits when a change must start a task.
Can you monitor website changes for free?
Yes, free options exist. changedetection.io is open source and free to self-host, and UptimeRobot offers a free website change detection tool where you paste a URL and highlight the area to track (changedetection.io, UptimeRobot, 2026). Free tools usually cover single pages, so check each tool's limits before you rely on it.
How do you get alerts when a website is updated?
You get alerts when a website is updated by setting up a monitor that checks the page on a schedule and sends a message when it finds a difference. Common alert channels are email, Slack, and Google Sheets. In CodeWords, you describe the destination when you set up the monitor.