Astro detector

Astro logo

How can you detect if a website uses Astro by looking at the source code?

Detecting if a website uses Astro involves identifying specific markers that are characteristic of Astro-generated sites.

Here’s a step-by-step guide on how to do it:

  1. Open the Page Source: Right-click on the webpage and select “View Page Source” or press Ctrl+U (Windows) or Cmd+Option+U (Mac) to open the page source code.
  2. Look for Astro-Specific Markers: Search for specific Astro indicators in the source code. Use Ctrl+F (Windows) or Cmd+F (Mac) to open the search function and look for:
    • /_astro/: This is a common path found in Astro build files and assets.
    • astro: Look for script tags and links containing this keyword, such as <script src="/_astro/some-astro-file.js"></script> or <link href="/_astro/styles.css">.
  3. Check for Astro-Specific Meta Tags: Sometimes, Astro projects include specific meta tags that hint at their usage. Look for tags like:<meta name="astro" content="your-value">
  4. Look for Astro Components: Astro projects often use their own component system. Search for components such as:
    • <Astro.ComponentName>: This syntax may appear in the source code for custom components defined in Astro.
  5. Search for Astro Dev Tools: During development, Astro may include specific scripts in the source code. Look for tools like:<script src="https://cdn.astro.build/v1/dev-tools.js"></script>
  6. Inspect the Network Requests: Open your browser’s Developer Tools (right-click, “Inspect,” then go to the “Network” tab) and look for requests that reference Astro files. Check for paths that include /_astro/ or astro.build.
  7. Look for Astro’s Static Generation: Astro is known for static site generation. Check for `DOMContentLoaded` events or the presence of largely static HTML content and limited JavaScript interactions.