The existence of awoo page not only extends and preserves customers' shopping intent but also provides SEO improvements to your website. It is built using data retrieved from our Page API.

In this guide, we will outline the key steps and strategies to implement and benefit from this feature effectively with the following topics:

1. Introduce the data provided by our Page API.
2. Explain how this data contributes to SEO improvements.
3. Provide an example of integrating the data to create an awoo page.

📘

Get Our Page API Response to Get Started!

Before we begin, please retrieve our Page API response. In the next section, we will introduce the data structure and walk through its components.

📜 Page API Response Structure

Once we successfully retrieve the Page API response, all the necessary data is available in the result object. We can find the example Page API response here.

The result object provides the data needed to build an awoo page, which includes three key dimensions designed to enhance SEO and optimize the customer shopping experience. These three categories are as follows:

1. pageInfo: Contains SEO-critical data.
2. suggestionTags : Contains related tags data.
3. products: Contains product listing data information.

Among the three data categories, pageInfo serves as a summary, consolidating tags and products data into an SEO-friendly format. This makes it crucial for enhancing your page's search engine visibility. In the following section, we’ll dive deeper into pageInfo.

For guidance on implementing suggestionTags and products, we've compiled all examples in one place and explained how to interact with the data. Please refer directly to the Demo HTML for details.

📜 Dive Deeper into pageInfo

To ensure that your awoo page is fully optimized for search engines, we offer five key types of data that directly impact SEO performance. These elements play a crucial role in how search engines index and rank your page, while also enhancing its visibility and engagement on social platforms. The five key data types are:

1. Title and Description
2. Canonical
3. Schema Markup(Breadcrumb)
4. Page content elements (H1 heading, introductory text)
5. Open Graph

🔑 Title and Description

The Title and Description serve as key indexing signals for search engines, helping them understand and categorize web pages effectively. For optimal performance, keep titles under 60 characters and descriptions under 100 characters.

📘

What is "indexing"?

Indexing is the process by which search engines discover and store web pages in their database. When a search engine crawls a webpage, it analyzes key HTML elements—such as the title and description tags—to determine the page’s relevance and topic before adding it to its index.

When users enter search queries, search engines match those queries with indexed pages. The title and description tags play a crucial role in this process:

1. title: The primary webpage identifier appears as the clickable headline in search results.
2. description: A summary of the page’s content that appears below the title in search results.

❓ How Do Title and Description Affect SEO?

1. Search Engine Ranking
   A well-optimized title and meta description improve relevance, making it easier for search engines to understand and display your page for the right queries.
2. Keyword Relevance
   Including highly relevant keywords in your title and meta description helps align your page with what users are searching for, increasing its visibility in search results.

👍

Integrate Our Page API for Optimized Titles and Descriptions

Our API automatically regenerates category content based on updated titles and descriptions, which can be defined by users or informed by keyword data from Google Search Console. This process helps align content with search intent and improves overall SEO performance.

🔑 Canonical

When search engines crawl your website, they may encounter multiple URLs that serve the same content. The canonical tag is an essential HTML element that specifies the preferred version of a page, helping to prevent duplicate content issues.

❓ How Does Canonical Affect SEO?

1. Consolidating Link Value
   When several different URLs display the same content, the benefits from links—such as improved credibility and search rankings—can be divided among those versions. By choosing one URL as the main version (using a canonical tag), you bring all the linking benefits together on that single page, making it stronger and more likely to rank higher in search results.
2. Improved Crawl Efficiency
   Search engines have a limited crawl budget. By signaling which pages are the definitive versions, a canonical tag ensures that search engine bots focus on crawling and indexing the most relevant content rather than wasting resources on duplicates.

👍

Unify Duplicate Pages with Our Page API

Integrating our API's canonical data helps unify duplicate awoo pages under a single, authoritative version. This enhances SEO by consolidating link value, preventing ranking dilution, and improving crawl efficiency.

🔑 Robots Meta Tag

The robots meta tag is an HTML element that provides instructions to search engines on how to crawl and index a specific webpage.

📘

What is "crawling"?

Crawling is the process search engines use to systematically discover and gather content from websites across the internet.

❓How Does the Robots Meta Tag Affect SEO?

1. Prevents Performance Dilution
   When multiple similar awoo pages get indexed, they can dilute our SEO performance. The robots meta tag helps us concentrate search engine attention on our most important awoo pages and prevents similar awoo pages from competing against each other in search results.
2. Strategic Content Management
   We can control the visibility of awoo pages with time-sensitive content, such as seasonal promotions or specific events. The robots meta tag prevents outdated content from remaining indexed in search engines, ensuring our users don't encounter expired information or irrelevant content that could harm our brand reputation.

👍

Control Visibility with Our Page API

Our Page API automatically generates robots meta tag data based on the settings in our AMP dashboard. By integrating robots directives into our awoo pages, we can precisely control which content appears in search engines and prevent the risk of diluted SEO performance across different awoo pages.

🔑 BreadcrumbList

