Maandishi Ni Sehemu Rahisi: Mfumo Unaotoa Picha kwa Makala Zilizoandikwa na AI

Wewe ni mtengenezaji programu mwenye lengo la maudhui: makala kadhaa kwa mwezi, labda mamia. Modeli ya kuandika inashughulikia rasimu, muhtasari, maelezo ya meta, viungo vya ndani. Kisha mfumo unafika kwenye hatua moja isiyo na modeli yake — picha — na kusimama. Si kwa sababu picha ni ngumu kupata, bali kwa sababu hakuna kitu katika mfumo kinachojua picha ipi, kutoka wapi, yenye leseni gani, iliyoelezwa vipi.

Makala hii ndiyo hatua hiyo iliyokosekana, imeunganishwa toka mwanzo hadi mwisho: aina gani ya picha ya kutengeneza kwa aina gani ya sehemu, maelekezo yanayogeuza rasimu kamili kuwa maelekezo ya utafutaji, wito wa API unaorudisha picha, modeli ya pili inayochora kile ambacho picha halisi haiwezi kuonyesha, na kikusanya kinachotoa alama za HTML ambazo Google inaweza kusoma kweli. Mifumo miwili kamili mwishoni, tayari kunakiliwa.

Maandishi yametatuliwa. Picha ndiyo inayosimama.

Fanya ukaguzi wa kweli wa mfumo otomatiki wa makala. Muhtasari: umetatuliwa. Rasimu: imetatuliwa. Kichwa, maelezo ya meta, schema, viungo vya ndani, tafsiri: vyote vimetatuliwa, vyote na modeli hiyo hiyo, vyote katika maandishi. Kisha:

Sogeza jedwali kando ili kuona kila safu →

Kushindwa huku si suala la urembo, ni la kimuundo: makala inasambazwa ikiwa na picha ya nafasi tu, au ikiwa na picha ile ile kama makala kumi na mbili zilizopita, au ikiwa na picha iliyozalishwa ambayo mkono wake wenye vidole sita ndicho kitu cha kwanza msomaji anachokiona. Na picha si mapambo tu — nyaraka za Google zenyewe kuhusu picha zinaeleza wazi: maandishi ya alt “ndiyo sifa muhimu zaidi linapokuja suala la kutoa metadata kwa picha”, na mwongozo ni kutumia vipengele halisi vya <img> vyenye alt yenye maelezo badala ya mandhari ya CSS, ili picha iweze kupatikana na kueleweka kabisa.1

Aina nne za picha, aina nne za modeli

Kosa kubwa zaidi la muundo ni kutendea “picha” kama tatizo moja lenye mtoa huduma mmoja. Ni matatizo manne, na kielekezi kati yake ni mstari wa maelekezo, si huduma:

Sogeza jedwali kando ili kuona kila safu →

Mfumo, toka mwanzo hadi mwisho

Hatua tano. Hatua 3 pekee ndiyo inagusa API ya picha, na hatua 4 pekee ndiyo ya hiari:

┌─ 1. ANDIKA ────────────────────────────────────────────────────┐
   mada ──▶ LLM ──▶ draft.md  (sehemu za h2, front-matter)
└───────────────────────────────┬───────────────────────────────┘
┌─ 2. MAELEKEZO ────────────────┴───────────────────────────────┐
   draft.md ──▶ LLM ──▶ { hero: {...}, sections: [ {...} ] }
                     kitu kimoja cha JSON: kwa kila nafasi, kind +
                     ama maelekezo ya kamera au vipimo vya data/mchoro
└──────────┬──────────────────────────────────┬─────────────────┘
           │ kind = "photo"                │ kind = "chart" | "diagram"
           ▼                               ▼
┌─ 3. TAFUTA ───────────────┐   ┌─ 4. CHORA (hiari) ─────────┐
   GET /search/photos          LLM ──▶ mermaid | msimbo wa kuchora
   ← picha yenye sifa +         ──▶ sandbox ──▶ .svg / .png
     w/h, blur_hash, alt,       (utoaji thabiti, hakuna
     leseni, URL ya chanzo       namba zilizobuniwa)
└──────────┬────────────────┘   └──────────────┬───────────────┘
           └───────────────┬──────────────────┘
