News website design: architecture, speed and SEO

To design a news website, think editorial first and visual design second: a home page that ranks the information, dated and signed articles, pages that are fast on mobile, and search optimization that follows Google’s guidelines for news publishers. This guide goes through each step.

Our business is websites for accommodation and restaurants, not media. This guide applies to the online press the principles we follow for a hotel, relying on Google’s help pages rather than on audience statistics.

News website architecture: lead stories, latest, sections

The structure of an online news site rests on three feeds. “Lead stories” puts a few articles chosen by the editors up front, with a large image and a headline true to the content. “Latest” lists the newest articles, most recent first, each with its time. Sections (economy, culture, sports…) repeat the pattern: one featured article, then a list.

For news website design, Google News’s technical guidelines set rules that serve the reader as much as the crawler:

• Stable section addresses. When they change often, Google News may stop crawling the new articles.
• Real HTML links on section pages. The crawler follows neither links placed on an image nor links that exist only in JavaScript; the link text repeats the headline of the article.
• One permanent address per article. The full text has its own page, in HTML (not injected by JavaScript), and the article is never republished at a new address.

The same guidelines ask you not to block article folders (robots.txt, robots tags or headers), to make the headline and the publication time easy to spot, and to create a separate publication for each language. On the editorial side, one main section per article is enough, completed by topic pages for subjects that keep coming back (an election, a festival).

The article page: date, author, image, related links

Readers rarely arrive through the home page: they open an article from a search engine or a social network. The page must therefore stand on its own, in this order:

1. A faithful headline and a summary. The Google News policies reject previews that promise more than the article delivers, and Discover recommends avoiding headlines that exaggerate or hide the information needed to understand the subject.
2. A publication date and an update date. With explicit labels (“Published on”, “Updated on”). Google asks that the displayed date and the one in the markup match, that dates be accurate and never in the future, and advises limiting the other dates on the page.
3. A byline that leads to an author page. The documentation on helpful content invites you to make the author evident to the reader, with a byline that leads to information about them, and lists fake author profiles among deceptive practices.
4. A representative image. In several formats (16:9, 4:3, 1:1) for article markup; for Discover, Google recommends at least 1,200 px wide and the max-image-preview:large directive.
5. Readable text. Subheadings, alt text and AA-level contrast under the WCAG 2.2 rules (4.5 to 1 for body text).
6. A breadcrumb trail and related articles. Related articles are chosen by subject or by topic; the trail is marked up with BreadcrumbList.

NewsArticle is the schema.org type intended for a news item. According to Google’s page on article structured data, no property is required: you add those that match the content (headline, author, datePublished, dateModified, image), with dates in ISO 8601 format (Google recommends including the time zone) and one author entry per author, with the name only and the address of their page.

Speed and mobile: Core Web Vitals

Google strongly recommends aiming for good Core Web Vitals, which measure the loading, responsiveness and stability of the page. The “good” thresholds from web.dev are assessed at the 75th percentile of visits. Each metric has its own pitfalls on a news site:

Two points concern news publishers above all. First, advertising: its slot keeps a fixed size, even with no ad, otherwise the page jumps. Second, the “Latest” feed: for a list that updates itself, web.dev advises letting the reader trigger the loading of new content (for example a “See new articles” button), so that no shift catches them by surprise.

Mobile counts double: Google indexes the mobile version of pages. It must carry the same main content, the same headings, the same structured data, the same title and meta description, and the same alt text. The main content must not wait for a click or a swipe to load.

Google News and search: what is asked

No registration is needed to be considered. According to Google’s help, publishers are considered automatically for “Top stories” (news featured in the search results) and the News tab, provided the content is of good quality and follows the policies; Google discovers news content through its search technologies. Ranking depends on relevance, prominence, freshness, location and language, among other things, and no payment improves it. Eligible content is not guaranteed to rank well, though.

The Google News policies ask for:

• Transparency: clear dates and bylines, information about the authors, the publication and the publisher, the company or network behind the content, contact details.
• Controlled advertising: it does not take precedence over the content, and sponsored content is never presented as independent; any financial or affiliate interest is disclosed.
• Honest previews: the headline and the excerpt promise nothing the article does not deliver.

The Google News sitemap can be a separate file or extend your usual sitemap: Google accepts both, and the separate file makes tracking in Search Console easier. It helps the crawler find your articles faster. Only articles created less than two days ago go in it, with at most 1,000 news:news tags per file; each contains the name of the publication and its language, the date of first publication and the title. An RSS or Atom feed does not replace it: it covers only recent addresses and carries no news information (sitemap formats). As for Discover, no particular markup is required: you must be indexed and follow the policies, with no guarantee of display.

Paywalled content and search optimization

When part of an article is reserved for subscribers, Google must understand that it is a paywall and not different content shown to the crawler, which would be cloaking, against the spam policies. The markup described in Google’s documentation on paywalled content serves to tell them apart. Minimal example for a NewsArticle, to adapt:

{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "Article headline",
  "isAccessibleForFree": false,
  "hasPart": {
    "@type": "WebPageElement",
    "isAccessibleForFree": false,
    "cssSelector": ".subscribers-only"
  }
}

The reserved part carries the class subscribers-only in the page. isAccessibleForFree is the required property; hasPart and its cssSelector, recommended, point to the paid section. The selector accepts only classes and sections do not nest. To limit what Google displays, snippet controls (data-nosnippet, max-snippet) apply, including to AI Overviews and AI Mode. On the reader’s side, keep the headline, the summary and the start of the text in the clear, and say in one sentence what is reserved.

To offer subscriptions and contributions without programming, Google provides Reader Revenue Manager, in the Publisher Center. You declare the publication there, provide proof of identity or of organization and a logo, then open a payment profile with bank details. The tool is offered in more than 40 countries: check yours.

Writing and publishing tools

Publishing speed depends on the writing tool, and search visibility on what it enforces. Four functions are worth demanding:

• Article templates with required fields (headline, summary, section, byline, image with alt text), so that the HTML, the markup and the sitemap come out without manual entry.
• Two separate dates: the update date changes only for a real modification.
• Draft, review, scheduled publishing and version history, with a mobile preview, since that is the version Google indexes.
• A visible correction note when a fact is corrected.

AI tools can help (subheadings, summaries) under human review. Google invites you to explain how content was produced, including with AI, when readers may wonder, and lists as spam the mass production of pages meant to manipulate ranking. Before the first article, test a page with the Search Console URL Inspection tool, measure LCP, INP and CLS on mobile with PageSpeed Insights, and check that no article folder is blocked.

For a hotel: the Journal

A hotel does not need a newsroom, but most of what precedes applies to its Journal: dated and signed articles, sorted by section, light pages on mobile, an up-to-date sitemap. The Hotel Web Design Journal (in French) applies them: publication and update dates, reading time, table of contents and marked-up breadcrumb trail. To choose topics, see what to put in a blog (in French); for the rest of an establishment’s search optimization, the page on natural SEO for hotels and restaurants (in French); to talk about it, the contact page (in French).

Frequently asked questions about news website design