Reuse von Bildern, Sitemaps und SEO

[wario]

Hallo zusammen,

ich habe eine recht banale Frage zum Thema in der Überschrift und hoffe, dass mir jemand von euch vielleicht Feedback dazu geben kann.

In einem Card Layout auf einer Kategorie Seite habe ich eine bestimmte Anzahl an Cards, die jeweils einen Begriff bzw. ein Element dieser Kategorie darstellen. Der Begriff ist gleichzeitig das Keyword und kommt damit sowohl in der Überschrift als auch im Fließtext einer Card vor. Manche Fließtexte haben interne und/oder externe Links, die wiederum den Begriff enthalten. Soweit so gut. Um das Layout etwas aufzulocken und weitere für SEO relevante Elemente zu haben, sollte jede Card natürlich auch ein Bild im Kopf / Header haben.

Da es aber recht abstrakte und schwierig zu visualisierende Begriffe sind und ich mir zunächst keine (unpassenden / sinnlosen) Themenbilder an den Haaren herbeiziehen wollte, aber gleichzeitig durch den Dateinamen und die Alt / Title Attribute noch weitere für SEO relevante Elemente haben möchte, habe ich zunächst einfach eine SVG Grafik erzeugt / genommen, die ich im Kopf / Header jeder Card als Bild einbinde, damit ich mein HTML nicht unnötig aufblähe und der Browser es als Bild nur einmal Lazy Loaden und dann Cachen kann und ich keine unnötigen weiteren Requests für eigentlich sinnlose Bilder im Hintergrund habe.

Nun zu meiner Frage:

Beim Schreiben der Sitemap müsste ich nun auf den Kategorie Seiten jeweils in einer kleinen zweistelligen Anzahl ein und dieselbe Grafik redundant als Bild angeben. Die Titel unterscheiden sich natürlich. Kann das von Suchmaschinen abgestraft werden, wenn man ein und dasselbe Bild zig mal verwendet?

Oder würdet ihr euch die Mühe machen, für jeden Begriff ein individuelles Bild bzw. eine individuelle Grafik zu erstellen, damit ich das Keyword sogar im Dateinamen haben kann? Und einfach die zusätzlichen Requests im Hintergrund in Kauf nehmen, da ich ja eh Lazy Loade?

Sprich was ist für SEO am besten?

Vielen Dank und viele Grüße

[rkr]

Beim Schreiben der Sitemap müsste ich nun auf den Kategorie Seiten jeweils in einer kleinen zweistelligen Anzahl ein und dieselbe Grafik redundant als Bild angeben. Die Titel unterscheiden sich natürlich. Kann das von Suchmaschinen abgestraft werden, wenn man ein und dasselbe Bild zig mal verwendet?

"Abgestraft" ist wohl das falsche Wort.
"Ignoriert" trifft es wahrscheinlich besser.

Du hast ja oben auch auf jeder Seite wahrscheinlich immer das gleiche Logo
Was den Main-Content betrifft: Ich denke nicht, dass ein wiederkehrendes Platzhalter-Bild deinen Content abwertet. Mir würde jetzt zumindest kein plausibler Grund einfallen, warum Google sowas negativ bewerten sollte.

[wario]

Und wie sieht das aus, wenn man statt sich individuelle Grafiken zu erstellen einfach die eine nimmt und für jede Card einmal kopiert und unter dem passenden Keyword im Dateinamen speichert? Suchmaschinen dürften ja wohl noch keinen Rückschluss auf den Inhalt eines Bildes ziehen können, oder? Oder könnte ggf. die exakt gleiche Dateigröße schon dazu führen, dass es als "Cheaten" gilt?

[psoido]

Soweit ich informiert bin bewertet zumindest Google keine Bilder. Wenn es ein und das selbe Bild ist, dann aus Gründen der Performance dieses nicht zigmal mit anderem Dateinamen abspeichern und verwenden, sondern immer ein und das selbe verwenden.

Also ob du dir die Mühe machst musst du alleine entscheiden. Bisher scheint es so, dass es deiner Ansicht nach zu mühevoll ist. Das liegt eventuell daran, dass deine Vorstellung einer Umsetzung zu mühevoll ist. Teile sie doch mal mit!

Ansonsten ist das keine Hexerei. Erstelle dir ein Array.

$catimgarray = [
"catname1" => "catimg1.jpg",
"catname2" => "catimg2.jpg",
"catname3" => "catimg3.jpg"
]; 

und dann das entsprechende Bild per Kategorienamen aus dem Array extrahieren.

$catimgcurrent = $catimgarray[$current_catname]; 

Andere Möglichkeiten ergeben sich mit PHP GD, Gmagick oder ImageMagick.
https://www.php.net/manual/de/book.image.php
https://www.php.net/manual/de/book.gmagick.php
https://www.php.net/manual/de/book.imagick.php