┌─ 5. KUSANYA ──────────────┴───────────────────────────────────┐
   <img> yenye width/height + fetchpriority | loading
   alt iliyoandikwa kwa binadamu · sifa inayoonekana · ImageObject JSON-LD
   photo_id imehifadhiwa ili kurasa mbili zisishiriki picha kuu
└───────────────────────────────────────────────────────────────┘

Sifa mbili ni muhimu zaidi kuliko mchoro wenyewe. Hatua ya 2 ni kielekezi: inaamua kwa kila nafasi ni mzalishaji gani anaendesha, hivyo hutaomba maktaba ya picha kutoa chati ya msitari. Na hatua ya 5 ndipo SEO inapoishi — kila kitu ambacho Google inaeleza kuhusu picha (alt yenye maelezo, metadata ya leseni, picha kuu salama kwa LCP) kinatolewa hapa, kutoka sehemu ambazo jibu la utafutaji tayari lilikuwa nazo.

Hatua ya 2: geuza rasimu kuwa maelekezo ya picha

Wito mmoja wa modeli kwenye rasimu iliyokamilika, na kinachorejeshwa ni mpango badala ya hoja ya utafutaji. Jinsi ya kuandika muhtasari mmoja wa picha — kwa nini kichwa cha makala ni ingizo mbaya zaidi kabisa, jinsi muhtasari wa kamera wa maneno 12 hadi 25 unavyoonekana, na jinsi unavyoshindwa — imeelezwa kikamilifu katika mwongozo wa kuweka picha kwenye makala moja, na hairudiwi hapa. Kile ambacho mfululizo wa kazi (pipeline) unaongeza ni uelekezaji: wito huo huo lazima uamue, nafasi kwa nafasi, mtengenezaji gani unaendeshwa — na kipengele cha chati hubeba data ambapo kipengele cha picha hubeba tukio.

# maelekezo ya mfumo — endesha mara moja kwa kila rasimu iliyokamilika
Wewe ni mkurugenzi wa sanaa wa chapisho la kiufundi. Soma makala na
rudisha mpango wa picha: kiingizo kimoja kwa picha kuu, kimoja kwa kila sehemu ya H2.

Kwa kila kiingizo chagua kind moja kabisa:
  "photo"    tukio halisi: mtu anafanya kitu mahali fulani, mahali, kitu,
              ishara. Chaguo-msingi la picha kuu.
  "chart"    sehemu inataja namba zilizomo NDANI ya makala. Kamwe usibuni
              thamani: nakili katika data, sawasawa.
  "diagram"  sehemu inaelezea muundo, mtiririko au mfuatano.
  "none"     sehemu ni fupi, au tayari ina kizuizi cha msimbo.

Kanuni za viingizo vya "photo" — sehemu ni query:
   Andika maelezo mafupi ya kamera: tukio ambalo kamera ingeweza kulinasa, kati
   ya maneno 12 hadi 25, kwa Kiingereza, linalolingana na hali ya sehemu husika.
   Taja kilichomo ndani ya fremu, kamwe si mada yenyewe. Hakuna maandishi, nembo,
   chapa au watu maarufu; hakuna sitiari zisizoonekana. (Full rules, with examples and failure cases:
   pexafy.com/blog/illustrate-blog-articles-at-scale/)

USIandike maandishi ya alt ya kiingizo cha picha: picha unayopata ni
inayolingana zaidi na maelekezo, si tukio ulilolieleza, hivyo alt yake lazima
iandikwe kutoka picha iliyochaguliwa. Viingizo vya chati na mchoro VINABEBA alt —
huko unadhibiti kikamilifu kinachochorwa.

Rudisha JSON pekee:
{
  "hero": { "kind": "photo", "query": "…", "orientation": "landscape" },
  "sections": [
    { "h2": "…", "kind": "photo",   "query": "…" },
    { "h2": "…", "kind": "chart",   "title": "…", "unit": "ms",
      "data": [ {"label": "…", "value": 0} ], "alt": "…" },
    { "h2": "…", "kind": "diagram", "spec": "flowchart LR; …", "alt": "…" }
  ]
}

