Demo Gato GraphQL + Bricks Builder + Claude + SEO Framework

Automatisch aanmaken van The SEO Framework metadata voor Bricks met Claude

Gebruik Claude om automatisch SEO Framework metadata te genereren vanuit de inhoud van Bricks-tekstelementen

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

We kunnen Claude gebruiken met de Bricks-extensie om The SEO Framework-metadata te genereren op basis van de inhoud van Bricks-tekstelementen — alles met één enkele Gato GraphQL-query.

Met de Automation-extensie kunnen we de uitvoering van deze query automatisch activeren wanneer een nieuwe Bricks-pagina wordt gepubliceerd.

Deze query gebruikt Claude om de inhoud van Bricks-tekstelementen te analyseren en The SEO Framework-metadata (titel en beschrijving) te genereren voor betere SEO.

We moeten de volgende variabelen opgeven:

  • customPostId: Het ID van de aangepaste Bricks-post die bijgewerkt moet worden
  • anthropicAPIKey: De API-sleutel voor de Anthropic API

Je kunt het systeembericht en de promptsjabloon aanpassen om in te stellen hoe Claude de metadata genereert.

Sla de query op als een nieuw Persisted Query met de titel "Create The SEO Framework metadata for Bricks with Claude", zodat we die kunnen gebruiken in de Automation (zie hieronder).

Hier is de 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")
    }
  }
}

De variabelen zien er als volgt uit:

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

Automation

Om de uitvoering van de query automatisch te activeren wanneer een nieuwe Bricks-pagina wordt gepubliceerd, maak je een nieuwe Automation-regel aan met de volgende instellingen:

  • Persisted Query: "Create The SEO Framework metadata for Bricks with Claude" (dat wil zeggen de regel die we hierboven hebben aangemaakt)
  • Hook name: gatographql:any_to_publish:page
  • Dynamic GraphQL variables:
{
  "customPostId": 1
}
Automation-regel voor het aanmaken van The SEO Framework metadata voor Bricks met Claude
Automation-regel voor het aanmaken van The SEO Framework metadata voor Bricks met Claude

Abonneer je op onze nieuwsbrief

Blijf op de hoogte van alle updates over Gato GraphQL.