Produktbeschreibungen: Scraping Surgeon

Mit Scra­ping Sur­ge­on kannst du mit chir­ur­gi­scher Prä­zi­si­on fest­le­gen, wel­che Abschnit­te einer Web­sei­te Zimm­Wri­ter an die KI über­mit­teln soll. Dazu brauchst du Scra­peOwl und CSS-Kennt­nis­se (oder die Hil­fe von jeman­dem, der sie hat).

Klingt inter­es­sant. Aber was soll das bringen?

Das lässt sich am bes­ten mit einem Bei­spiel erklä­ren. Stell dir eine Ama­zon-Pro­dukt­sei­te für ein iPho­ne 15 Pro Max vor.

Die Pro­dukt­sei­te ent­hält Infor­ma­tio­nen über das iPho­ne 15 Pro Max, aber auch über ande­re iPho­ne-Model­le, iPho­ne-Zube­hör und viel­leicht sogar ande­re Tele­fo­ne. Sie könn­te sogar Infor­ma­tio­nen über Pro­duk­te ent­hal­ten, die ande­re Leu­te zusam­men mit dem iPho­ne gekauft haben.

Wenn Zimm­Wri­ter (oder jeder ande­re KI-Schrei­ber) die gesam­te Sei­te aus­liest und die gesam­ten aus­ge­le­se­nen Daten zur Zusam­men­fas­sung an die KI schickt, ist das ein Pro­blem. Das Pro­blem ist ein zweifaches:

1. Die KI könn­te ver­wirrt wer­den, wel­che Infor­ma­tio­nen sich auf das iPho­ne 15 Pro Max beziehen
2. Die KI könn­te auch ande­re Infor­ma­tio­nen in die Zusam­men­fas­sung auf­neh­men, die für das, wofür du die Zusam­men­fas­sung ver­wen­dest, nicht rele­vant sind (z. B. einen Pro­dukt­be­richt über das iPho­ne 15 Pro Max).

Scra­ping Sur­ge­on ist ein Weg, um all die­se über­flüs­si­gen Infor­ma­tio­nen her­aus­zu­fil­tern und nur rele­van­te Infor­ma­tio­nen auslesen.

Das Fundament legen

Das Herz­stück von Scra­ping Sur­ge­on ist die Ver­wen­dung von Cas­ca­ding Style Sheets (CSS) IDs und/oder Klas­sen, um zu iden­ti­fi­zie­ren, wel­che Inhal­te auf einer Web­sei­te gescraped wer­den sollen.

Du hast viel­leicht 0% Ahnung von CSS und das macht es sehr schwie­rig, neue Scra­ping Sur­ge­on Domains ohne Hil­fe ein­zu­rich­ten. Zumin­dest (und das erfor­dert null CSS-Kennt­nis­se) soll­test du dein Ama­zon-Part­ner-Tag zum Stan­dard-Ama­zon-Pro­fil hin­zu­fü­gen (im Drop­down-Menü Gespei­cher­te Domains) und dann auf die Schalt­flä­che Aktua­li­sie­ren kli­cken. Danach soll­test du dich nicht mehr mit Scra­ping Sur­ge­on beschäf­ti­gen, es sei denn, jemand hilft dir.

Aber wenn du dich mutig fühlst und für das Aben­teu­er lebst, fin­dest du hier eine Ein­füh­rung in HTML und CSS. Um Scra­ping Sur­ge­on zu benut­zen, brauchst du ein paar Grund­kennt­nis­se in bei­den Bereichen.

HTML-Fibel

HTML ist das, was du siehst, wenn du in Chro­me mit der rech­ten Maus­tas­te auf den Hin­ter­grund einer Web­sei­te klickst und “Sei­ten­quel­le anzei­gen” wählst.

Der obi­ge Code wird HTML genannt und hat ver­schie­de­ne „Tags“. Im obi­gen Beispiel:

• Apple iPho­ne 15 Pro Max, 1TB wird der „Inhalt“ genannt
• ist der schlie­ßen­de Tag

Es gibt zwar vie­le HTML-Tags, aber eini­ge der gän­gigs­ten sind:

• , , , , usw. 
  • Öff­nen­de und schlie­ßen­de HTML-Tags für Überschriften
  • Öff­nen­de und schlie­ßen­de HTML-Absatz-Tags
  • HTML div-Tags zum Öff­nen und Schließen
  • Ein div ist wie ein all­ge­mei­ner Con­tai­ner, der Din­ge enthält
  • HTML-Hyper­link-Tags zum Öff­nen und Schließen
  • HTML image öff­nen­de und schlie­ßen­de Tags
  • HTML span öff­nen­de und schlie­ßen­de Tags
  • Ein span ist wie ein div, aber für Inline-Inhal­te (ohne Zei­len­um­bruch) gedacht.

Ein HTML-Tag ist wie das Innen­le­ben eines Autos; es ist nicht schön, aber man braucht den Motor, die Stoß­dämp­fer und die Antriebs­wel­le, sonst funk­tio­niert das Auto nicht.

Die meis­ten Leu­te inter­es­sie­ren sich mehr für das Aus­se­hen als für die Funk­ti­on des Autos. Die­ses „Aus­se­hen“ wird durch CSS definiert.

CSS-Fibel

Cas­ca­ding Style Sheets (CSS) sind wie die äuße­re Hül­le eines Autos und ver­lei­hen einer Web­sei­te ihr ele­gan­tes Aussehen.

Für die Gestal­tung einer Sei­te wer­den so genann­te CSS-Selek­to­ren ver­wen­det. Die bei­den gän­gigs­ten sind ID- und Klas­sen­se­lek­to­ren. Am bes­ten kann man sich ID- und Klas­sen­se­lek­to­ren als Schlüs­sel­wör­ter vor­stel­len, die ein Web­sei­ten­ent­wick­ler definiert.

Sie fügen Ihren HTML-Tags eini­ge CSS-Selek­to­ren hin­zu, und die­se Selek­to­ren (Schlüs­sel­wör­ter) ver­wei­sen auf eine CSS-Datei, die jedes Schlüs­sel­wort mit CSS-Code defi­niert. Klingt kom­pli­ziert, ist es aber nicht. Las­sen Sie mich Ihnen ein sehr ein­fa­ches Bei­spiel geben.

Web­sei­te HTML:

Hier sind eini­ge Pro­dukt­de­tails zum neu­en Apple iPhone!

CSS-Datei der Webseite:

#productTitle {
font-weight: 600;
font-size: 28px;
}

.center {
text-align: center;
}

.tagline {
font-weight: 400px;
font-size: 22px;
}

Ein CSS-ID-Selek­tor soll­te nur ein­mal in der HTML-Datei vor­kom­men. In die­sem Fall ist es pro­duct­Tit­le und er ist der

Ein CSS-Klas­sen­se­lek­tor kann mehr­mals im HTML-Code vor­kom­men. Im obi­gen Bei­spiel ist er der Klasse

Tag zuge­wie­sen. Du siehst, dass es als class=“center” im HTML, son­dern als .cen­ter in der CSS-Datei.

Wenn du genau hin­siehst, siehst du auch, dass es mög­lich ist, einem ein­zi­gen HTML-Tag meh­re­re Klas­sen zuzu­wei­sen. Im Absatz-Tag haben wir sowohl die Klas­se cen­ter als auch die Klas­se tag­li­ne zuge­wie­sen, getrennt durch ein Leerzeichen.

Verschachtelte HTML-Tags

Das letz­te wich­ti­ge Kon­zept, das du für Scra­ping Sur­ge­on ver­ste­hen musst, ist das Kon­zept der ver­schach­tel­ten HTML-Tags.