Mstari wa kind ndio unaofanya kazi nyingi, na maelekezo ya data yanafanya yaliyobaki: kipengele cha chati kinaweza kubeba tu nambari ambazo tayari zimo kwenye rasimu, hivyo modeli inanakili badala ya kubuni. Hii hapa ni router kwenye sehemu tatu halisi za makala ya wasanidi programu:

Sogeza jedwali kando ili kuona kila safu →

Hatua ya 3: picha zinarudi zikiwa na sifa

Kila kiingizo cha kind: "photo" ni ombi moja. Maelekezo ya picha kuu hapo juu, yanapoendeshwa dhidi ya API ya umma, yanarudisha haya kwa 147 ms:

GET /search/photos — maelekezo ya picha kuu · “mtengenezaji programu anayefanya kazi usiku kwenye dawati lenye skrini mbili…” · 147 ms

Picha kuu iliyochaguliwaUnsplash Unsplash Pexels

Maelekezo ya sehemu ya mwisho, tukio tofauti kabisa, kwa 144 ms:

GET /search/photos — maelekezo ya sehemu · “wahandisi wawili wamesimama kwenye ubao mweupe uliojaa michoro…” · 144 ms

Matokeo bora · 0.91Pexels Unsplash Unsplash

Kinachorudi kwa kila picha ndicho kinachofanya hatua ya 5 iwezekane — si faili tu:

{
  "photo_id":  "019e1c7f-0063-759e-b498-33ce1714e6c9",   // hifadhi: hakuna kurudia
  "urls": { "small": "…?w=400", "regular": "…?w=1080",
             "large": "…?w=1920" },
  "width": 3000, "height": 1688,          // → hakuna kuhama kwa mpangilio
  "blur_hash": "LJ8gjv9rVq-6OFxanNNFI7xco$Na",   // → kishika nafasi halisi
  "alt_description": "Mtu anaandika kwenye kibodi mbele ya skrini mbili…",
  "photographer_full_name": "Jakub Żerdzicki",   // → ImageObject.creator
  "source": "Unsplash", "license_type": "free",
  "source_image_url": "https://unsplash.com/photos/…",
  "attribution": { "html": "<span…>Picha na …</span>",
                    "plain": "Picha na Jakub Żerdzicki kwenye Unsplash (…)" }
}

Hatua ya 4: kile ambacho picha halisi haiwezi kusema

Nafasi mbili katika mpango hazitafutwi, na hapa ndipo modeli ya pili inapopata nafasi yake — si kuchora picha, bali kuandika msimbo unaoichora. Tofauti hii ni muhimu: msimbo unaweza kukaguliwa, ni thabiti na hauwezi kubuni urefu wa msitari.

Michoro: maandishi ndani, SVG nje

Mermaid inachora michoro kutoka kwenye ufafanuzi wa maandishi ya kawaida,3 hali inayoifanya kuwa lengo salama zaidi kwa modeli: matokeo yanaweza kukaguliwa, kulinganishwa katika git, na kuchora namna moja kila wakati. Kielekezi tayari kilirudisha vipimo.

# sehemu ya "spec" ya kiingizo cha mchoro, iliyoandikwa build/graph.mmd
cat build/graph.mmd
flowchart LR
  install["usakinishaji wa deps · 480s"] --> compile["uandaaji · 1080s"]
  compile --> test["mfululizo wa majaribio · 720s"]
  compile --> upload["upakiaji wa artifacts · 120s"]

npx -y @mermaid-js/mermaid-cli -i build/graph.mmd -o static/img/graph.svg
# → SVG unayoweza kukagua kwenye PR, si picha unayolazimika kuiamini

Chati: namba tu ambazo makala tayari inazo

Kanuni ile ile, kinga moja ya ziada. Kielekezi kilinakili thamani kutoka kwenye rasimu; modeli inaandika msimbo wa kuchora; msimbo unaendeshwa kwenye sandbox; kikusanya kinathibitisha upya thamani zilizochorwa dhidi ya namba za chanzo kabla chati kuruhusiwa karibu na ukurasa.

import re, matplotlib
matplotlib.use("Agg")                # bila kioo: hakuna onyesho katika CI
import matplotlib.pyplot as plt

