# SearchConsolePage > A Search Console report - clicks, impressions, CTR and position tiles that drive the chart, plus queries, pages, countries and devices. Source: https://docs.nasaqui.com/components/search-console-page ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/search-console-page.json ``` The Search Console page shows how a site performs in Google Search. Four `MetricTiles` (clicks, impressions, CTR, average position) select the metric a `TimeSeriesPanel` charts, with the previous period as comparison. Tabs hold `SearchPerformanceTable` for queries and pages, `GeoList` for countries and a devices `BreakdownTable`. Average position is lower-is-better everywhere. Until connected it shows `AnalyticsConnect`; the name is text, not a logo. ## When to use - SEO reporting for a verified site. - Any host that reads the Search Analytics API. ## When not to use - Traffic on your site: use [`GoogleAnalyticsPage`](https://docs.nasaqui.com/components/google-analytics-page). - Rank tracking by keyword over time: compose [`TimeSeriesPanel`](https://docs.nasaqui.com/components/time-series-panel). ## Import ```tsx import { SearchConsolePage } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx import { SearchConsolePage } from "@fadymondy/nasaq/web"; import { useState } from "react"; export function Seo({ service, data }: { service: React.ComponentProps["service"]; data?: React.ComponentProps["data"] }) { const [period, setPeriod] = useState(28); return {}} onDisconnect={async () => {}} />; } ``` ## Anatomy ``` SearchConsolePage AnalyticsPageFrame MetricTiles selectable; drives the chart TimeSeriesPanel clicks | impressions | CTR | position Tabs (underline) Queries | Pages | Countries | Devices ``` ## API ### SearchConsolePage | Prop | Type | Default | Description | | --- | --- | --- | --- | | `service` | `IntegrationService` | required | The source and its state; anything but `connected` shows the connect screen. | | `data` | `…Data` | none | The report. While it is undefined the page shows skeletons. | | `period / onPeriodChange` | `number / (n) => void` | required | The reporting period in days (hours for the APM page). | | `loading` | `boolean` | `false` | Skeletons. | | `error / onRetry` | `ReactNode / () => void` | none | Shows an error with a retry button. | | `onRefresh / refreshing / updatedAt` | `() => Promise / boolean / date` | none | Refresh button and the updated time. | | `onConnect / onDisconnect / onSelectAccount` | `async callbacks` | required | OAuth and account picker hooks; the host does the real work. | | `className` | `string` | none | Extra classes on the root. | | `site` | `string` | none | The verified site, for the subtitle. | | `onRowClick` | `(row, kind) => void` | none | Called when a query or page row is chosen. | | `labels / frameLabels` | `Partial<…>` | none | Page strings and the shared header strings. | ### SearchConsoleData `summary` (clicks, impressions, ctr as a fraction, position; each `{ value, previous?, trend? }`), `series` (rows of `date`, `clicks`, `impressions`, `ctr`, `position`), `previousSeries?`, `queries`, `pages` (`SearchPerformanceRow[]`), `countries` (`GeoRow[]`) and `devices` (`BreakdownRow[]`). ## Examples Open a query: ```tsx import { SearchConsolePage, type IntegrationService } from "@fadymondy/nasaq/web"; export const Drill = ({ service }: { service: IntegrationService }) => ( {}} onRowClick={(row, kind) => console.log(kind, row.label)} onConnect={async () => {}} onDisconnect={async () => {}} /> ); ``` Sign-in expired: ```tsx import { SearchConsolePage } from "@fadymondy/nasaq/web"; export const Expired = () => ( {}} onConnect={async () => {}} onDisconnect={async () => {}} /> ); ``` ## Accessibility The page has one `h1`; tabs follow the WAI-ARIA tabs pattern (arrow keys move, the panel is labelled by its tab). Charts and tables carry text alternatives. Disconnect asks for confirmation. Localise every string you override through `labels`. ## RTL & i18n - The whole page mirrors; charts run right to left. - URLs, paths and identifiers stay left-to-right inside Arabic text. - Every figure uses the active locale with Western digits and is bidi-isolated (`Num`), so `+12.4%` keeps its order in Arabic. - Queries follow their own direction; page URLs stay left-to-right. ## Styling & tokens - Colours come from tokens (`--primary`, `--nq-success`, `--nq-warning`, `--nq-danger`, `--nq-tag-*`); never pass raw hex. - Composed from tokens only; extend with `className`. ## Do / Don't - Do give `position` a `previous` value; a lower number shows as an improvement. - Do pass CTR as the API returns it. - Don't draw a Search Console logo yourself; use only the official asset. ## Related - [`metric-tiles`](https://docs.nasaqui.com/components/metric-tiles) - [`time-series-panel`](https://docs.nasaqui.com/components/time-series-panel) - [`search-performance-table`](https://docs.nasaqui.com/components/search-performance-table) - [`geo-list`](https://docs.nasaqui.com/components/geo-list) - [`breakdown-table`](https://docs.nasaqui.com/components/breakdown-table) - [`analytics-connect`](https://docs.nasaqui.com/components/analytics-connect) ## Lab https://docs.nasaqui.com/?path=/docs/components-seo-pages-search-console--docs ## Code ### React ```tsx import { SearchConsolePage } from "@fadymondy/nasaq/web"; import { useState } from "react"; export function Seo({ service, data }: { service: React.ComponentProps["service"]; data?: React.ComponentProps["data"] }) { const [period, setPeriod] = useState(28); return {}} onDisconnect={async () => {}} />; } ``` ### shadcn ```tsx import { SearchConsolePage } from "@/components/ui/search-console-page"; import { useState } from "react"; export function Seo({ service, data }: { service: React.ComponentProps["service"]; data?: React.ComponentProps["data"] }) { const [period, setPeriod] = useState(28); return {}} onDisconnect={async () => {}} />; } ``` ### Vue ```vue ``` ### Blade ```blade @php $service = [ 'id' => 'gsc', 'name' => 'Google Search Console', 'scopes' => [['id' => 'webmasters.readonly', 'label' => 'Read search performance', 'required' => true]], 'status' => 'connected', 'connectedAs' => 'owner@nasaq.dev', ]; $data = [ 'summary' => [ 'clicks' => ['value' => 9420, 'previous' => 8610, 'trend' => [300, 310, 320, 330, 340, 350]], 'impressions' => ['value' => 214000, 'previous' => 198000, 'trend' => [7000, 7200, 7400, 7500, 7700, 7900]], 'ctr' => ['value' => 0.044, 'previous' => 0.0435, 'trend' => [0.043, 0.0435, 0.044, 0.044, 0.0442, 0.044]], 'position' => ['value' => 11.8, 'previous' => 12.6, 'trend' => [12.6, 12.4, 12.2, 12, 11.9, 11.8]], ], 'series' => [ ['date' => '2026-09-27', 'clicks' => 320, 'impressions' => 7300, 'ctr' => 0.0438, 'position' => 11.9], ['date' => '2026-09-28', 'clicks' => 340, 'impressions' => 7700, 'ctr' => 0.0442, 'position' => 11.8], ['date' => '2026-09-29', 'clicks' => 350, 'impressions' => 7900, 'ctr' => 0.0443, 'position' => 11.7], ], 'previousSeries' => [ ['date' => '2026-08-30', 'clicks' => 290, 'impressions' => 6900, 'ctr' => 0.042, 'position' => 12.7], ['date' => '2026-08-31', 'clicks' => 300, 'impressions' => 7000, 'ctr' => 0.0428, 'position' => 12.6], ['date' => '2026-09-01', 'clicks' => 305, 'impressions' => 7100, 'ctr' => 0.043, 'position' => 12.5], ], 'queries' => [ ['id' => 'q1', 'label' => 'nasaq design system', 'clicks' => 1820, 'impressions' => 22000, 'position' => 3.2, 'previousClicks' => 1500, 'previousPosition' => 3.9], ['id' => 'q2', 'label' => 'arabic rtl components', 'clicks' => 960, 'impressions' => 18000, 'position' => 6.8, 'previousClicks' => 1010, 'previousPosition' => 6.1], ], 'pages' => [ ['id' => 'p1', 'label' => 'https://nasaq.dev/', 'clicks' => 3100, 'impressions' => 41000, 'position' => 4.1, 'previousClicks' => 2800, 'previousPosition' => 4.4], ['id' => 'p2', 'label' => 'https://nasaq.dev/docs', 'clicks' => 1500, 'impressions' => 26000, 'position' => 7.3], ], 'countries' => [ ['code' => 'SA', 'value' => 4100, 'previous' => 3700], ['code' => 'EG', 'value' => 2300, 'previous' => 2400], ], 'devices' => [ ['id' => 'mobile', 'label' => 'Mobile', 'value' => 6100, 'previous' => 5500], ['id' => 'desktop', 'label' => 'Desktop', 'value' => 3100, 'previous' => 2900], ], ]; @endphp ``` ### HTML + Alpine ```html

Search Console

How nasaq.dev performs in Google Search

Connected Connected to owner@nasaq.dev

Performance

Select a tile to chart it. Average position improves as it gets lower.
Total 1,010 +12.8%

Search queries

```