Beach­te, dass der über­ge­ord­ne­te div-Tag zwei unter­ge­ord­ne­te Absatz-Tags ent­hält. Die Absatz-Tags befin­den sich inner­halb des div-Tags (und sind daher unter­ge­ord­ne­te Tags), weil sie nach dem öffnenden

Tag, aber vor dem schließenden

Tag.

Der Grund, war­um dies für Scra­ping Sur­ge­on wich­tig ist, liegt dar­in, dass Scra­ping Sur­ge­on bei einem Ver­weis auf ein über­ge­ord­ne­tes Tag alle Inhal­te inner­halb des refe­ren­zier­ten Tags, ein­schließ­lich sei­ner Kin­der, scra­pen wird. Bit­te erin­ne­re dich an die­sen Punkt, denn es ist wich­tig, ihn zu ver­ste­hen.

Scraping Surgeon Konfiguration

Scra­ping Sur­ge­on befin­det sich im Menü Zimm­Wri­ter Optio­nen, da es sich um eine Funk­ti­on han­delt, die man ein­fach ein­rich­ten kann. Wenn Zimm­Wri­ter eine Web­sei­te scrapt, wird Scra­ping Sur­ge­on ver­wen­det, wenn die in Scra­ping Sur­ge­on gespei­cher­te “Domain” (mit akti­vier­tem Kon­troll­käst­chen) mit der Domain der gescrap­ten Web­sei­te übereinstimmt.

Domain

Für eine Domain gel­ten die fol­gen­den Regeln:

1. Sie muss einen Punkt enthalten 
   • ama​zon​.de = OK
   • ama­zon. = OK (nütz­lich für den Abgleich meh­re­rer TLDs)
2. Er darf nicht www enthalten
3. Er darf kein https enthalten

CSS-Titelklasse/ID oder HTML-Tags h1 oder h2

