Okay, I’ve analyzed the provided JSON data. it appears to be a configuration object for a website, likely 20min.ch, a Swiss news platform. Here’s a breakdown of the key sections and what they represent:
1. Top-Level Structure:
pageProps: This is the most crucial part. It contains data specific to the current page being rendered.
menu: Defines the website’s navigation menu structure.
appState: Contains details about the current page’s context (e.g., section, type).
adState: Related to advertising configuration for the page.
pageTheme: Indicates the overall theme of the page (e.g., “news”). _NSSP: Likely a flag indicating that this page uses Server-Side Props (SSP) in Next.js (a React framework).
page: The route of the current page.
query: The query parameters passed to the page.
buildId: The build ID of the application.
runtimeConfig: Contains configuration settings that are available at runtime.
2. pageProps.menu (Navigation Menu):
This section defines the structure of the website’s navigation menu. Its a nested array of objects, where each object represents a menu item.
type: Indicates the type of menu item:
channel: A link to a category or section within the website.
link: An external link.
content: A link to a specific content page. id: A unique identifier for the menu item.
label: The text displayed for the menu item.
url: The URL the menu item links to.
target: (Only for link types) Specifies the link target (e.g., blank for opening in a new tab).
items: An array of child menu items, creating a hierarchical menu structure.
Example Menu Items:
{"type":"channel","id":1,"label":"News","url":"https://www.20min.ch/news","items":[]}: A link to the “news” section of the website.
{"type":"channel","id":269,"label":"Phils Fails","url":"/video/phils-fails","items":[]}: A link to a sub-section called “Phils Fails” under the “Unterhaltung” (Entertainment) section.
{"type":"link","id":"https://www.deal.ch","label":"Deal.ch","url":"https://www.deal.ch","target":"blank","items":[]}: an external link to the “Deal.ch” website, opening in a new tab.
{"type":"content","id":226552289443,"label":"Live TV","url":"https://www.20min.ch/video/live-tv","items":[]}: A link to the “live TV” content page.
3. appState:
siteArea: The main area of the website the user is currently viewing (e.g., “news”).
pageType: The type of page being displayed (e.g., “article”).
4. adState:
pageType: the type of page for advertising purposes (e.g., “article”).
section: The section of the website for advertising targeting (e.g., “wirtschaft” – Economy).
adsEnabled: A boolean indicating whether ads are enabled on this page.
5. runtimeConfig:
This section contains various configuration settings for the application, separated by language (de for German, fr for French).It includes:
application: The name of the application (“20min”).
domainName: The domain name (“20min.ch”).
dateFormat: Date and time formatting settings.
ogSiteName: The site name for Open Graph meta tags (used for social sharing).
localeCode: The locale code (e.g., “de-CH” for German Switzerland).
language: The language of the site.
languages: An array of supported languages.
languagePaths: The URLs for different language versions of the site.
tenantId: An ID for the tenant.
embedUrls: URLs for embedded content, like the video player.
socialMedia: Links to social media profiles.
gdpr: Links to GDPR information.
agb: Links to terms and conditions.
imprint: Links to the imprint page.
sitemap: Links to the sitemap.
email: The email address for the website.
channelUrl: URLs for specific channels.
telephone: The telephone number for the website.
social: Links to social media profiles. region: Links to regional versions of the website. nativeApps: Information about the native apps.
canonicalBaseUrl: The base URL for canonical urls.
tenantName: The name of the tenant.
accounts: URLs for account-related actions.
newsletter: URLs for newsletter subscriptions.
frontPagePath: The path to the front page.
frontCategory: The category of the front page. games: A list of available games.
advertiseSheetLink: A link to the advertisement sheet.
advertisementLegalDocLink: A link to the advertisement legal document.
radioWidgetLink: A link to the radio widget.
topicCategoryHref: A link to the topic category overview.
dailyNewsletter: Information about the daily newsletter.
6.page and query:
page: /story/[slug] – This indicates that the page is a dynamic route, where [slug] is a placeholder for a specific story’s slug (a URL-pleasant identifier).
* query: {"slug":"trotz-trump-us-wirtschaft-schrumpft-im-ersten-quartal-um-03-prozent-103334345"} – This shows that the slug for this particular page is “trotz-trump-us-wirtschaft-schrumpft-im-ersten-quartal-um-03-prozent-103334345”. This likely translates to “Despite Trump, US economy shrinks by 0.3 percent in the first quarter”.In Summary:
This JSON data provides the configuration and content information needed to render a specific news article page on the 20min.ch website. It defines the navigation menu,the page’s context,advertising settings,and various runtime configurations,including language-specific settings. The dynamic route and query parameters indicate that the page displays an article about the US economy shrinking in the first quarter, despite Trump.
Decoding 20min.ch: An Inside Look at a Swiss News Platform’s Architecture
We sat down with Anya Sharma, a lead web developer specializing in news platform architecture, to dissect the inner workings of 20min.ch, a popular Swiss news website. Using publicly available data, we uncovered how the site structures its content, navigation, and advertising.
Time.news: Anya, thanks for joining us. We have some captivating data revealing the backend structure of 20min.ch. First off, the analyzed code highlights a “pageProps” section. What does this signify in the broader context of website development, especially for a news site?
Anya sharma: “pageProps” is essentially the package of information needed to render a specific page. This package includes everything from the main navigation (“menu”) down to advertising configurations (“adState“) and the overall theme of the page (“pageTheme”).For a news site like 20min.ch, this streamlined approach is critical. It allows them to efficiently deliver a consistent user experience across possibly thousands of articles and sections. The fact that they are using Server-Side Props (SSP) via Next.js (NSSP parameter) also means better SEO and performance for their users.
Time.news: Let’s talk about the “menu” structure. We see different types of menu items: “channel,” “link,” and “content.” Can you explain the distinctions and why a news site might use these?
Anya Sharma: Absolutely. “Channel” typically points to a broad section of the site, like “News” or “Sports.” “Link” is for external destinations, which in the analysis, as seen with the link to Deal.ch, opens in a new tab (target="_blank"). And “content” would link to specific articles or multimedia pieces within 20min.ch. This tiered system allows for both easy navigation within the core news content and strategic promotion of partner sites or related services. This hierarchical structure is quite common for large websites with diverse content offerings.
Time.news: The code also mentions “adState.” How crucial is this section to a modern news platform, especially concerning revenue and user experience?
Anya Sharma: “adState” is what keeps the lights on for most online news outlets. In this specific example, it defines the ad settings, what page type the ad would work on and whether ads are enabled on a page. Getting “adState” right is a delicate balancing act. The goal is to generate revenue through advertising while not ruining the user experience with intrusive or irrelevant ads.The adState section allows 20min.ch to configure advertising based on the pageType and section, indicating it can target ads based on content. If ads are enabled for the page, then the page serves ads. The JSON data indicates that adsEnabled boolean value dictates this and shows clever ad management.
Time.news: The “runtimeConfig” section seems to hold a wealth of information, especially regarding language settings and legal information such as links to GDPR and AGB. What’s the meaning of this section?
Anya Sharma: The “runtimeConfig” section is the backbone for managing the website’s behavior across different languages and regions. Especially in Switzerland, which has multiple official languages, having the runtimeConfig separated by language (de and fr) is very important. this gives them the flexibility to tailor the site’s experience to specific locales.The data specifies parameters such as application, domainName, and language. The same applies to the legal information (GDPR,AGB,Imprint),contact details (email,channelURL,telephone),and social media links. Centralizing all this information makes it easier to maintain consistency and compliance across the entire platform. The listing of available games and radio widgets under the runtimeConfig suggests possible integration with other types of content as well.
Time.news: the “page” and “query” fields show a dynamic route for articles: /story/[slug]. What does this imply about how 20min.ch manages its vast library of articles?
Anya Sharma: The /story/[slug] structure points to a very efficient approach. Here, [slug] is a placeholder for a unique, URL-friendly identifier for each article. This approach enables the news platform to generate URLs for a large number of articles in an organized manner. Think of it like a perfectly organized filing system. The query section, which provides a specific slug like “trotz-trump-us-wirtschaft-schrumpft-im-ersten-quartal-um-03-prozent-103334345”, gives us a peek into a particular article’s title and content.This dynamic routing is great for SEO and makes it easier to share specific articles on social media.
Time.news: Anya, valuable insights as always. Thanks for shedding light on the architectural decisions behind 20min.ch.
Anya Sharma: My pleasure! Always happy to geek out about website architecture.