def assert_in_draft(value, draft: str) -> None:
    """Namba iliyochorwa lazima ionekane kwenye makala KAMA NAMBA."""
    # Kulinganisha substring ndiyo mtego hapa: "120" imo ndani ya "1200", na
    # ndani ya "?w=1200" — `str(v) in draft` bila akili inapita kwenye chochote.
    # Linganisha kwa mipaka ya neno, na kubali 1 234 / 1,234 / 1234.
    body = re.sub(r"(?<=\d)[  ,](?=\d{3}\b)", "", draft)   # ondoa viashiria
    if not re.search(rf"(?<![\d.]){re.escape(str(value))}(?![\d.])", body):
        raise ValueError(f"{value} haitajwi kwenye makala — kukataa kuchora")

def render_chart(entry: dict, draft: str, out: str) -> str:
    labels = [d["label"] for d in entry["data"]]
    values = [d["value"] for d in entry["data"]]
    for v in values:
        assert_in_draft(v, draft)       # thamani iliyobuniwa → hakuna chati

    fig, ax = plt.subplots(figsize=(8, 4.5), dpi=160)
    ax.barh(labels, values)
    ax.set_xlabel(entry["unit"])
    ax.set_title(entry["title"])
    fig.tight_layout()
    fig.savefig(out)                    # kipengele thabiti, kinachokaguliwa
    return out

Kinga hii ni fupi, lakini iandike kwa makini: ukaguzi wa substring haufanyi kazi. "120" in draft ni kweli kwa makala inayo 1200 au ?w=1200, hivyo toleo lisilo na akili linapita kwenye kila kitu na halilinde chochote. Weka mipaka kwenye namba, sanifisha viashiria vya elfu, na aina ya kosa ambalo linaweza kufanya makala ya kiufundi ivunjwe-vunjwe kwenye maoni — chati inayopingana na aya yake yenyewe — haiwezi kufika kwenye uzalishaji. Picha za skrini zinafuata kanuni ile ile: page.screenshot() iliyoandikwa kwa hati dhidi ya build yako halisi ndiyo chanzo pekee cha ukweli kwa UI yako mwenyewe, na inabaki kweli UI inapobadilika.

Hatua ya 5: ukusanyaji ndipo SEO inapoishi

Kila kitu hadi sasa kimezalisha faili na sehemu. Hatua hii inavigeuza kuwa alama za HTML — na inafaa kuwa mkamilifu hapa, kwa sababu tabia tatu zilizoandikwa katika nyaraka zinaamuliwa katika mistari hii michache.

<!-- Baiti zinatoka chanzo kingine: lipa mkono wa kupeana mapema -->
<link rel="preconnect" href="https://images.unsplash.com" crossorigin>

<!-- Kipengele cha LCP: kamwe kisicho na uvivu, daima kipaumbele cha juu -->
<figure>
  <img src="{urls.regular}"
       width="{width}" height="{height}"        <!-- kuua kuhama kwa mpangilio -->
       alt="{alt}"                                <!-- iliyoandikwa BAADA ya kuchagua -->
       fetchpriority="high" decoding="async"
       style="background:{color_hex}">   <!-- rangi kuu, sehemu 1 -->
  <figcaption>{attribution.html}</figcaption>
</figure>

<!-- Picha za sehemu, chini ya fold: mipangilio kinyume -->
<img src="{urls.regular}" width="{width}" height="{height}"
     alt="{alt}" loading="lazy" decoding="async">