Wie soll das mit der Sitemap verstanden werden? Wieso willst du die Grafiken einer Page in die Sitemap packen? Da gehören nur Page-URLs rein. Außer die Grafiken sollen standalone angezeigt werden, ohne Webpage drumherum.

[rkr]

Und wie sieht das aus, wenn man statt sich individuelle Grafiken zu erstellen einfach die eine nimmt und für jede Card einmal kopiert und unter dem passenden Keyword im Dateinamen speichert?

Deine Sicht auf das Thema SEO ist viel zu esoterisch.

Suchmaschinen dürften ja wohl noch keinen Rückschluss auf den Inhalt eines Bildes ziehen können, oder? Oder könnte ggf. die exakt gleiche Dateigröße schon dazu führen, dass es als "Cheaten" gilt?

Warum genau glaubst du denn, dass eine Suchmaschine hier einen Betrug wittern könnte?
Wenn du Inhalte erstellt, die für einen normalen Besucher keinen Sinn machen, dann brauchst du diese Inhalte auch nicht für Suchmaschinen erstellen.

[tk1234]

[…] Um das Layout etwas aufzulocken und weitere für SEO relevante Elemente zu haben, sollte jede Card natürlich auch ein Bild im Kopf / Header haben.

Da es aber recht abstrakte und schwierig zu visualisierende Begriffe sind und ich mir zunächst keine (unpassenden / sinnlosen) Themenbilder an den Haaren herbeiziehen wollte, aber gleichzeitig durch den Dateinamen und die Alt / Title Attribute noch weitere für SEO relevante Elemente haben möchte, […]

*meep* Stop. Ich glaube du hast etwas aus dem Blick verloren für wen Internetseiten eigentlich sind: die sind *nicht* für Suchmaschinen sondern für Benutzer. Du musst dich also immer fragen, was für den Benutzer sinnvoll/wichtig ist - und irgendwelche alt-Attribute die für SEO-Spam missbraucht werden sind es garantiert nicht: da gehört einzig und alleine ein Alternativtext rein für die Benutzer die das Bild nicht sehen können, sonst *nichts*!

[psoido]

Oje, schon wieder SEO...
Wenn jemand an SEO glaubt, dann ist ihm hier wenig bis gar nicht zu helfen, weil er müsste vorher vom Glauben abfallen. Das zu erledigen schafft hier wohl keiner der Helfenden.

[wario]

Hmm, was heißt Alt bzw. SEO Spam.

Wie geschrieben geht es primär darum, das Layout etwas aufzulockern, damit ich nicht nur die Überschriften und Fließtexte in den Cards habe.

Da es recht abstrakte Begriffe sind, verzichte ich auf unpassende Themen Bilder, nur damit dort überhaupt irgendein Bild ist. Da null Mehrwert für den User. Stattdessen eine schöne SVG Grafik, die ins Gesamtdesign der Seite passt. Einfach zur Auflockerung.

Wenn ich die nun sagen wir 25 mal als Inline SVG einbette, dann ist das schlicht falsch und ich blähe mein HTML unnötig auf. Daher die Überlegung das SVG als Bild einzubinden, dann muss ich es nur einmal laden / Lazy Loaden, anstelle von 25 unpassenden Themenbildern ohne Mehrwert. Ob ich es auf diesem Weg auf der Seite nur das eine Mal verwende oder 100 mal ist was die Requests und Performance angeht ja egal.

Hier geht es nicht darum, dass ich nicht weiß wie ich in PHP mit Bildern arbeite oder eine Seite NUR für Suchmaschinen erstellen möchte.

Aber wenn ich aus den obigen Gründen schon ein Bild anstatt von vielen Inline SVGs nutze, dann dachte ich, könne man das Bild bzw. die redundanten Bilder auch irgendwie für SEO nutzen. Sprich jedem Bild einen zur Card passenden Titel geben, das in der Sitemap angeben, usw.

Ob diesen Vorgehen falsch ist.

[protestix]

Vielleicht liest du dir mal diesen Artikel durch, dann hast du ungefähr eine Vorstellung wohin die Reise geht und was Google alles für Möglich hält.

Wie schon gesagt, mache Seiten für Benutzer, stelle ihnen einen Mehrwert zur Verfügung.

Wenn du selbst der Ansicht bist, das du deinen eigene Seite wäre sie nicht von Dir, schnell wieder weggeklickt hättest, dann ist sie wohl auch für Google überflüssig.

[psoido]

Wie ist das vorzustellen, dass du eine Grafik (als svg oder jpg oder ...) mehrmals in eine Webpage einbindest? Also was ist der Effekt vom mehrmaligen anzeigen?

Was erwartest du dir, wenn du eine Grafik in der Sitemap angibst? Eine Sitemap (wenn wir hier vom gleichen sprechen) ist nur für Bots (Search-RoBots) und nicht für Human. Die sind auch nicht human readable, außer sie werden per Style extra so gestaltet.