BreadcrumbList is a form of structured data that enhances how search engines understand and display your website’s content.

Among the various schema types, the schema:breadcrumbs is one of the most effective for SEO, as it helps search engines interpret your site's hierarchy and improves navigation within search results.

❓How Does BreadcrumbList Affect SEO?

1. Enhanced Search Result Display
   When schema:breadcrumbs is implemented, search engines can replace traditional URLs with a structured breadcrumb path in search results. This provides users with clear site navigation at a glance, improving search visibility.
2. Improved Site Indexing\ schema:breadcrumbs creates structured internal links that assist search engine crawlers in understanding the relationships between pages. This enhances crawlability and indexing, making it easier for search engines to display relevant pages in response to user queries.

👍

Optimized Structured Data with Our Page API

Our Page API dynamically generates valid and schema:breadcrumbs data, eliminating the need for manual markup creation. By integrating awoo's API-powered schema markup, you can enhance your search engine presence, improve content discoverability, and drive more organic traffic—all with minimal effort.

🔑 Page content elements (H1 heading, introductory text)

The H1 heading and introductory text are essential for SEO and improving content visibility. These elements help search engines understand page structure.

H1 Heading

The h1 tag is the primary heading of a webpage, acting as the main title that indicates the page’s topic to both search engines and users. Search engines use it to evaluate content relevance, making a well-structured h1 tag is crucial for SEO performance.

❗️

Using multiple h1 tags can dilute SEO effectiveness

To follow best practices, ensure that only one h1 tag is present on each page.

Introductory text

Positioned directly after the h1 tag, the intro provides a concise overview of the page’s content. This section is essential for capturing user interest, reinforcing primary keywords, and helping search engines understand the page’s context.

❓How Does Introductory Text Affect SEO?

1. Enhances Semantic Relevance and Keyword Association
   The introductory paragraph naturally includes category names and descriptive keywords, which helps search engines understand the page's primary topic and strengthens its semantic relevance.
2. Assists in Distinguishing Page Topics
   Category pages typically consist of images and titles. The intro paragraph provides additional semantic context, making it easier for Google to accurately categorize the page’s content.
3. Improves Long-Tail Keyword Coverage
   By incorporating natural language descriptions related to materials, seasons, and product types, the intro paragraph enhances visibility in long-tail search queries, expanding keyword coverage.

👍

Tailor Your Content with Our Page API

Our Page API provides SEO-friendly H1 headings and introductory text tailored to the data for the awoo page, ensuring consistency and maximizing search performance.

🔑 Open Graph

When a webpage is shared on social media, Open Graph (OG) tags define how it appears in the preview. Each tag plays a specific role in enhancing content visibility, engagement, and consistency across platforms. Here are the key Open Graph tags we provide:

1. og:title — Specifies the title that appears in the shared link preview.
2. og:description — Provides a summary of the page’s content.
3. og:image — Defines the preview image that appears alongside the link.
4. og:url — URL that is associated with the shared content.
5. og:type — The type of content being shared. Search engines and social media platforms use this information to determine how the content should be displayed and categorized.
6. og:siteName — The name of the website where the content originates.

Our API leverages an extensive tags database to generate precise and effective Open Graph metadata. By incorporating our API's Open Graph data, you ensure that your content is equipped with well-structured OG tags, leading to visually appealing and informative previews on social media platforms and contributing to a seamless user experience.

👍

Implement Our Page API for a Seamless User Experience

A well-optimized user experience increases session duration, reduces bounce rates, and boosts engagement. These are all the factors that search engines consider when ranking pages.

By effectively implementing our API's Open Graph data, you create a cohesive and engaging presence across social media platforms, which enhances user experience and indirectly boosting SEO by increasing click-through rates and driving more organic traffic.

📜 Implementation Guide

Now that we've covered the key details of the API response, the next step is integrating the data into your awoo page. Let's start by examining a Page API response.

🔑 Page API Response Example

When you make a successful API request, you'll receive a JSON response structured as follows:

{
  "errcode": 0,
  "errmsg": "ACK",
  "requestId": "xxxxxx",
  "result": {
    "pageInfo": {
      "title": "{{tag1}} {{tag2}} ｜ your website name here",
      "description": "{{tag1}} {{tag2}} - your website provide what customers need!",
      "h1": "{{tag1}} {{tag2}} related products",
      "canonical": "https://yourdomain.com/?tags=tag1,tag2",
      "robots": "index",
      "openGraph": {
        "title": "{{tag1}} {{tag2}} ｜ your website name here",
        "description": "{{tag1}} {{tag2}} - your website provide what customers need!",
        "siteName": "your website name",
        "url": "https://yourdomain.com/?tags=tag1,tag2",
        "image": "https://.thumbnail.png",
        "type": "website"
      },
      "schema": {
        "breadcrumbs": "{hierarchical structure of the page}"
      },
      "intro": "{{tag1}} {{tag2}} - your website provide what customers need!"
    },
    "suggestionTags": [
      {
        "text": "xxxxxx",
        "link": "xxxxxx"
      }
    ],
    "products": [
      {
        "productId": "xxxxxx",
        "productName": "xxxxxx",
        "url": "xxxxxx",
        "productImageUrl": "xxxxxx",
        "productBrand": "xxxxxx",
        "productPrice": xxxxxx,
        "productPriceCurrency": "xxx",
        "productSalePrice": xxxxxx,
        "productSalePriceCurrency": "xxx",
        "productType": "xxxxxx",
        "productDescription": "xxxxxx",
        "productAvailability": "xxxxxx"
      }
    ],
    "productsTotal": xxxxxx,
    "tagsFilter": [
      "xxxxxx",
      "xxxxxx",
      "xxxxxx"
    ]
  }
}