1. Kamwe usiweke uvivu wa upakiaji kwenye picha kuu. web.dev haina utata: “Kamwe usiweke lazy-load kwenye picha yako ya LCP, kwa sababu hilo daima linasababisha ucheleweshaji usio wa lazima wa upakiaji wa rasilimali, na litakuwa na athari mbaya kwa LCP”, na inashauri fetchpriority="high" kwenye kipengele kinachoweza kuwa LCP — kinatumika kwa uangalifu, kwenye picha moja tu.4 Mfumo unaoweka loading="lazy" kwenye kila picha, ikiwemo picha kuu, ndiyo jeraha la kawaida linalojisababishia lenyewe la Core Web Vitals katika uchapishaji otomatiki.
2. Daima toa width na height — zinarudi kwenye jibu, hivyo hakuna udhuru; jozi hiyo moja ya sifa ndiyo inayoruhusu kivinjari kuhifadhi nafasi na kuzuia mpangilio kuruka. Tumia blur_hash kama kishika nafasi wakati faili inapakiwa.
3. Andika alt baada ya kuchagua, kamwe kabla. Hii ndiyo ya kina zaidi. Sehemu ya alt ya mpango inaelezea tukio uliloomba; picha uliyopata ndiyo inayolingana zaidi, si tukio hilo. Kusambaza maandishi ya maelekezo kama alt ni hasa kushindwa kwa ufikivu ambako mfumo huu unatakiwa kuepuka — maelezo ya picha ambayo haipo kwenye ukurasa. Jenga alt kutoka alt_description ya picha iliyochaguliwa, ikiboreshwa dhidi ya aya inayokaa ndani yake. Mwongozo wa Google ni “kuzingatia kutengeneza maudhui yenye manufaa, yenye taarifa nyingi yanayotumia maneno muhimu ipasavyo na yaliyo katika muktadha wa maudhui ya ukurasa”, na inaonya kwamba kujaza sifa za alt kwa maneno muhimu “kunasababisha uzoefu mbaya wa mtumiaji na kunaweza kufanya tovuti yako ionekane kama spam”.1

Sehemu ambayo karibu hakuna mtu anayeifanya otomatiki: metadata ya leseni

Google inasaidia data iliyopangwa ya ImageObject kwa leseni za picha. Inahitaji contentUrl pamoja na angalau moja kati ya creator, creditText, copyrightNotice au license, inapendekeza acquireLicensePage, na picha zenye taarifa za leseni zinastahili beji ya Licensable katika Google Images.5 Kila sehemu hizo tayari imo kwenye jibu la utafutaji — hivyo kuitoa ni kiolezo tu, si mradi:

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "ImageObject",
  "contentUrl": "{urls.large}",                 // inahitajika
  "creator": { "@type": "Person",
                "name": "{photographer_full_name}" },
  "creditText": "{photographer_full_name} kwenye {source}",
  "license": "{LICENSE_URL[source]}",           // ukurasa wa leseni wa maktaba yenyewe
  "acquireLicensePage": "{source_image_url}"     // ukurasa wa picha
}
</script>

# LICENSE_URL inaunganisha sehemu ya `source` na leseni inayotawala kweli
# picha — unsplash.com/license, pexels.com/license, pixabay.com/…

Kitu kimoja cha kuzingatia: license inapaswa kuelekeza kwenye leseni inayotawala picha hiyo — ukurasa wa leseni wa maktaba ya chanzo chenyewe — si ukurasa wa muhtasari kwenye eneo lako. Google inaisoma kuamua kustahiki kwa beji, na URL inayojielekeza kwako yenyewe ni dhaifu zaidi kama ishara na ngumu kutetea kama kitu kingine tofauti na kiungo kinachorudi kwako mwenyewe. Weka muhtasari wako wa leseni kama ukurasa wa ndani kwa wasomaji; weka ule wa kimsingi katika alama za HTML.

Na ukiwa bado kwenye kikusanya: pa faili jina fupi lenye maelezo badala ya IMG_0042.jpg, na ongeza picha kwenye sitemap — umbizo la sitemap ya picha ya Google linakubali hadi picha 1,000 kwa kila URL ya ukurasa.6 Vyote viwili ni mstari mmoja kila kimoja katika mfumo na hakuna kinachofanywa kwa mkono kamwe.

Mifumo miwili ya kunakili

Hatua tano hizo hizo, maumbo mawili tofauti sana — moja kwa makala unazoandika, moja kwa nyaraka ambazo lazima ziendane na bidhaa inayoendeshwa. Chagua ile ambayo namna yake ya kushindwa unaijua.

1 · Blogu ya wasanidi katika CI — Markdown kwenye hazina

Makala zinaishi kama Markdown, picha zinawekwa karibu nazo, na kila kitu kinaendesha wakati wa push. Thabiti, kinachokaguliwa kwenye PR, hakuna utegemezi wa muda wa kuendesha kwa API yoyote:

on: { pull_request: { paths: ["content/**.md"] } }

