Demo Gato GraphQL + Bricks Builder + Claude + SEO Framework

Membuat Metadata The SEO Framework untuk Bricks dengan Claude secara Otomatis

Gunakan Claude untuk membuat metadata SEO Framework secara otomatis dari konten dalam elemen teks Bricks

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

Kita dapat menggunakan Claude dengan ekstensi Bricks untuk menghasilkan metadata The SEO Framework berdasarkan konten dalam elemen teks Bricks, semuanya dengan satu query Gato GraphQL.

Dan dengan ekstensi Automation, kita dapat memicu eksekusi query ini secara otomatis ketika halaman Bricks baru diterbitkan.

Query ini menggunakan Claude untuk menganalisis konten dalam elemen teks Bricks dan menghasilkan metadata The SEO Framework (judul dan deskripsi) untuk meningkatkan SEO.

Kita harus menyediakan variabel berikut:

  • customPostId: ID custom post Bricks yang akan diperbarui
  • anthropicAPIKey: Kunci API untuk API Anthropic

Anda dapat menyesuaikan pesan sistem dan template prompt untuk mengatur cara Claude menghasilkan metadata.

Simpan query sebagai Persisted Query baru, dengan judul "Create The SEO Framework metadata for Bricks with Claude", sehingga kita dapat menggunakannya dalam Automation (lihat di bawah).

Berikut adalah query GraphQL:

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")
    }
  }
}

Variabelnya akan terlihat seperti ini:

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

Automation

Untuk memicu eksekusi query secara otomatis ketika halaman Bricks baru diterbitkan, buat aturan Automation baru dengan pengaturan berikut:

  • Persisted Query: "Create The SEO Framework metadata for Bricks with Claude" (yaitu yang kita buat di atas)
  • Hook name: gatographql:any_to_publish:page
  • Dynamic GraphQL variables:
{
  "customPostId": 1
}
Aturan Automation untuk membuat metadata The SEO Framework untuk Bricks dengan Claude
Aturan Automation untuk membuat metadata The SEO Framework untuk Bricks dengan Claude

Berlangganan newsletter kami

Tetap update dengan semua pembaruan Gato GraphQL.