Demo Gato GraphQL + Bricks Builder + Claude + SEO Framework

Tự động tạo metadata The SEO Framework cho Bricks với Claude

Dùng Claude để tự động tạo metadata SEO Framework từ nội dung trong các phần tử văn bản của Bricks

Leonardo Losoviz
Leonardo Losoviz -
Logo
Image
Target Image
Target Image
Target Image

Chúng ta có thể dùng Claude với extension Bricks để tạo metadata The SEO Framework dựa trên nội dung trong các phần tử văn bản của Bricks, tất cả chỉ với một query Gato GraphQL duy nhất.

Và với extension Automation, chúng ta có thể tự động kích hoạt thực thi query này khi một trang Bricks mới được xuất bản.

Query này dùng Claude để phân tích nội dung trong các phần tử văn bản của Bricks và tạo metadata The SEO Framework (tiêu đề và mô tả) nhằm cải thiện SEO.

Chúng ta cần cung cấp các biến sau:

  • customPostId: ID của custom post Bricks cần cập nhật
  • anthropicAPIKey: Khóa API cho Anthropic API

Bạn có thể tùy chỉnh system message và template prompt để điều chỉnh cách Claude tạo metadata.

Lưu query dưới dạng một Persisted Query mới, với tiêu đề "Create The SEO Framework metadata for Bricks with Claude", để có thể dùng trong Automation (xem bên dưới).

Đây là GraphQL query:

query InitializeGlobalVariables
  @configureWarningsOnExportingDuplicateVariable(enabled: false)
{
  emptyArray: _echo(value: [])
    @export(as: "elementTexts")
    @remove
}
 
query GetBricksData($customPostId: ID!)
  @depends(on: "InitializeGlobalVariables")
{
  customPost(by:{ id: $customPostId }, status: any) {
    id
    title
    bricksData(filterBy: { include: ["heading", "text"] })
      @underEachArrayItem
        @underJSONObjectProperty(by: { path: "settings.text" })
          @export(as: "elementTexts")
  }
}
 
query GenerateMetadataWithClaude(
  $anthropicAPIKey: String!
  $maxTokens: Int! = 32000
  $promptTemplate: String! = """
You are an SEO expert specializing in metadata optimization.
 
I need to generate SEO metadata for a WordPress page using The SEO Framework plugin.
 
Based on the following content from the page, please generate:
1. A compelling SEO title (max 60 chars)
2. A meta description (max 160 chars)
 
Please respond in JSON format with this structure:
{
  "title": "SEO title here",
  "description": "Meta description here"
}
 
Return ONLY the JSON object. Do not include any explanations, markdown formatting, or code blocks. The response must be a valid JSON object starting with { and ending with }.
 
Content to analyze:
 
{$encodedContent}
"""
  $model: String! = "claude-sonnet-4-0"
)
  @depends(on: "GetBricksData")
{
  encodedContent: _arrayJoin(
    array: $elementTexts,
    separator: "\n\n"
  )
  prompt: _strReplace(
    search: "{$encodedContent}",
    replaceWith: $__encodedContent,
    in: $promptTemplate
  )
  claudeResponse: _sendJSONObjectItemHTTPRequest(input: {
    url: "https://api.anthropic.com/v1/messages",
    method: POST,
    options: {
      headers: [
        {
          name: "x-api-key",
          value: $anthropicAPIKey
        },
        {
          name: "anthropic-version",
          value: "2023-06-01"
        }
      ],
      json: {
        model: $model,
        max_tokens: $maxTokens,
        messages: [
          {
            role: "user",
            content: $__prompt
          }
        ],
      }
    }
  })
    @underJSONObjectProperty(by: { key: "content" })
      @underArrayItem(index: 0)
        @underJSONObjectProperty(by: { key: "text" })
          @export(as: "jsonEncodedMetadata")
}
 
query ExtractMetadata
  @depends(on: "GenerateMetadataWithClaude")
{
  jsonEncodedMetadata: _echo(value: $jsonEncodedMetadata)
    @remove
  decodedMetadata: _strDecodeJSONObject(string: $jsonEncodedMetadata)
  seoMetadataTitle: _objectProperty(
    object: $__decodedMetadata,
    by: { key: "title" }
  )
    @export(as: "seoMetadataTitle")
  seoMetadataDescription: _objectProperty(
    object: $__decodedMetadata,
    by: { key: "description" }
  )
    @export(as: "seoMetadataDescription")
}
 
mutation UpdateSEOFrameworkMetadata($customPostId: ID!)
  @depends(on: "ExtractMetadata")
{
  updateCustomPost(
    input: {
      id: $customPostId
      meta: {
        _genesis_title: [$seoMetadataTitle],
        _genesis_description: [$seoMetadataDescription],
        _open_graph_title: [$seoMetadataTitle],
        _open_graph_description: [$seoMetadataDescription],
        _twitter_title: [$seoMetadataTitle],
        _twitter_description: [$seoMetadataDescription],
      }
    }
  ) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    customPost {
      id
      metaTitle: metaValue(key: "_genesis_title")
      metaDesc: metaValue(key: "_genesis_description")
      socialTitle: metaValue(key: "_open_graph_title")
      socialDesc: metaValue(key: "_open_graph_description")
      twitterTitle: metaValue(key: "_twitter_title")
      twitterDesc: metaValue(key: "_twitter_description")
    }
  }
}

Các biến sẽ có dạng như sau:

{
  "customPostId": 123,
  "anthropicAPIKey": "sk-ant-..."
}

Automation

Để tự động kích hoạt thực thi query khi một trang Bricks mới được xuất bản, hãy tạo một quy tắc Automation mới với các cài đặt sau:

  • Persisted Query: "Create The SEO Framework metadata for Bricks with Claude" (tức là query chúng ta đã tạo ở trên)
  • Hook name: gatographql:any_to_publish:page
  • Dynamic GraphQL variables:
{
  "customPostId": 1
}
Quy tắc Automation để tạo metadata The SEO Framework cho Bricks với Claude
Quy tắc Automation để tạo metadata The SEO Framework cho Bricks với Claude

Đăng ký nhận bản tin của chúng tôi

Cập nhật tất cả những điều mới từ Gato GraphQL.