jobs:
  illustrate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: pip install -r requirements.txt
      - run: python plan_to_pr.py $(git diff --name-only origin/main -- 'content/*.md')
        env:
          PEXAFY_API_KEY: ${{ secrets.PEXAFY_API_KEY }}
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
      - uses: peter-evans/create-pull-request@v6   # picha zinaishia kwenye PR
        with: { commit-message: "chore(content): illustrate" }

Binadamu bado anaidhinisha PR, na ndiyo maana: mfumo unapendekeza, mkaguzi anaamua, na front-matter iliyoandikwa inaweza kulinganishwa.

Sehemu ya utafutaji ni GET moja — ombi lenyewe, score_threshold yake na fields ambazo linarejesha zimeelezwa mstari kwa mstari katika mwongozo wa makala moja, hivyo hapa umeagizwa (imported) badala ya kuchapishwa tena. Kile ambacho faili hii inaongeza ni kila kitu ambacho mpango unahitaji na picha moja haihitaji: kujaribu tena kwenye muhtasari uliorejesha kitu chochote, kudai photo_id ili kurasa mbili zisishiriki picha moja, na alt iliyoandikwa kutoka kwa picha iliyorejea.

import frontmatter
from photo_search import search   # GET /search/photos moja; inaruka ids zilizomo kwenye `used`

def find_photo(entry: dict, used: set) -> dict | None:
    """Tafuta; ikiwa maelekezo yalikuwa mahususi sana, panua mara moja, kisha achana."""
    orientation = entry.get("orientation", "landscape")
    for query in (entry["query"], widen(entry["query"])):
        photo = search(query, orientation, used)
        if photo:
            used.add(photo["photo_id"])   # idai: hakuna kurudia kwenye tovuti nzima
            return photo
    return None                        # muitaji anaamua: ruka nafasi, au shindwa

def widen(query: str) -> str:
    """Ondoa kifungu cha mwisho — kawaida ndicho mahususi zaidi."""
    return query.rsplit(" in ", 1)[0] if " in " in query else query

def illustrate(path: str, plan: dict, used: set) -> None:
    post = frontmatter.load(path)
    hero = find_photo(plan["hero"], used)
    if hero is None:                    # hakuna picha kuu ni bora kuliko mbaya
        raise SystemExit(f"{path}: hakuna picha juu ya kizingiti — andika upya maelekezo")

    post["hero"] = {                    # kila kitu ambacho kiolezo kinahitaji
        "src": hero["urls"]["regular"], "w": hero["width"], "h": hero["height"],
        # alt inaelezea picha TULIYOPATA, kamwe si tukio tulilouliza.
        "alt": alt_for(hero, section=post.get("title", "")),
        "bg": hero["color_hex"], "credit": hero["attribution"]["html"],
        "creator": hero["photographer_full_name"], "id": hero["photo_id"],
        "source": hero["source"],
        "source_url": hero["source_image_url"],   # → acquireLicensePage
    }
    open(path, "w").write(frontmatter.dumps(post))

def alt_for(photo: dict, section: str) -> str:
    """alt_description kama msingi, iliyopunguzwa hadi takriban herufi 125 kwa visomaji vya skrini.
    Ipeleke tena kupitia modeli pamoja na aya ikiwa unataka bora zaidi."""
    base = photo.get("alt_description") or photo.get("description", "")
    return base[:125].rstrip(" ,;")

2 · Nyaraka & changelog — picha za skrini kwanza, picha halisi mwisho

Geuza chaguo-msingi za kielekezi. Katika nyaraka za bidhaa, picha ya kweli karibu daima ni UI yako mwenyewe: hati ya Playwright inayofungua build halisi, kuweka viewport iliyowekwa na kunasa hali hasa ambayo aya inaelezea. Michoro inashughulikia kurasa za usanifu, na picha halisi zinaonekana tu kwenye kurasa za dhana na za utangazaji — ambako picha ya skrini haingesema chochote.

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1440, "height": 900},
                            device_scale_factor=2)   # kali kama retina
    page.goto("http://localhost:3000/dashboard")
    page.get_by_role("button", name="New API key").click()
    page.screenshot(path="static/img/docs/new-api-key.png")
    browser.close()
