AI 资讯
Our site served every URL the same 3,780 bytes, and Google believed it
Checked with a Googlebot user agent one morning: every single URL on our site returned the same 3,780-byte shell. Same <title> , zero <h1> , zero body text. The homepage, a blog post and a product page were byte-identical before JavaScript ran. Search Console agreed with the crawler rather than with us. Of 741 URLs, 116 had earned a single impression in 28 days, and a landing page that had been live for five months was still reported as "URL is unknown to Google". Here is what I actually learned fixing it, including the two things that cost us the most time. Google does render JavaScript. That is not the point. The standard reply to this problem is "Googlebot executes JS now, you are fine." It does. Several of our pages were indexed, so rendering clearly happened. But rendering is a separate, budgeted queue . A domain with little authority does not get much of that budget. So the practical question is not "can Google render our page", it is "will Google spend its budget rendering this page, today, before it decides what the page is about". There is a second problem that has nothing to do with rendering: 741 URLs that are byte-identical before render look like duplicates. You are handing a duplicate-content signal to the crawler and hoping the render queue fixes your first impression. What we built, and what we deliberately did not We wrote a post-build script that injects a real <head> into each generated HTML file: title, description, canonical, robots, Open Graph, Twitter. Head only. The body stayed exactly as the SPA served it. That was deliberate: No hydration flash. No risk of a static copy drifting out of sync with what users see. Nothing that could be read as cloaking, because the static markup is a subset of the rendered markup, not a different page. Every value is read from the same source the React page reads. Where a title is a literal inside a component, the script extracts it from that component's source rather than having anyone retype it. A number ret
AI 资讯
I pre-registered a study on AI visibility signals. The main result was null.
Originally published on angeo.dev . Full tables, p-values and the sealed plan are there. Most claims about AI visibility are untestable by design: publish the signals, wait, attribute anything good that happens to the signals. I wanted a version I could not fudge, so I wrote the analysis plan first, hashed it, and sent the hash to the other party before I had any data. The question Do businesses AI assistants name repeatedly differ, on observable technical signals, from businesses the same assistants name once ? Every business in the corpus was named at least once, so this says nothing about how to enter an answer. It compares repeat against one-off mentions inside a named-business corpus. Four signals, all externally observable: Signal Check Crawler access Does robots.txt block any of 8 AI crawlers Content map Does the site serve /llms.txt Structured data Does a product page emit JSON-LD Product Buyability Does that node carry offers.availability Study setup The answers came from a partner (connexion.me), who ran 44 product-level home-decor buying questions across ChatGPT, Gemini and Perplexity, twice, in two arms — 264 answers per arm. Blinding was deliberate. I did not write the questions and did not see their store list until my plan was sealed; they never saw my frame, my scan results or my thresholds. Roster rows 669 no resolvable domain -186 resolved to a different company -3 marketplaces and listing surfaces -12 duplicate rows collapsed -10 Unique domains analysed 458 scanned successfully 455 Cases: 3+ mentions across both runs and present in both. Controls: exactly one mention across both runs. Head excluded first — anything in 53+ of 264 answers (Amazon, Etsy, Wayfair, Target, Home Depot). The pre-registration Sealed 10 August, SHA-256 9b4ccf12629e… : Under 15% of named businesses would be Magento No signal would separate the groups by more than 15 points Refutation condition: any signal differing by 20+ points with the named group higher Result — generic
AI 资讯
Checking If a Business's Google Profile Actually Matches Its Own Website
If you do local SEO work, you've run into this: a client's Google Business Profile says one phone number, their website footer says another, and nobody noticed until a customer called the wrong number. Or the postal code on the GBP listing is a leftover from an old office. This kind of drift is called a NAP (Name, Address, Phone) inconsistency, and it's widely cited as a local search ranking factor. But checking it by hand means opening every listing and every website side by side. I built Google Maps NAP Consistency Checker , an Apify Actor that takes Google Maps scraper output, fetches each business's own website (lightly: homepage plus one likely subpage), and checks whether the name, postal code, and phone number on the Google Business Profile actually show up on the site. What it does, and what it doesn't This Actor checks one thing: does a business's own website agree with its Google Business Profile on name, postal code, and phone number. It does not check third-party directories (Yelp, Facebook, etc.). That's a different problem with a different competitor landscape. It does not crawl an entire website; it fetches at most two pages per business (homepage, plus a subpage if one with a keyword like "contact" or "about" is linked from it). It does not use an LLM. It's regex and string matching against fetched text, which makes it fast, cheap, and predictable. There's no model that can hallucinate a match that isn't there. Businesses with no independent website (only a social profile, or nothing) are skipped entirely, because there's nothing to fetch and compare against. How it works For each place with a real website, the Actor: Checks robots.txt for that domain before fetching anything, and skips the business if the checker's user agent isn't allowed. Fetches the homepage HTML (up to 3 MB), strips <script> , <style> , and comments before converting to text, so JavaScript variables and tracking IDs don't get misread as phone numbers. Looks for an internal link
AI 资讯
133 of 10,099 Shopify stores block an AI crawler. Six block the one ChatGPT shops with.
Merchants are told two opposite things about AI crawlers: block them, because they take your content and give nothing back; and admit them, because that is how a store gets into an AI shopping answer. Both assume a decision is being made. We wanted to know how many stores have made one, and which way. Method Every store in a corpus of 10,099 known Shopify storefronts has its /robots.txt read as part of a scan. The file is parsed the way the major crawlers document parsing it: most specific User-agent group wins, * is the fallback, longest matching path rule wins, Allow beats Disallow on a tie. Each of twelve crawler names is asked one question: may it fetch /products/ ? A store counts as blocking a crawler when the answer is no. A second reading looks at the product page for a meta name="robots" tag carrying noai or noimageai . Readings were taken between 29 August and 2 September 2026. Every store that blocked at least one crawler, or carried the tag, is one row in the CSV at the end. The rest of the corpus blocked nothing and is the denominator. What this cannot see. A robots.txt is a request. A store can also block a crawler at the edge, with a bot-management rule or a firewall, and that block is invisible here because the scanner is not the crawler being blocked. Every count below is a floor. Result 133 of 10,099 stores block at least one crawler: 1.32%. Crawler What it feeds Fetches at answer time Stores blocking CCBot Common Crawl no 81 GPTBot OpenAI training & retrieval no 77 Bytespider TikTok / Doubao no 72 Amazonbot Alexa+ / Rufus no 60 Google-Extended AI Overviews & AI Mode grounding no 58 ClaudeBot Claude retrieval & citations no 53 Applebot-Extended Apple Intelligence no 48 meta-externalagent Meta AI no 47 ChatGPT-User Live fetches during a ChatGPT chat yes 11 PerplexityBot Perplexity search & shopping yes 10 OAI-SearchBot ChatGPT search & shopping results yes 6 Perplexity-User Live fetches when a Perplexity user asks yes 3 "Fetches at answer time" marks
AI 资讯
I Got Tired of Paying for 3 SaaS Tools to Optimize One Website — So I Built Plyxo
The problem that wouldn't leave me alone A few months ago I was auditing a client's site and had five tabs open: Hotjar for heatmaps, Ahrefs for SEO, a spreadsheet for tracking fixes, ChatGPT for "why is this page not converting," and a half-finished Notion doc trying to tie it all together. Somewhere around tab four, it hit me: none of these tools talk to each other, and none of them tell you what to actually do . Hotjar and FullStory show you that people bounce off a page. They don't tell you why , and they definitely don't hand you a fix. Ahrefs and SEMrush dump a spreadsheet of 300+ "issues" with no prioritization. Which one do you fix first? Good luck. And increasingly, a growing slice of search traffic isn't coming from the 10 blue links at all — it's coming from ChatGPT Search, Perplexity, and Google AI Overviews summarizing an answer and (maybe) citing a source. Almost nothing measures whether your page is even citable in that world. So I did what any reasonable/unreasonable person does with a Saturday and too much caffeine: I built the tool I wished existed. It's called Plyxo , and it's free, open-source, and self-hosted. Repo: https://github.com/pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO What Plyxo actually does Plyxo isn't a single-purpose tool — it's three audits that usually live in three different paid products, combined into one: 1. Visual CRO auditing Plyxo takes a screenshot of your live page and overlays bounding boxes around conversion friction points — a CTA buried below the fold, a form with too many fields, contrast that fails accessibility and readability at the same time. For each one, it estimates the dollar impact of the friction and generates a ready-to-paste React/Tailwind fix , so you're not just told "this is bad," you get the actual patch. 2. Technical + semantic SEO audit Under the hood, Plyxo checks the boring-but-critical stuff: schema.org markup validity, Core Web Vitals, broken/dead links (crawled with SSRF protections so it's safe to po
AI 资讯
I Ran My Own Favicon Checker Against 10 Sites. All 10 Failed.
I maintain a small collection of single-purpose web tools. Last month I built a favicon checker: you type a URL, it reads the icon declarations in the HTML head, probes every referenced file, and also hits /favicon.ico directly, because plenty of software still requests that path without ever reading your HTML. The first thing you should do with any auditing tool is point it at your own stuff. So I did. Ten sites, all built by me, all shipped and verified in browsers I actually use. All ten failed. Not seven out of ten. Ten. Failure one: SVG-only icon sets Every site had a nice crisp favicon.svg and nothing else. Modern browsers request it, render it at any size, everything looks great in Chrome and Firefox. Then something older comes along: a bookmark sidebar, an RSS reader, a corporate proxy portal that lists your link, that one intern running Opera 12. These clients do not parse your <link> tags. They request /favicon.ico and hope. All ten sites returned a 404 for that path. The fix is not glamorous. You need an actual .ico file, ideally with 16, 32, and 48 pixel frames packed inside, plus a PNG for iOS. More on that below. Failure two: no apple-touch-icon Nine of the ten sites had no apple-touch-icon.png . When someone saves such a site to an iOS home screen, Safari does not use your favicon. It takes a screenshot of the page, letterboxes it, and calls that your app icon. If you have ever seen a bookmark that looked like a cropped text paragraph, that is why. The fix is one file and one tag: a 180 by 180 PNG, referenced with <link rel="apple-touch-icon" href="/apple-touch-icon.png"> . Done. No JavaScript, no media queries, no dark mode variants needed. iOS rounds the corners itself. Failure three: the 404 that would not leave This is the one that cost me an evening, so pay attention if any of your sites sit behind Cloudflare. I generated the missing icons, deployed them, and re-ran the checker. Still 404. I deployed again. Still 404. I started doubting my build,
AI 资讯
From 0 to 1,000 Couples: SEO Lessons From a Niche SaaS
From 0 to 1,000 Filipino Couples: SEO and Growth Lessons From a Niche SaaS Quick Answer: We grew our bootstrapped wedding planning SaaS from zero to 1,000 registered Filipino couples in 18 months by focusing on hyper-local SEO, long-tail keyword targeting, and AEO-optimized content that answered specific questions couples were already searching for. Introduction: The Niche SaaS Problem Building a SaaS for the Philippines wedding market sounds like a terrible idea. The market is fragmented, couples are price-sensitive, and you're competing against Facebook groups, Excel templates, and WhatsApp broadcasts from vendors who've been in the game for decades. But here's the thing: fragmentation is an opportunity if you own the search intent. When we started WedPlanner , we had no ad budget, no influencer partnerships, and no existing audience. What we had was a thesis: Filipino couples planning their weddings were asking Google very specific questions, and nobody was answering them well. Not the big wedding directories. Not the international apps. Not the Facebook groups where the same questions get asked 47 times a week. So we decided to answer them. Systematically. And it worked. Why Local SEO Matters for Niche SaaS Most SEO advice assumes you're building for the US market. Keywords like "best wedding planner app" are dominated by The Knot, Zola, and apps with $50M+ in funding. You can't outbid them. You can't out-backlink them. You can't out-brand them. But "wedding planner app Philippines"? "best wedding organizer Manila"? "Filipino wedding budget spreadsheet"? Those are different games entirely. The Long-Tail Keyword Goldmine Filipino wedding planning searches are hyper-specific and underserved: "wedding checklist Philippines 2026" — 720 monthly searches, virtually no competition "how much does a wedding cost in Manila" — 1,900 monthly searches, forum posts from 2019 as top results "wedding venue Cavite budget 100k" — 480 monthly searches, Facebook group threads as SE
AI 资讯
Designing Web Content for LLM Crawlers, Not Just Googlebot
Most teams still optimise for Google alone. But large language models (LLMs) crawl and compress your site into internal knowledge graphs that later power AI answers. That’s a different job than just ranking URLs. Here’s a developer-focused checklist for making your site friendlier to LLM crawlers without sacrificing SEO. Make key facts atomic and stable LLMs do better when core facts are: • Short: "Starter is $99/month for 1,000 credits." • Stable: product/tier names don’t change every quarter. • Unambiguous: each product has one clear description. Avoid hiding pricing, integrations or feature lists inside long narrative paragraphs. Treat FAQ schema as training data Your FAQPage is effectively a supervised dataset of Q→A pairs. Practical tips: • Use real customer phrasing in the Question field. • Keep Answer concise, factual and time-bounded where relevant. • Avoid marketing fluff; aim for sentences that can be quoted verbatim. Use rich schema types Beyond title/description: • Product / SoftwareApplication: name, description, pricing, featureList. • Organization: legal name, logo, sameAs social URLs. • WebSite: canonical URL, SearchAction for on-site search. Validate via structured data testing tools and keep markup in sync with actual UI and copy. Expose crawl intent explicitly LLM crawlers increasingly respect machine-readable contracts: • robots.txt – allow/deny relevant user agents clearly. • sitemap.xml – keep it small and canonical. • llms.txt / links.txt – specify acceptable AI uses and preferred canonical URLs. Enforce naming consistency in code and content Reduce ambiguity by: • Centralising product and plan names in config. • Reusing the same strings across marketing site, docs and in-app help. • Cleaning up stale routes and redirecting deprecated pages. Ship evidence, not just adjectives Pages with concrete claims are easier for AIs to cite: • Simple stats or ranges. • Example queries and expected outputs. • Clear preconditions and limitations. If you mai
AI 资讯
HTML tags that will improve your e-commerce experience
Understanding when to use <ins> , <del> and <s> HTML tags Comparative Feature <ins> element <del> element <s> element Semantic Definition Represents the content that has been added to a document. Represents a range of text that has been deleted from a document. Represents content that is no longer accurate, correct, or relevant. Use Case New edits in a code, in a text, tracked changes Document edits, tracked changes, or visual/structural revisions (often paired with <ins> ). Outdated information, deprecation notices, old prices, or sold-out items. Accessible Code Pattern The meeting is on <span class="sr-only">previous date: </span><del>Monday</del> <span class="sr-only">new date: </span><ins>Wednesday</ins>. The meeting is on <span class="sr-only">previous date: </span><del>Monday</del> <span class="sr-only">new date: </span><ins>Wednesday</ins>. <span class="sr-only">Original price: </span><s>$100.00</s> Visible Representation The meeting is on Monday Wednesday The meeting is on Monday Wednesday $100.00 $34.99 Unique Attributes cite (URL pointing to the explanation of the deletion) datetime (date/time of the deletion) cite (URL pointing to the explanation of the deletion) datetime (date/time of the deletion) None Default Browser Style By default, it has an underline but it can be changed to a bold style, put a background green to show insertion, etc. Renders with a visual line-through (strikethrough) Renders with a visual line-through (strikethrough) Implicit ARIA Mapping: role="deletion" and role="insertion" The <del> and <s> tags map to the accessibility role of deletion (and <ins> to insertion ). Sighted users see these as struck through or underlined, but screen reader support for announcing these changes is inconsistent. Understanding the Accessibility Tree Mapping Under the W3C Accessibility API Mappings, these tags are programmatically mapped to specific accessibility roles that browsers expose to the OS accessibility tree: <del> maps to role="deletion" (se
AI 资讯
How to Write a 5,000-Word Masterpiece That Hits DR 20, 1K Daily Views, and Secures Google AI Position 0
We've all heard the modern blogging advice: "Keep it short, write for humans, don't write novels." While short-form content has its place, long-form technical guides—when executed correctly—are absolute powerhouses. Writing a comprehensive, 5,000-word deep dive isn't about padding your word count with fluff; it's about building an irresistible, authoritative resource that search engines and developers simply cannot ignore. If done right, a single 5,000-word post can push your brand-new domain to a Domain Rating (DR) of 20 , pull in 1,000+ daily organic views , and land your site directly inside Google's AI Overviews (Position 0) . Here is the exact framework to pull this off. 1. Why 5,000 Words Still Works (When Done Right) Long-form content isn't dead— shallow long-form content is . When you cover a complex technical topic thoroughly, three things happen: High Information Gain: You answer questions that 500-word summaries skip over. Natural Keyword Spreading: You rank for hundreds of long-tail queries without keyword stuffing. Passive Backlink Generation: Developers, bloggers, and tech curators link to comprehensive references instead of surface-level posts. 2. Targeting the Right Topic You can't write 5,000 words on "How to install Node.js." You'll run out of meaningful things to say by page two. To sustain this length and quality, choose topics that have depth, high friction points, and multiple moving parts . Ideal Candidates: The Ultimate Architectural Guide: e.g., "Building a Multi-Tenant Microservices Architecture with Go and PostgreSQL" End-to-End Production Blueprints: e.g., "From Zero to Production: Deploying Next.js, Redis, and Prisma on AWS EKS" Comprehensive Comparative Deep Dives: e.g., "State Management in 2026: An In-Depth Benchmark of Redux, Zustand, Jotai, and Signal" 3. How to Structure for Readability & Google AI (Position 0) Google’s AI Overviews look for clean, structured answers to extract directly into Position 0. If your post is an unorganiz
AI 资讯
The Architecture Behind CoxOutage.us
When an internet outage hits, users immediately turn to their phones to find out if it's just them or a widespread network issue. Because they are often relying on spotty cellular data, any tracking site needs to load instantly and deliver highly localized information. I recently launched CoxOutage.us to map and track Cox Communications disruptions. Here is a breakdown of the technical and SEO strategies I used to build it. Performance & Traffic Handling Outage trackers face a unique challenge: they get zero traffic when things are fine, and massive, sudden spikes the minute a service goes down. Aggressive Caching: I implemented LiteSpeed Cache combined with Memcached for object caching. This ensures that database queries are kept to an absolute minimum when a sudden wave of users hits the site. Edge Delivery: Everything sits behind Cloudflare for DNS management and edge-level caching, ensuring the server (hosted via InterServer) doesn't get overwhelmed during regional outages. Scalable SEO & Routing Architecture The biggest hurdle was capturing local search intent accurately. Hyper-Specific URL Slugs: Initially, you might think to use a simple routing structure like /los-angeles . However, I found that using full keyword slugs—such as /cox-outage-los-angeles —significantly boosted visibility and search performance. Automated Indexing & Schema: I utilized the Google Indexing API to push new city landing pages instantly. Paired with Rank Math, the site generates precise schema markup so search engines understand the real-time nature of the status updates. Looking Forward Right now, the focus is on scaling out the localized landing pages and refining the automated reporting pipeline. If you have experience building high-traffic, real-time alert systems or handling sudden traffic spikes, I’d love to hear your approach. Check out the live project here: CoxOutage.us Feedback and suggestions are always welcome!
AI 资讯
curl your own homepage. That is all ChatGPT sees.
Run this against your site right now: curl -s https://yoursite.com | grep -o "<h1[^>]*>.*</h1>" If nothing comes back, or you get an empty <div id="root"> , then large parts of the internet cannot read your site. Not "reads it poorly". Cannot read it. I do this on every site we take over, and the result surprises people often enough that it is worth writing down. What the test is actually showing curl does exactly one thing: it fetches HTML and stops. It does not run JavaScript. It does not wait for hydration. It does not call your API. That is also what a large number of crawlers do. Googlebot is the exception people think of, and it is genuinely good: it fetches, queues the page, and renders it with a headless browser later. Client rendered content usually gets indexed eventually. The AI crawlers are a different story. As of now, the major ones (GPTBot, ClaudeBot, PerplexityBot, and friends) largely do not execute JavaScript. They fetch the HTML, take what is in it, and move on. Whatever your framework paints after the bundle loads is invisible to them. So curl is a decent proxy for the floor: if your content is not in that response, assume a meaningful slice of automated readers never see it. Why this got worse recently For years the bet was reasonable. Google renders JS, Google is search, so client rendering was survivable. Then a chunk of discovery moved to assistants. People ask ChatGPT for a recommendation instead of scrolling ten blue links. If the model cannot read your page, you are not in the answer, and there is no page two to be on. For a marketing site this is the whole ballgame. For a small business it is worse, because the queries that matter ("web designers in X", "who does Y near me") are precisely the ones people now ask an assistant. Three ways to check properly 1. Raw HTML, by word count. curl -s https://yoursite.com | wc -c # total bytes curl -s https://yoursite.com | \ sed 's/<script[^>]*>.*<\/script>//g' | \ sed 's/<[^>]*>/ /g' | wc -w # actu
AI 资讯
How Much Does a Website Really Cost? A Breakdown for Non-Developers (and the Devs Who Have to Explain It to Them)
If you've ever built a site for a client, a friend, or your own side project, you've had this conversation: "So... how much would a website cost?" And you've answered with "it depends" — which is true, but useless without context. So here's the breakdown I wish I could just link people to instead of explaining from scratch every time. First: "Website" Is Not One Thing If you've ever built a site for a client, a friend, or your own side project, you've had this conversation: "So... how much would a website cost?" And you've answered with "it depends" — which is true, but useless without context. So here's the breakdown I wish I could just link people to instead of explaining from scratch every time. A landing page and a custom marketplace platform are both "websites" the same way a bicycle and a truck are both "vehicles." Different build process, different skillset, different price tag. Once you separate by type, the numbers actually make sense: Type Typical Range Landing Page / One-Pager $500 – $3,000 Multi-Page Business Site $1,500 – $8,000 E-Commerce Store $2,000 – $20,000+ Custom Web App / Platform $10,000 – $100,000+ The Build-Method Question (This Is the Part Devs Actually Care About) No-code builders (Wix, Squarespace): $15–$50/month. Fast to ship, fine for a hypothesis test. The tradeoff is architectural debt you don't see until you hit it — custom logic, advanced SEO control, and scaling all get harder or impossible without a full platform switch. WordPress / CMS: $50–$500/year for platform + plugins, plus dev time. Flexible, huge plugin ecosystem, no vendor lock-in — but every convenience plugin is also a maintenance and security surface you now own. Custom-coded: starts around $1,000, no real ceiling. This is the only route when requirements exceed what a template or plugin can do — unusual functionality, real performance constraints, or a design that isn't achievable off-the-shelf. The trap: a $20/month builder that gets outgrown in 18 months and rebuilt
AI 资讯
Technical SEO Every Developer Should Know Even If You're Not a Marketer
Most developers treat SEO as "someone else's job" — a marketing concern that happens after the site ships. But a huge chunk of SEO is actually decided at the code level, long before a marketer ever touches the content. If you're building sites — for clients, for yourself, or as side projects — a few technical fundamentals can make or break how discoverable that work ever becomes. Here's the technical SEO checklist I use when reviewing or building sites, from a digital marketing + web perspective. Core Web Vitals Aren't Optional Anymore Google uses three core metrics as direct ranking signals: LCP (Largest Contentful Paint) — how fast the main content loads INP (Interaction to Next Paint) — how responsive the page feels to input CLS (Cumulative Layout Shift) — how visually stable the page is while loading A site can have perfect content and still underperform in search if these numbers are bad. Common culprits: unoptimized images, render-blocking JS, and layout shifts from late-loading ads or fonts. Quick wins: Lazy-load offscreen images Serve modern image formats (WebP/AVIF) Reserve space for dynamic content (ads, embeds) to avoid layout shift Defer non-critical JavaScript Structured Data Is a Developer Task, Not a Marketing One Schema.org markup (JSON-LD is the recommended format) helps search engines — and increasingly AI-driven search summaries — understand what's actually on the page: is this a product, an article, a recipe, an FAQ? Sites with well-implemented structured data are more likely to get rich results (star ratings, FAQ dropdowns, breadcrumbs) in search — which directly impacts click-through rate even without a ranking change. If you're building a site and skip this step, you're leaving visibility on the table for something that's usually a few hours of implementation work. Rendering Strategy Affects Crawlability Client-side rendered (CSR) React/Vue apps can still get indexed, but it's inconsistent and slower than server-rendered or statically generate
开发者
Next.js SEO: An App Router Playbook That Ranks
Next.js gives you almost everything you need to rank well out of the box, and most teams still ship sites that Google struggles to read. The framework is not the problem. The problem is that SEO gets treated as a final checkbox instead of an architectural decision, so metadata ends up scattered, content renders on the client, and the structured data never gets written. The App Router changed how all of this works. The generateMetadata function, file-based conventions for sitemap.ts and robots.ts , and Server Components as the default each remove a class of SEO bug that used to be common in the Pages Router. But they only help if you use them deliberately. This is the playbook we follow when we build a Next.js site that has to rank, the same approach behind this site. It is opinionated and concrete: where to put metadata, which files to ship, how to handle structured data and multiple languages, and why Core Web Vitals is an SEO feature rather than a performance afterthought. None of it requires a plugin. Render on the server so Google sees real HTML The single biggest SEO win in Next.js is also the easiest to get wrong: make sure your indexable content is in the HTML on the first byte. Googlebot will execute JavaScript, but it does so on a delay and with no guarantees. Content that depends on a client-side fetch can be missed, indexed late, or indexed empty. Server Components are the default in the App Router, so this is mostly about not opting out. Keep 'use client' at the leaves of your tree, on the button that needs an onClick , not on the page that holds your copy. Fetch your data in the Server Component and pass the rendered result down. If you can view the page source and read your headline and body text without JavaScript, you are in good shape. Master the Metadata API instead of next/head In the App Router you never touch next/head . Every route exports either a static metadata object or a dynamic generateMetadata function, and Next.js merges and d
AI 资讯
Generative Engine Optimization: Getting Cited by AI
For fifteen years the goal of search was simple: rank on page one and earn the click. That contract is breaking. More people now ask ChatGPT, Perplexity, Gemini and Google's AI Overviews a question and read the synthesized answer without ever visiting a blue link. If your brand is not in that answer, you are invisible to them, no matter how well you rank. This is the gap Generative Engine Optimization closes. GEO is the practice of structuring your content and your site so that large language models retrieve it, trust it, and cite it when they answer a question in your space. It overlaps with SEO but it is not the same job. One study from the GEO firm Brandlight found the overlap between top Google links and the sources AI tools actually cite has fallen from around 70% to under 20%, and the gap is widening. The payoff is real, not theoretical. AI referrals convert far better than cold organic traffic because the visitor arrives pre-qualified by the answer that sent them. Vercel has reported that roughly 10% of new signups now come from ChatGPT, and LLM-referred visitors have been measured converting at 15.9% from ChatGPT against under 2% for typical organic search. Here is how we approach GEO for the sites we build. SEO earns clicks, GEO earns citations The mental shift is the whole game. Traditional SEO optimizes a page to win a position in a ranked list of links. GEO optimizes a passage to be quoted inside a generated answer. A model does not "rank" your page; it retrieves chunks of it, weighs them against everything else it pulled, and decides whether to repeat your claim and name you as the source. That changes what good content looks like. Models favor passages that are self-contained, factual, and quotable: a clear definition, a specific number, a direct answer in the first sentence. Burying the answer three paragraphs down, the way you might to keep a reader scrolling past ads, is exactly wrong here. Lead with the claim, then support it. Write so a model can
AI 资讯
Migrating to Next.js 16: A Practical Upgrade Guide
Next.js 16 is the biggest release since the App Router landed, and the upgrade is not a one-line bump. The caching model changed shape, params and searchParams are now promises everywhere, Turbopack runs your builds by default, and middleware.ts is on its way out in favour of proxy.ts . None of that is hard on its own. The trouble is that the changes touch almost every dynamic route in a real app at once, so a rushed upgrade tends to fail in a dozen small places rather than one obvious one. We run this site on Next.js 16, and we have moved client projects across the same gap. The pattern that works is boring and reliable: read the codemod output, fix the async APIs first, decide your caching strategy deliberately instead of letting the old implicit behaviour leak back in, then clean up the renamed files. This guide walks through that order, with the specific gotchas that cost the most time. If you are still on Next.js 13 or 14, the same steps apply, you just have more of them to work through. Run the codemod, then read what it could not fix Start with the official upgrade command. It pulls the right versions of next , react , and react-dom , and runs the codemods that handle the mechanical rewrites for you. npx @next/codemod@latest upgrade latest The codemod is good, but it is not magic. It will happily wrap your params access in await where the shape is obvious, and skip anything indirect, a params object passed into a helper, destructured two functions deep, or read inside a generateMetadata you wrote by hand. Treat the codemod as the first 80%, not the finish line. Once it has run, do a clean install and a type check before you touch anything else. With typescript.ignoreBuildErrors set, as it is on many projects, the build will not catch these for you, so run the type checker yourself. rm -rf node_modules .next && npm install && npx tsc --noEmit The errors that come back are your real to-do list. Most of them will be the async API change, which is the next sectio
AI 资讯
I Built 143 Free Browser Tools — Then Added 144 Step-by-Step Guides for Every Single One
Last month I shared how I built 143 free online tools that run 100% in your browser — no signup, no uploads, no watermarks. That post got a great response (and a lot of "how is this free?" comments — answer: it stays free because files never touch a server, so there are no processing costs). Today's update: every single tool now has a full guide series. What's new 144 how-to articles — one per tool — live at toolfyra.vercel.app/blog : Step-by-step guides — every input explained, common pitfalls, pro tips Real competitor comparison tables (we scraped and analyzed who ranks for what, and where their tools annoy users with account walls) FAQ sections with schema markup so answers surface directly in search and AI assistants Unique generated illustrations per article Smart related-tools clusters — finish one task, the next tool is one click away Why guides for calculator tools? Because "how to use a calculator" is what people actually search for. Tools win clicks; guides win trust and rankings . Each article is built from real search-engine data: live SERP results, keyword expansions, and competitor FAQ analysis — zero guesswork. The engineering side (for the dev readers) Every tool is a single HTML page with vanilla JS — calculators run client-side, file tools use Canvas/FileReader APIs The blog is generated (Python build script): schema.org BlogPosting + FAQPage + BreadcrumbList, per-post OG images as optimized SVGs, canonical URLs, sitemap + IndexNow pings on every deploy New site-wide: instant search (type "pdf" → live results dropdown, keyboard-first: / to focus, ↑↓ to navigate), a Tools dropdown with 11 categories, and a mobile hamburger panel — all vanilla JS, no dependencies Privacy by architecture: there is literally no upload endpoint to breach What's next More waves of content (FAQ, mistakes-to-avoid, and comparison articles for every tool) A batch of new tools from our demand-research pipeline (we score thousands of real search phrases before writing a line
AI 资讯
Are websites still relevant today for the average person?
The average person does not wake up choosing between "website" and "no website." They choose between opening an app, asking ChatGPT, tapping a map result, or typing a URL. Websites are still relevant when those paths need a place to land: confirm a business is real, compare two options side by side, pay for something, book a slot, or read instructions that outlive a chat thread. They become irrelevant when the destination is slow, broken, or empty, because the next tap is always available. That shift is what agencies miss when the brief says "we need a website" as if presence alone still wins. In 2026 a site is less often where people first find you and more often where they check you are real, pay, or book after they found you somewhere else. Your job is not only to exist on the open web. It is to be the destination that still earns the click when someone is ready to act. What does "still relevant" mean after apps and AI answers? Relevance is not traffic volume. Pew Research analysis of tens of thousands of Google searches in 2025 found users clicked a traditional result on only about 8% of queries that showed an AI Overview, versus about 15% without one. Casual browsing traffic is thinner. The visits that remain often carry sharper intent: someone already heard a name and wants proof, or they are ready to buy and need a form that works on mobile. Google's Search team has argued the same restraint in public: websites are not obsolete, but they are not mandatory for every goal ( Search Off the Record ). Whether you need one depends on audience, control, and what you are trying to deliver. For many businesses the answer is still yes, because apps and social profiles do not replace a site you control when AI systems and search features need structured facts to cite. The relevance question therefore splits in two. Is the open web still where machines and sceptical humans go to verify claims? Yes, for most categories. Is every marketing site still the main place people
AI 资讯
Why your hreflang tags are being ignored
Originally published on the WeLocale blog . Most SEO work is a matter of degree. You improve a title, you gain a little. hreflang is not like that. It either forms a valid set that search engines act on, or it does nothing at all, and the failure is completely silent. No warning, no penalty, no message in Search Console telling you the tags you carefully added are being discarded. We build a translation widget, which means we generate hreflang tags for other people's sites. This post is what we have learned about why they get ignored, including the parts where our own approach has real limits. The rule that breaks most setups hreflang is not a property of a page. It is a property of a set of pages, and every page in that set has to agree. If your English page says the German version is at /de/ , the German page has to say the English version is at / . If it does not, the declaration is one-way, and one-way declarations get dropped. Google calls these return links and treats their absence as a reason to distrust the whole set. This is why hreflang fails in a way that feels unfair. Every individual page looks correct when you inspect it. The problem only exists in the relationship between pages, which is exactly the thing you cannot see by viewing source on one URL. The corollary catches people too: each page must list itself . A German page whose tags mention English and French but not German is an incomplete set. Incomplete sets get dropped. The other four failure modes en-UK. The language code comes from ISO 639-1 and the region code from ISO 3166-1. In ISO 3166-1 the United Kingdom is GB. There is no UK. The tag is silently invalid, and it is easily the most common hreflang error on the web. Same class of mistake: lowercase regions, uppercase languages, and a region with no language at all. URLs that redirect. hreflang has to point at the final URL. If it points at http and you redirect to https, or it omits a trailing slash your server adds, the target is a redir