QooQ Dot (Blogger Template)

日本語版ドキュメントはこちら (README.ja.md)

Original Theme: QooQ (Kuukudou)
Customization by: tai1
GitHub Repository: https://github.com/tai1mo/QooQ-Dot-blogger-template

---

Overview

QooQ Dot is a customized theme based on the simple and highly-rated Japanese Blogger template "QooQ (v2.00)". It has been significantly upgraded in structure, functionality, and design to adapt to modern SEO standards and next-generation generative AI searches (Google AI Overviews, Perplexity, ChatGPT Search, etc. - AIO / GEO / LLMO / AISEO).

---

Features

While inheriting the excellent basic specifications of the original "QooQ", "QooQ Dot" provides modern optimizations in various aspects.

• Japanese Language Support
  • QooQ Basics: Fonts, character spacing, and line spacing are configured to be suitable for Japanese text. The Theme Designer and CSS descriptions are also in Japanese.
  • QooQ Dot Enhancements: Improved readability for technical and general text through adjusted margins in the main article body (#single-content) and the introduction of code syntax highlighting (Highlight.js).
• SEO & AISEO (GEO) Optimization
  • QooQ Basics: Basic SEO elements like h1 tags, breadcrumbs, and OGP tags are optimized just by applying the template.
  • QooQ Dot Enhancements: Supports Semantic HTML5 (<article>, <main>, etc.), JSON-LD Structured Data (BlogPosting and BreadcrumbList), and dynamic embedding of updated-date metadata, specifically targeted for modern search engines and Generative AI searches (GEO/LLMO).
• Loading Speed Optimization
  • QooQ Basics: Skips loading external files that slow down rendering. Does not use jQuery or web fonts.
  • QooQ Dot Enhancements: Maintains the lightweight foundation while keeping required external resources to an absolute minimum (only Highlight.js via CDN) to ensure snappy performance.
• Responsive Design
  • QooQ Basics: Displays content beautifully on any device: PC, tablet, or smartphone.
  • QooQ Dot Enhancements: Equalizes the height of article list cards using Flexbox and adjusts the thumbnail aspect ratio to a more modern 5:2.
• 2-Column Design
  • QooQ Basics: Adopts an orthodox 2-column layout with the main content on the left and the sidebar on the right.
  • QooQ Dot Enhancements: Enhances design quality by introducing smooth CSS animations to the sidebar's "Featured Post" and "Popular Posts" widgets, such as 3D transforms and scaling on hover.
• Theme Designer Support
  • QooQ Basics: Allows customization of the blog's color scheme to your preference.
  • QooQ Dot Enhancements: Revamps the customizable color settings, adopting modern dark blue (#08435e) and sage green (#99b7ab) as the default palette.
• Collapsible Menu
  • The menu (header navigation) automatically turns into a collapsible accordion when viewed on mobile devices.
• AdSense Integration
  • QooQ Basics: AdSense placement locations are clearly indicated with comments in the HTML.
  • QooQ Dot Enhancements: Pre-applies modern responsive ad tag code structures in the ad placement areas to facilitate easier monetization.

---

Key Changes and Enhancements

1. Upgrade to Semantic HTML5 Structure

Transitioned from a structure of nested div tags to semantic HTML5 tags to ensure AI crawlers (LLM crawlers) and modern browsers can accurately parse the page structure.

• Layout Tag Changes:
  • <div id='header'> ➡ <header id='header'>
  • <div id='main'> ➡ <main id='main'>
  • <div id='sub-content'> ➡ <aside id='sub-content'>
  • <div id='footer'> ➡ <footer id='footer'>
  • Article display containers: div ➡ <article id='single'>
• Effect: Clearly distinguishes the main content (article body) from noise (supplementary elements like sidebars or footers), allowing AI to parse and summarize the article more accurately.

2. Automatic Generation of JSON-LD Structured Data (Schema.org)

Replaced the Microdata format, commonly found in standard Blogger templates, with the JSON-LD format (<script type="application/ld+json">) strongly recommended by Google and AI search engines.

• BlogPosting Structured Data: Dynamically embeds article title, thumbnail image, published/updated dates, and author information as JSON-LD on every individual article page.
• BreadcrumbList Structured Data: Applies JSON-LD to the breadcrumb widget (mybreadcrumb), accurately conveying the site's hierarchical structure to search engines and LLMs.

3. Visualizing E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness)

Added markup and UI elements to indicate "Trustworthiness" and "Freshness", which are highly prioritized in GEO (Generative Engine Optimization).

• Displaying Last Updated Date: Automatically displays "(Updated: YYYY/MM/DD)" next to the published date only when an update has occurred.
• Clarifying Author Information (Written by): Dynamically displays "Written by [Author Name]" at the bottom of the article body, enhanced with schema markup (itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person").

4. Modernized Design & CSS Style Adjustments

Revamped the brand colors and made detailed adjustments to elevate the UI/UX quality.

• Color Palette Changes:
  • Changed the main color to a chic, deep blue (#08435e).
  • Changed the sub-color to a mint-toned muted green (#99b7ab).
  • Unified backgrounds and borders to a clean #f5f5f5.
• Layout and Card Design Improvements:
  • Changed the article list (#list) to use align-items: stretch to equalize heights within the grid.
  • Flexbox adjustments to neatly align elements at the bottom of the list cards (e.g., category tags) using margin-top: auto.
  • Applied styles to clamp the article list snippet (summary text) to 5 lines (preventing text overflow).
  • Updated category tag design to a sharper, more modest size (font-size: 65%) and applied the sub-color.
  • Added top/bottom borders and adjusted margins for the individual article body (#single-content).
• CSS for New Widgets:
  • Added interactive decorations for "Featured Post" and "Popular Posts", such as card elevation (translateY), shadow changes (box-shadow), and thumbnail scaling animations on hover.
  • Defined design settings for tables (table), including borders, center alignment, and applying the brand color to table headers (th).
• Footer Margin and Spacing Adjustments:
  • Optimized the display interval between copyright and design credits, line height (1.6), and padding.

5. Multimodal AI & Image SEO (Strict alt Attributes)

To make it easier for AI to recognize image content, alt attributes (using the article title) were dynamically added to various auto-generated thumbnail images throughout the theme.

• Targets: Mobile/PC article list thumbnails, related articles (mrp), and popular posts thumbnails.
• Aspect Ratio Adjustments: Changed the article list thumbnails from the traditional 2:1 to a more modern 5:2 (Height 192px / Width 480px).
• Fallback: Implemented a fallback structure to display the snippet summary instead if no thumbnail is available.

6. Built-in Code Syntax Highlighting (Highlight.js)

For tech bloggers who write source code, the lightweight and fast Highlight.js (v11 series) is loaded by default.

• Automatically parses and highlights programs inside <pre><code> blocks upon page load.
• Includes custom styles for kbd tags (keyboard key style) and inline code tags.

7. Built-in Automatic Table of Contents (TOC) Generation

Includes a standard script that automatically extracts heading tags (h2, h3, h4) within the article and dynamically generates a hierarchical table of contents. By simply placing the following dedicated HTML tags in the desired location (in HTML view), you can enhance reader convenience and page navigation. The design automatically follows the colors set in the QooQ Theme Designer.

<details id="toc" open>
  <summary class="toc-title">Table of Contents</summary>
</details>

• By removing the open attribute, you can set the initial state to "closed".

---

Directory Structure

├── QooQ Dot-theme.xml      # The customized, latest Blogger theme (main file)
├── original QooQ/
│   └── QooQ.xml            # The original QooQ (v2.00) before customization
├── modification_history/
│   └── 20260701_seo_optimization/
│       └── walkthrough.md  # Detailed report on SEO/AISEO optimization for developers
├── README.md               # English README (This file)
└── README.ja.md            # Japanese README

---

Installation Guide

1. Backup Your Existing Theme Go to the Blogger Dashboard, select "Theme", click the arrow next to "Customize", and then click "Backup" to save your current theme.
2. Upload QooQ Dot Select "Theme" ➡ "Edit HTML". Copy and overwrite all contents with QooQ Dot-theme.xml, then save.
3. Configure Widgets From "Layout" in the dashboard, add "Featured Post", "Popular Posts", and "Labels" widgets to the sidebar and adjust their placement as needed.

---

License (Terms of Use)

This template is a customized version of the Blogger template "QooQ" created by Ramune Lab, modified by tai1. Based on the original distribution terms, you may use it under the following conditions:

• Customization and Redistribution: You are free to do so.
• Prohibition of Commercial Use (No Selling): Selling this template, or any further customized versions of it, is strictly prohibited (only free distribution is allowed).
• Credit Attribution: Please do not remove the original (QooQ) and my credit notations (copyright notices) included within the template.
• Disclaimer: The creators (both the original creator and the customization author) bear no responsibility for any damages or troubles caused by the use of this template. Please use it at your own risk.

Credit Information

• Original Theme: QooQ (Ramune Lab / Kuukudou) - Official Website
• Customization: tai1 - Blog