# Inaendesha kazi hiyo hiyo ya CI kama ujenzi wa nyaraka → picha ya skrini haiwezi kamwe
# kuelezea toleo la UI ambalo halipo tena.

Aina mbili zinazofaa kutajwa lakini si mapishi yake mwenyewe. SEO ya kiprogramu inageuza mzunguko: na mamia ya kurasa zinazozalishwa kutoka database hutafuti kwa kila ukurasa — ombi moja linarudisha hadi picha 100, hivyo unatafuta kwa kundi la mada na kugawa kutoka hifadhi, ikiwa na kizuizi cha kipekee kinachofanya kazi ya kuondoa kurudia (muundo huo, kamili). Na majarida na kadi za mitandao ya kijamii zinahitaji picha ile ile katika mikato minne: hifadhi photo_id, omba ukubwa unaohitaji kutoka urls, na utafute tena tu wakati mkato unashindwa kweli.

Mfumo huo huo, kama wakala mmoja

Ikiwa modeli tayari inaandika rasimu, njia fupi zaidi ni kuipa zana ya utafutaji moja kwa moja badala ya kupitisha JSON kati ya michakato. Pexafy inaendesha seva ya Model Context Protocol iliyopangishwa katika mcp.pexafy.com/mcp. Usanidi wa kiunganishi na zana inazotoa vimeelezwa mahali pengine — usanidi wa desktop na kihariri katika mwongozo wa makala moja, toleo lisilo na kiolesura la CI runner katika makala kuhusu maudhui kwa kiwango kikubwa, na jinsi soko pana la viunganishi linavyoonekana — nani anatoa seva ya picha ya MCP, kwa masharti gani — katika uchunguzi wa miundombinu ya utafutaji wa picha kwa mawakala wa AI. Kinachostahili kuonyeshwa hapa ni kinachotokea kwa mfululizo huu wa kazi mara wakala anaposhika zana hizo: unaacha kuwa hatua tano na kuwa maagizo moja.

Wewe  Hii ndiyo rasimu. Jenga mpango wa picha, ichore, na fungua PR.
     Chati tu kutoka namba ambazo tayari zipo kwenye maandishi.