Vielleicht meinst du auch etwas ganz anderes? Wenn eine deiner Webpages in Social Media verlinkt wird, dann werden die Metatags gegrabbt und verwendet. Da gibt es neben den default metatags auch spezielle (nicht standardisierte), wie die og:tags. Da würde ein zur Webpage passendes Bild sinnvoll sein.

<meta property="og:image" content="https://www.example.com/path/bilddateiname.jpg">

Das hat aber nichts mit SEO zu tun.

Wenn alles korrekt gemacht wird, dann ist SEO von allein erledigt.

[wario]

Sicher - OG, strukturierte Daten, usw. sind mir ein Begriff.

Evtl. habe ich auch einfach in den falschen Hals bekommen, dass Bilder mit Dateinamen und Attributen für das Ranking eine Rolle spielen . Wobei ich das aus mehreren Blog Posts (die natürlich auch falsch liegen können) und wenn ich mich nicht ganz falsch erinnere auch aus einem Google Video habe.

Noch eine andere Frontend Frage:

Wenn ich Bilder über irgendeine der JS Bibliotheken Lazy Loade, da natives Lazy Loading noch nicht von jedem Browser unterstützt wird und manche Browser unterhalb des Viewports liegende Bilder trotzdem Eager Loaden, dann ist der Best Case ja gar keinen Platzhalter zu verwenden. Damit bleibt aber das Src bzw. Srcset Attribut des Bildes leer, was invalides HTML darstellt.

Ist das ein Problem oder kennt jemand von euch einen Weg, das auch ohne Platzhalter zu umgehen?

[erc]

Wie geschrieben geht es primär darum, das Layout etwas aufzulockern, damit ich nicht nur die Überschriften und Fließtexte in den Cards habe.

Da es recht abstrakte Begriffe sind, verzichte ich auf unpassende Themen Bilder, nur damit dort überhaupt irgendein Bild ist. Da null Mehrwert für den User. Stattdessen eine schöne SVG Grafik, die ins Gesamtdesign der Seite passt. Einfach zur Auflockerung.

Also willst du nichts sagende Designelementen ein Inhalt zuschreiben, den sie gar nicht haben?

Evtl. habe ich auch einfach in den falschen Hals bekommen, dass Bilder mit Dateinamen und Attributen für das Ranking eine Rolle spielen . Wobei ich das aus mehreren Blog Posts (die natürlich auch falsch liegen können) und wenn ich mich nicht ganz falsch erinnere auch aus einem Google Video habe.

Kenn ich auch so. Aber du kannst es noch aus einer anderen Richtung betrachten. Wenn das Bild ein "rotes Rennrad" zeigt, dann ist es doch sinnvoller das Bild "rotes_rennrad.webp" zu nennen als "ca8cae5aaa36bab4e6a182acf601c46a.webp". Wenn das dazu noch den Suchmaschinen gefällt, umso besser.

[psoido]

hm... Also Lazy und Eager sagt mir nix.

Wegen dem leeren "src". Eventuell ein 1x1px transparent png als default und dieses dann per Javasript austauschen. Aber wenn du eh JS verwendest, dann kannst du auch gleich das komplette <img> Element mit JS erstellen und "append"en. ist empfohlen.

var x = document.createElement("IMG");

https://www.w3schools.com/jsref/dom_obj_image.asp
https://www.w3schools.com/jsref/met_...ppendchild.asp

Was wichtig ist, dass das HTML valide ist. Leider ist es schwer bis unmöglich ein durch JS generiertes HTML auf seine Validität hin zu prüfen. Also musst du die Standards lernen. <img> benötigt minimum "src" und "alt".

Dateinamen sind nur dann relevant, wenn sie auch gelesen werden, also wenn sie sichtbar sind. Dann sollen human readable Dateinamen, die ungefähr dem Inhalt entsprechen, verwendet werden. Aber das ist nur dann der Fall, wenn sie blank (ohne HTML) im Browser angezeigt werden sollen. Der Inhalt vom "alt" Attribut soll beschreiben, was im Bild zu sehen ist. Das ist auch für Barrierefreiheit, und das ist nicht zu unterschätzen. Leute, für die das wichtig ist, gibt es, und es hilft ihnen sehr. Also keinen Blödsinn veranstalten und nicht "Angela Merkel nackt" bei "alt" reinschreiben. Wenn alles korrekt ist, passt auch das Ranking (was nur bedingt etwas mit SEO zu tun hat). Hier wäre ein externes neues Thema, ob Google Bilderkennungssoftware benutzt um damit die vom Searchbot indexierten Bilder zu prüfen.

[rkr]

hm... Also Lazy und Eager sagt mir nix.

Lazy = Etwas so weit wie möglich hinauszögern.
Eager = So früh wie möglich umsetzen.