Blog

You are currently viewing 3 Things Every Freelance Writer Needs to Have: AMP Skills

3 Things Every Freelance Writer Needs to Have: AMP Skills

If you write technical documentation, tutorials, or blog posts about programming and cybersecurity, your content will likely be consumed on mobile devices. Google’s Accelerated Mobile Pages (AMP) framework is not just a buzzword—it’s a stripped-down HTML specification that forces you to write lean, fast-loading pages. Ignoring AMP means your readers on slow connections or older phones will bounce before they finish your first code snippet. Here are three concrete things you need to master to deliver AMP-compliant content without losing your sanity.

1. AMP HTML Syntax and Its Strict Component Model

AMP replaces many standard HTML tags with custom components. For example, instead of <img> you use <amp-img>; instead of <video> you use <amp-video>. This is not optional—the AMP validator will reject your page if you use a forbidden tag. As a freelance writer, you must know the exact markup for images, embeds, analytics, and even forms.

Start by memorising the most common replacements:

  • Images: <amp-img src="..." width="..." height="..." layout="responsive">
  • Iframes: <amp-iframe src="..." width="..." height="..." sandbox="...">
  • Analytics: <amp-analytics type="googleanalytics">
  • Forms: <amp-form> with custom validation attributes

One common mistake is forgetting to include the required <script async src="; in the <head>. Without it, the page is not AMP-valid. Another trap: you cannot write custom JavaScript. All interactivity must happen through AMP’s built-in components or <amp-script> for worker-driven JS, which is heavily sandboxed. For a writer, this means you need to plan your interactive examples (like code runners or quizzes) using AMP’s limited toolbox, or accept that some interactivity must be replaced with static code blocks.

Writing AMP-compliant HTML in a code editor with the AMP validator panel visible

2. A Local Validator Workflow (Not Just the Online Tool)

Relying on Google’s online AMP validator is fine for a quick check, but as a freelance writer you often work offline or need to validate dozens of pages before publishing. You need a local validation setup that runs in your terminal or editor.

The official amphtml-validator npm package gives you a command-line tool. Install it globally:

npm install -g amphtml-validator
amphtml-validator my-article.html

This spits out line-by-line errors. For a more visual approach, use the VS Code extension “AMP Validator” by Google. It highlights errors directly in your editor as you type. This saves hours of back-and-forth between your browser and the validator.

Another critical piece: test your AMP pages on a real mobile device or emulator. The validator checks syntax, but it does not catch layout shifts caused by missing width and height attributes. Use Chrome DevTools’ “Rendering” tab to simulate a slow 3G connection and watch how your AMP page loads. If the content jumps while images load, you need to fix the layout attributes.

For writers who produce content for multiple clients, create a boilerplate AMP HTML template with all required tags pre-filled. Store it in a Git repository so you can version your template changes. This is especially important when AMP releases new component versions—you can update the template once and regenerate all your articles.

3. Understanding AMP’s Caching and Analytics Constraints

Many freelance writers think AMP is “just a faster HTML”. They forget that AMP pages are often served from Google’s AMP Cache or other CDNs. This changes how analytics, ads, and tracking work. If you embed a standard Google Analytics snippet, it will fail because AMP requires the <amp-analytics> component with a specific JSON configuration.

Here is a minimal working analytics block for AMP:

<amp-analytics type="googleanalytics">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      }
    }
  }
  </script>
</amp-analytics>

Notice the triggers object. AMP does not fire a pageview automatically; you must define it. For event tracking (e.g., clicks on a download button), you need to add a separate trigger with on: "click" and the CSS selector of the target element. This is a paradigm shift from traditional JavaScript-driven analytics.

Another constraint: third-party scripts like Disqus comments or Facebook embeds cannot be loaded directly. You must use AMP-specific embeds (e.g., <amp-facebook>, <amp-disqus>). If your client requires a custom commenting system, you may need to build an AMP-compatible version or use an iframe sandbox, which limits functionality.

A smartphone showing an AMP article next to a real-time analytics chart

Putting It All Together: A Practical Workflow

Let’s walk through a real scenario. You are hired to write a series of Linux command tutorials. The client wants them to be AMP-valid for their mobile-heavy audience. You start with your AMP HTML template, write the content using <amp-img> for terminal screenshots, embed code blocks inside <pre><code> (which are allowed in AMP), and add a simple analytics trigger. Before submitting, you run the local validator, fix two missing layout attributes, then test on an Android emulator with throttled network. The page loads in under two seconds. You deliver the files as a zip with a validation report. The client is happy because their SEO team sees the green “AMP” badge in Search Console.

This workflow is repeatable and scales to multiple articles. The key is to treat AMP not as an afterthought but as part of your writing process. The three things—knowing the component syntax, having a local validator, and understanding caching/analytics quirks—are the minimum to produce professional AMP content that stands up to both technical scrutiny and real-world mobile users.