Wakala  → mpango: hero=photo · §2=chart · §3=diagram · §4=photo
      → search_photos(q="a developer working late at a desk with two
         monitors and a mechanical keyboard in a dark room…")
      ← picha 16 · 147 ms · imechagua #1, 3000×1688, ina sifa
      → mermaid-cli build/graph.mmd → static/img/graph.svg
      → chart.py §2 → thamani 4 zimehakikiwa dhidi ya rasimu ✓
      → search_photos(q="two engineers standing at a whiteboard…")
      ← picha 16 · 144 ms · imechagua #1

      ✓ nafasi 4 zimejazwa · wito 2 wa API · alt + sifa + ImageObject imeandikwa
      ⚠ §5 hakurudisha kitu juu ya 0.5 — maelekezo ni ya kufikirika sana, yaliandikwa upya kama
        "mtu kwenye meza ya jikoni akiangalia takwimu kwenye kompyuta ndogo"

Mstari huo wa mwisho ndiyo sababu wakala unafaa kuwa katika mzunguko huu badala ya hati safi: namna ya kushindwa kwa picha otomatiki ni maelekezo mabaya, na kuandika upya maelekezo mabaya ndiyo hasa kile ambacho modeli ya lugha inafanya. Weka sehemu thabiti — ugawaji, kuondoa kurudia, kinga ya namba — katika msimbo.

Gharama ya makala moja iliyoonyeshwa

Nafasi tatu za picha kwa kila makala inamaanisha maombi matatu ya utafutaji, hivyo mpango wa bure (5,000 maombi/mwezi) unashughulikia makala 1,666 kwa mwezi kabla ya swali lolote la kulipa kutokea — na ikiwa utaunganisha utafutaji kwa kundi la mada badala ya kwa kila makala, kikomo hicho kinasogea kwa mpangilio mwingine wa ukubwa. Mchanganuo wa mpango kwa mpango, na muundo wa kuunganisha unaoufanya usiwe muhimu, umo katika makala shirikishi kuhusu kuonyesha maudhui kwa kiwango kikubwa.

Wito mbili za modeli kwa kila makala — moja kwa rasimu, moja kwa mpango wa picha — ni tokeni chache elfu na zitakuwa mstari wa bei nafuu zaidi katika mfumo; utoaji wa Mermaid na matplotlib haugharimu chochote isipokuwa sekunde za CI. Namba inayoshangaza watu ni ipi si nafuu: kuzalisha picha nne kwa kila makala, picha mia nne kwa mwezi, pamoja na majaribio yasiyofanikiwa — na matokeo bado hayana mpiga picha, tarehe wala URL ya chanzo.

Kile mfumo huu hautatui

Sehemu ya uaminifu, kwa sababu kushindwa kunakozuia ni ghali. Makala iliyoonyeshwa vizuri bado ni makala: picha halisi, chati sahihi na alama sahihi za HTML zinaboresha ukurasa unaostahili kuwepo. Havifanyi maudhui membamba, yaliyozalishwa kwa wingi kupanda daraja. Sera za spam za Google zinataja matumizi mabaya ya maudhui kwa kiwango kikubwa — kuzalisha kurasa nyingi hasa kudanganya mpangilio na kutoa thamani ndogo kwa watumiaji, iwe otomatiki inahusika au la — na ubora wa picha si sababu katika hukumu hiyo.7

Hivyo mfumo unaosimama: mfumo huu ni kiwango cha ubora unachodhibiti, kinachotumika kwenye kurasa ambazo tayari zina sababu ya kuchapishwa. Mahali unapolipa dhahiri:

• Asili msomaji anaweza kuthibitisha. Mstari wa sifa wenye mpiga picha halisi na URL ya chanzo ni dai linaloweza kuhakikishwa — na sehemu hizo hizo zinalisha alama za ImageObject ambazo Google inasoma.
• Ufikivu na Core Web Vitals. Maandishi halisi ya alt, vipimo kwenye kila picha, picha kuu ambayo haiwahi kupewa uvivu wa upakiaji. Zidisha kwa kila makala unayochapisha na hii ndiyo hadithi ya ubora wa picha ya tovuti.
• Usahihi mahali panapoweza kuhakikishwa. Chati ambazo namba zake zinathibitishwa dhidi ya makala, picha ya skrini iliyozalishwa kutoka build inayoendeshwa, mchoro unaoweza kukaguliwa kama maandishi kwenye PR — picha tatu ambazo haziwezi kupotoka na ukweli bila jaribio kushindwa.

Kuhusu uwiano wa sifa (attribution), hoja mahususi ya mfululizo huu wa kazi ni finyu: hoja ya kuonyesha daima sifa ya heshima imeelezwa mahali pengine, na kile ambacho kikusanyaji cha kiotomatiki kinaongeza ni kwamba mfuatano huo huo wa attribution unaochapisha ndio creditText ambayo data iliyopangwa (structured data) inahitaji. Field moja, sehemu mbili, zinazotolewa katika pito moja la template — ndiyo sababu mfululizo wa kazi una udhuru mdogo zaidi kuliko binadamu kuiacha.

Wapi kuanzia

1. Ongeza maelekezo ya kielekezi kwa chochote tayari kinachoandika rasimu zako, na chapisha JSON bila kufanya lolote nayo. Soma mipango kumi. Ikiwa maelekezo yanataja mada badala ya matukio, rekebisha maelekezo kabla ya kuandika muunganisho wowote.
2. Unganisha nafasi za picha pekee. GET /search/photos moja kwa kila maelekezo, na hifadhi photo_id tangu siku ya kwanza — kuondoa kurudia kunakofanywa upya baada ya kurasa 3,000 hai ni uhamishaji, si safu.
3. Toa width, height na alt katika commit hiyo hiyo. Ni kazi ya bei nafuu zaidi ya Core Web Vitals utakayowahi kufanya.
4. Kisha ongeza hatua ya 4, michoro kabla ya chati — Mermaid ni maandishi, hivyo ndiyo yenye namna ya kushindwa isiyozidi kosa la sintaksia.
5. Ongeza kinga ya namba kabla chati ya kwanza kufika kwa msomaji, si baada.

Marejeleo & maelezo ya chini