Assuming you receive the previous API response, here's an example of how to retrieve and integrate the data into your awoo page.

🔑 Demo HTML

<!DOCTYPE html>
<html lang="en">
<head>    
  <!-- 
  Implementation Notes:
  1. This example uses JavaScript template literals for demonstration
  2. We use 'response' to represent the previous JSON of "API Response Example" section
  3. We use {{response.result.xxx}} to represent how you retrieve data from the API response
  -->
  
  <!-- Title and Meta Tags -->
  <title> {{response.result.pageInfo.title}} </title>
  <!-- Set the base url as the path of your awoo page . -->
  <base href="https://yourawooPagePath.com/">
  <meta name="description" content="{{response.result.pageInfo.description}}">
  <link rel="canonical" href="{{response.result.pageInfo.canonical}}">
  
  <!--
 	Robot Implementation:
  1. The robots attribute is included only when it is configured via our AMP dashboard.
  2. Here we set a fallback (e.g., "index, follow") in case the robots value is missing.
  -->

	<meta name="robots" content="{{ response.result.pageInfo.robots || 'index, follow' }}">
  
  <!-- Open Graph Tags -->
  <meta property="og:title" content="{{response.result.pageInfo.openGraph.title}}">
  <meta property="og:description" content="{{response.result.pageInfo.openGraph.description}}">
  <meta property="og:site_name" content="{{response.result.pageInfo.openGraph.siteName}}">
  <meta property="og:url" content="{{response.result.pageInfo.openGraph.url}}">
  <meta property="og:image" content="{{response.result.pageInfo.openGraph.image}}">
  <meta property="og:type" content="{{response.result.pageInfo.openGraph.type}}">

  <!-- 
  Schema Implementation:
  1. The schema data comes as a JSON string and needs to be parsed
  2. Ensure proper error handling when parsing
  -->
  <script type="application/ld+json">
    try {
      const schemaData = JSON.parse(response.result.pageInfo.schema.breadcrumbs);
      // schemaData will contain the parsed breadcrumbs structure
    } catch (error) {
      console.error('Error parsing schema data:', error);
    }
  </script>
</head>

<body>
  <header>
    <h1> {{response.result.pageInfo.h1}} </h1>
    <div class="intro"> {{response.result.pageInfo.intro}} </div>
  </header>

  <!-- 
    Suggestion Tags Implementation:
    1. The following code demonstrates the structure for rendering suggestion tags
    2. In production, replace this sample code with a dynamic loop to render all tags from 
       {{response.result.suggestionTags}}
    3. Ensure proper error handling for when the suggestionTags array is empty or undefined
  -->
  <div id="suggestion-tags" class="suggestion-tags">
    <!-- Sample markup showing tag structure -->
    <a class="awoo-tag" href="{{response.result.suggestionTags[0].link}}"> 
      {{response.result.suggestionTags[0].text}} </a>
    <a class="awoo-tag" href="{{response.result.suggestionTags[1].link}}"> 
      {{response.result.suggestionTags[1].text}} </a>
    ...
    <!-- NOTE: In implementation, use a loop to iterate through all tags in
   {{response.result.suggestionTags}} array -->
  </div>
          
  <!-- 
    Products Grid Implementation:
    1. Products data is an array in {{response.result.products}}
    2. Each product has multiple properties that need to be displayed
    -->
  <div class="products-list">`
    <div class="product-card">
      <img src="{{response.result.products[0].productImageUrl}}" 
           alt="{{response.result.products[0].productName}}">
      <h3> {{response.result.products[0].productName}} </h3>
      <p class="brand"> {{response.result.products[0].productBrand}} </p>
      <p class="original-price"> {{response.result.products[0].productPrice}} </p>
      <p class="sale-price"> {{response.result.products[0].productSalePrice}} </p>
    <p class="description"> {{response.result.products[0].productDescription}} </p>
    <a href="{{response.result.products[0].url}}" class="product-link"> View Product </a>
  </div>
  ...
  </div>

  <!-- NOTE: In implementation, replace the example above with a loop that iterates 
through all products in the {{response.result.products}} array -->

  <!-- 
  Additional Implementation Notes:
  1. Total products count available at: {{response.result.productsTotal}}
  2. Tags filter array available at: {{response.result.tagsFilter}}
  3. Remember to add error handling for all dynamic data
  -->
</body>
</html>