1. What This Page Is For
The SEO (Search Engine Optimization) page configures metadata read by search engines (such as Google) and social messaging apps (such as LINE, Facebook, X, and Telegram) when your website is indexed or shared. It controls the brand's presentation in search engine result pages (SERPs) and social graph link previews, boosting organic discovery and click-through rates.
Settings on this page include the Site title (which also defines the browser tab text), Site description, Keywords, and the Shared link picture (Open Graph image / og:image).
2. Before You Begin
- Permission Requirements: You must have the 'SEO' permission in your staff role to view and edit SEO configuration. (Users without update permission see the page in read-only mode).
- Recommended Text Lengths:
- Site Title: Up to 100 characters (recommended under 60 characters to prevent Google from truncating with ellipsis).
- Site Description: Up to 300 characters (recommended under 160 characters for full snippet visibility on search engines).
- Keywords: Up to 500 total characters across all tags combined (comma-separated or tag chips).
- Social Share Graphic (og:image): Recommended size 1200 × 630 px (standard 1.91:1 aspect ratio), PNG, JPG, or WEBP up to 5 MB.
3. Page Layout and Components
From top to bottom, this page consists of the following sections:
- Page Header: Displays the title SEO, subtitle, and navigation breadcrumbs (Settings / Theme / SEO).
- Page Audit Bar: Displays the current configuration version, last updater name, updater type, and last update timestamp.
- Search Results Section (Search results): Contains 3 core text configuration inputs:
- Site title: Input field for the main page title.
- Site description: Textarea for the meta snippet description.
- Keywords: Tag chip entry input for search indexing tags.
- Shared Link Picture Section (Share picture): Dropzone for the social share preview banner (falls back to a branded logo card if omitted).
- Preview Section (Preview): Live dual-card preview comparing real-world rendering:
- Search result: Simulates a Google Search listing snippet.
- Shared link: Simulates a social media / chat card preview.
- Form Action Bar: Floating bottom bar with Cancel and Save buttons.
4. Search and Filters
There is no data search on this page. Instead, 2 interactive preview cards simulate real-world snippet appearances before saving:
| Preview Card | Simulated Environment | Visual Aspects Verified |
|---|
| Search result | Google SERP card | Verifies blue title length, favicon display, domain breadcrumb, and description line clamping. |
| Shared link | Social card (LINE/Facebook) | Verifies banner aspect ratio (1200 × 630 px), headline font weight, and summary readability. |
5. Data Table and Layout Cards
| Section | Field | Character Constraints | Default Fallback Behavior |
|---|
| Search results | Site title | Max 100 chars (Turns orange over 60, red over 100) | Falls back to system brand site name. |
| Search results | Site description | Max 300 chars (Turns orange over 160, red over 300) | Displays placeholder notice "No description yet". |
| Search results | Keywords | Max 500 characters total across all tags | No keywords rendered in HTML meta tags. |
| Share picture | Picture (og:image) | 1200 × 630 px recommended, max 5 MB | Generates a branded gradient card featuring your logo in your site's theme colour. |
Actions on the Shared Link Picture Card
| Action / Button | Appearance | Result When Clicked | Condition |
|---|
| Upload area | Horizontal rectangle frame | Opens native file browser or accepts dragged image files | Supports PNG, JPG, WEBP up to 5 MB |
| Change image | Grey button | Replaces the current graphic with a newly selected file | Visible when an image is currently set |
| Delete / Reset | Red trash can icon | Marks graphic for removal to fall back to the site logo card | Warns that saving will reset to site logo |
| Keep current picture | Blue text link | Discards the staged change and restores the currently saved image | Clickable before submitting the save request |
6. Step-by-Step Guide
- Navigate to Site look > SEO from the left navigation menu.
- In the Site title field, enter your brand title and primary slogan (aim for under 60 characters).
- In the Site description field, enter a concise summary of your platform's games, trust features, and promotions (aim for under 160 characters).
- Inspect the Search result preview card on the right to check how Google will render the snippet.
- Click Save in the bottom action bar.
- A green alert will notify you: "Saved".
2. Adding and Removing Search Keywords
- In the Keywords field, enter a search term (e.g.
online casino, direct web).
- Press Enter, type a comma (
,), or click Add (plus icon).
- The keyword converts into a blue removable tag chip.
- Continue adding keywords as needed (combined character count must remain within 500 characters).
- To remove any tag, click the cross icon (X) on that chip.
- Click Save.
3. Uploading a Social Share Graphic (og:image)
- In the Share picture section, click the upload box or drag an image file (1200 × 630 px) into it.
- Review the helper note under the image:
- Matches the recommended size: Aspect ratio matches 1.91:1 standard.
- Not the recommended size: The card will automatically cut the image to fit without distortion.
- Inspect the Shared link card in the preview section below.
- Click Save.
4. Reverting to the System Logo Card
- Click the red trash can icon in the Share picture section.
- A status note informs you: "Will be removed when saved: shared links will show your logo".
- Check the Shared link preview below to see your logo centered on a gradient background matching your active theme colour.
- Click Save to confirm.
| Field | Required? | Description | Example | Constraints |
|---|
| Site title | Optional | Title displayed in search results and on browser tabs. | WINNOVA Official Online Casino & Slots | Max 100 characters (soft limit 60 chars). Defaults to brand site name if blank. |
| Site description | Optional | Meta description snippet shown beneath the title in search engines. | Enjoy over 1,000 certified slot and live casino games with 24/7 automated deposits... | Max 300 characters (soft limit 160 chars). |
| Keywords | Optional | Search keywords and tags associated with platform content. | slots, live casino, jackpot, direct web | Combined character limit of 500 characters across all tags. |
| Shared link picture | Optional | Banner graphic shown when the site URL is shared on social media. | Image file og-share.jpg (1200 × 630 px) | Formats: PNG, JPG, WEBP up to 5 MB. Falls back to site logo card if empty. |
8. Popups and Confirmation Modals
1. Version Conflict Alert
- Triggered When: Another administrator saved SEO modifications while your session was active (Code 1005).
- What You See: A red error snackbar: "Another admin changed this first. Their version is shown; check it again".
- Action Required: The system automatically reloads the other admin's newest settings. Re-enter your changes and click Save.
- Result: Prevents concurrent administrators from overwriting each other's configurations unknowingly.
- Triggered When: You have modified text fields or uploaded an image and attempt to navigate to another page without clicking Save.
- What You See: A browser modal warning of unsaved changes.
- Action Required: Click Cancel to remain on the page and save, or confirm navigation to discard staged modifications.
9. Status Badges and Colors
| Badge / Indicator | Color | Meaning | Required Action |
|---|
| Standard Counter (e.g. 45/100) | Grey | Character count is well within search engine display limits. | Normal operational state. |
| Warning Counter (e.g. 75/100) | Orange | Character count exceeds typical Google snippet display thresholds (60 for title, 160 for description). | Text can be saved, but Google may truncate ends with ellipsis. |
| Error Counter (e.g. 105/100) | Red | Character count exceeds hard database limit. | Shorten text until counter turns grey before saving. |
| Matches the recommended size | Green | Image matches standard 1200 × 630 px dimensions. | Ready to publish. |
| Not the recommended size... | Yellow | Image differs from standard aspect ratio; edge cropping will occur. | Check preview card to ensure artwork fits comfortably. |
| Your logo stands in | Grey | No custom social share graphic uploaded; site logo card is active. | Informational notice; customize whenever desired. |
10. Frequently Asked Questions and Troubleshooting
- Why doesn't the share preview immediately update when I post the link on LINE or Facebook?
- Major social platforms aggressively cache Open Graph meta tags. Use their official cache refresh tools (such as Facebook Sharing Debugger or LINE Pagepeeker) to force their crawlers to scrape the latest metadata.
- Why is the Save button greyed out and unclickable?
- Verify if any character counter is red (exceeded limit).
- Ensure the Site title is not empty (at least 1 character required).
- Verify that changes were actually made; if form values match active saved values, Save remains disabled.
- Why aren't my keywords converting into tags?
- After typing a keyword, you must press Enter, type a comma (
,), or click the plus button to convert the text into an individual tag chip.
- What happens if I don't upload a social share image?
- Your links will never appear broken. The platform automatically generates a sleek, high-resolution Open Graph card featuring your Site logo centered upon a gradient background matching your selected Theme colour.