Du kannst ent­we­der eine ein­zel­ne CSS-Klas­se (.class) oder ID (#id) ange­ben, die das Ele­ment (oder über­ge­ord­ne­te Ele­ment) reprä­sen­tiert, das den Titel der Sei­te ent­hält, oder statt­des­sen einen der HTML-Tags h1 oder h2 angeben.

Im fol­gen­den Ama­zon-Bei­spiel habe ich mich ent­schie­den, den HTML-Tag h1 nicht anzu­ge­ben, weil Ama­zon-Sei­ten manch­mal meh­re­re h1-Tags haben und das die KI durch­ein­an­der brin­gen würde.

Des­halb habe ich mich für die CSS-ID #pro­duct­Tit­le ent­schie­den, die nor­ma­ler­wei­se immer mit einem Ama­zon-Pro­dukt­ti­tel erscheint. Ein Bei­spiel für den HTML-Code lau­tet wie folgt:

Beach­ten Sie, dass der Titel­in­halt „Apple iPho­ne 15 Pro Max, 1TB“ von einem HTML span-Tag mit einer id=„productTitle“ umge­ben ist. Ich habe mir ver­schie­de­ne Ama­zon-Pro­dukt­sei­ten ange­se­hen, und sie alle schei­nen die­se ID zur Bezeich­nung des Pro­dukt­ti­tels zu verwenden.

Was wäre, wenn ich die Klas­se „.pro­duct-title-word-break“ anstel­le der gefun­de­nen ID ver­wen­det hät­te? Nun, die Klas­se „.pro­duct-title-word-break“ wird vie­le Male auf einer Ama­zon-Pro­dukt­sei­te wie­der­holt. Sie ist also eine schlech­te Wahl, da sie vie­le ande­re Din­ge als nur den Pro­dukt­ti­tel ent­hal­ten wird.

Der Trick besteht also dar­in, CSS-Klas­sen und IDs zu fin­den, die sich in der Regel nur auf den Arti­kel bezie­hen, den Sie aus­le­sen möch­ten, und die auf vie­len ähn­li­chen Web­sei­ten der­sel­ben Domain kon­sis­tent sind (z. B. ver­wen­den alle Ama­zon-Sei­ten die­sel­ben Bezeich­ner für die Elemente).

CSS Image Class/ID

Die Bild­klas­se (.class) oder ID (#id) ist optio­nal. Wenn Sie sich ent­schei­den, sie zu ver­wen­den, dann gilt sie in die­sen Situationen:

1. In Pen­ny Arca­de akti­viert eine Scra­ping Sur­ge­on-Domain-Über­ein­stim­mung SS. Wenn der Bild-CSS-Selek­tor vor­han­den ist und ein gül­ti­ges Bild gefun­den wird (jpg, jpeg, png oder webp), dann wird das Bild her­un­ter­ge­la­den und auf Ihrer Fest­plat­te unter dem­sel­ben Namen wie der Datei­na­me des Blog­posts gespei­chert. Es wird auch in Word­Press als Fea­tured Image hoch­ge­la­den, wenn Sie Ihre Web­site ver­lin­ken. Hin­weis: Es liegt in Ihrer Ver­ant­wor­tung, alle Urhe­ber­rechts­ge­set­ze zu beach­ten und zu befolgen.
2. Wenn Sie in SEO Wri­ter eine Scra­ping Sur­ge­on-Domain-Über­ein­stim­mung für eine Unter­ti­tel-URL ange­ben, wird SS akti­viert. Wenn der Bild-CSS-Selek­tor vor­han­den ist und ein gül­ti­ges Bild gefun­den wird (jpg, jpeg, png oder webp), wird das Bild her­un­ter­ge­la­den und auf Ihrer Fest­plat­te mit dem­sel­ben Namen wie der Datei­na­me, aber mit 0001, 0002, 0003 usw. am Ende, gespeichert.
3. Die nume­ri­sche Rei­hen­fol­ge wird ver­wen­det, wenn Sie meh­re­re Unter­ru­bri­ken mit jeweils eige­nen Bil­dern haben. Es wird auch als Bild für die Zwi­schen­über­schrift in Word­Press hoch­ge­la­den (nicht als Fea­tured Image), wenn Sie Ihre Web­site ver­lin­ken. Hin­weis: Es liegt in Ihrer Ver­ant­wor­tung, alle Urhe­ber­rechts­ge­set­ze zu beach­ten und zu befolgen.

Der Selek­tor, den ich für das Bild gewählt habe, war #img­Tag­Wrap­per. Der Tag ist ein über­ge­ord­ne­ter Tag, weil er den Tag mit dem gewünsch­ten Bild enthält.

CSS Text Classes/IDs or HTML Tags p, h2, ul, ol, li, section, span

In Zimm­Wri­ter kannst du bis zu fünf CSS-Klas­sen und/oder IDs und/oder HTML-Tags p, h2, ul, ol, li, sec­tion, span ange­ben, die für ver­schie­de­ne Abschnit­te auf der Sei­te ste­hen, deren Text aus­ge­le­sen wer­den soll.

Tren­ne die CSS-Ele­men­te und HTML-Tags durch ein Komma.

Hier ist die Lis­te, die Zimm­Wri­ter (zum Zeit­punkt der Erstel­lung die­ses Arti­kels) für Ama­zon verwendet:

#feature-bullets, #productDescription_feature_div, #prodDetails, #tech, .review-text

Du kannst die CSS-Selek­to­ren frei mit den erlaub­ten HTML-Tags kom­bi­nie­ren. Hier ist ein Beispiel:

#feature-bullets, p, #prodDetails, ol, .review-text

String zum Anhängen an das Ende der URL / Amazon Affiliate Code

Für eine Ama­zon-Domain fügst du ein­fach dei­nen Affi­lia­te-Code hin­zu. Er soll­te aus einer Zei­chen­fol­ge, einem Bin­de­strich und eini­gen Zah­len bestehen (z. B. abc034-20).

Bei allen ande­ren Domains kannst du an das Ende der URL anhän­gen, was du willst.

Wie funk­tio­niert das bei der Aus­füh­rung von ZimmWriter?

Die­se Zei­chen­fol­ge bzw. die­ser Part­ner­code wird für den Auf­ruf zur Akti­on in Zimm­Wri­ter ver­wen­det. Im Moment erstellt Zimm­Wri­ter einen Call-to-Action-But­ton in zwei Instanzen:

1. In Pen­ny Arca­de kannst du beim Scra­ping einer Domain, die mit einer von Scra­ping Sur­ge­on gespei­cher­ten Domain über­ein­stimmt, eine benut­zer­de­fi­nier­te Glie­de­rungs­va­ria­ble {cta} in einer benut­zer­de­fi­nier­ten Glie­de­rung ver­wen­den. Zimm­Wri­ter erstellt dann am Ende die­ses Unter­über­schrif­ten­ab­schnitts eine Schalt­flä­che, die auf die gescrap­te URL ver­weist und am Ende den ange­häng­ten String oder den Ama­zon-Part­ner­code enthält.
2. Wenn du im SEO Wri­ter eine Domain für eine Unter­über­schrift scrapst, die mit einer von Scra­ping Sur­ge­on gespei­cher­ten Domain über­ein­stimmt, und das Kon­troll­käst­chen “Pro­dukt­lay­out aus­lö­sen” akti­viert ist. Zimm­Wri­ter erstellt eine Schalt­flä­che am Ende der Unter­über­schrift, die auf die gescrap­te URL ver­linkt und den ange­häng­ten String oder Ama­zon-Part­ner­code am Ende enthält.

Als Rezension behandeln

Im Moment gilt die­se Ein­stel­lung nur für Pen­ny Arca­de, wenn du nicht den Ori­gi­nal­ti­tel ver­wen­dest. Sie führt dazu, dass die KI den Titel mit dem Wort “Rezen­si­on” schreibt, das irgend­wo dar­in vorkommt.

Neh­men wir an, du durch­suchst eine Ama­zon-Sei­te für ein “iPho­ne 15 Pro Max”.

Ohne die Opti­on “als Rezen­si­on behan­deln” zu akti­vie­ren, könn­te Zimm­Wri­ter einen Pen­ny Arca­de Arti­kel mit dem Titel “iPho­ne 15 Pro Max: Unglaub­li­che Funk­tio­nen und soli­de Leis­tung” erstellen.

Wenn “als Rezen­si­on behan­deln” akti­viert ist, könn­te Zimm­Wri­ter einen Pen­ny Arca­de-Arti­kel mit dem Titel “iPho­ne 15 Pro Review” erstel­len: Unglaub­li­che Funk­tio­nen und soli­de Leistung.

Aktiviere

Akti­vie­re die Domain für die Erken­nung durch Scra­ping Sur­ge­on oder ent­fer­ne das Häk­chen, um sie zu deak­ti­vie­ren. Du kannst die Domain auch aus Scra­ping Sur­ge­on löschen, aber in man­chen Situa­tio­nen ist es sinn­vol­ler, das Häk­chen bei “Akti­vie­ren” zu entfernen.

Gespeicherte Domains

Du kannst bis zu 50 Domains in Scra­ping Sur­ge­on spei­chern. Auch hier gilt: Ein­stel­len und ver­ges­sen. Du musst eine Domain nicht “laden”. Solan­ge die Domain mit akti­vier­tem Kon­troll­käst­chen gespei­chert wird, ist sie für die Erken­nung beim Scra­ping in Zimm­Wri­ter gültig.

Speichern / Aktualisieren / Löschen

Kli­cke auf die Schalt­flä­che Spei­chern, um eine neue Domain für Scra­ping Sur­ge­on zu speichern.

Drü­cke den Aktua­li­sie­ren-But­ton, um Ände­run­gen an einer bestehen­den Domain zu speichern.

Drü­cke auf die Schalt­flä­che “Löschen”, um die Domä­ne zu löschen.