Tutorial: Bilder in Blogartikel einfügen und verlinken

Bilder in Blogartikel einfügenIm Januar zeigte ich euch in einer Art „Tutorial“ wie man richtig verlinkt bzw. was ein Linktext ist. Damals versprach ich auch noch auf Bilder einzugehen. Nun, das werde ich heute dann mal tun. So arg Vieles gibt zum Thema „Bilder einfügen und/oder verlinken“ gar nicht zu beachten. Wer aber möchte, dass seine Bilder in Suchmaschinen gefunden werden, der sollte sich schon ein bisschen Mühe geben. Wie soll das Bild aussehen? Wie soll es heißen? Will ich es verlinken? Fragen über Fragen….

Das wichtigste zuerst: Urheberrechte beachten

Das sollte zwar für jeden klar sein, aber noch immer sehe ich, dass Bilder einfach von Google & Co. kopiert werden oder bei den inzwischen Millionen Produkttests einfach von der Herstellerseite genommen werden. ALLE Bilder unterliegen dem Urheberrecht und man darf sie nicht einfach ohne Erlaubnis benutzen. Einfach dazuzuschreiben „von Google“ oder „©Google“ bringt gar nichts, ihr werdet trotzdem kostenpflichtig abgemahnt. Ausnahmen sind Bilder, die unter einer CC-Lizenzen stehen. CC bedeutet Creative Commons. Das ist eine Non-Profit-Organisation, die vorgefertigte Lizenzverträge anbietet, die einem dabei helfen digitale Medieninhalte im Internet zu veröffentlichen und zu nutzen. Es gibt 6 verschiedene Lizenzen und wenn ein Fotograf sein Bild unter einer dieser Lizenzen „freigibt“, dann darf man  das Bild nutzen, muss aber die Auflagen der jeweiligen Lizenz erfüllen. Das wäre zum Beispiel Namensnennung des Urhebers, oder das Bild darf nur für private und nicht kommerzielle Zwecke benutzt werden. Das Bild darf nicht bearbeitet werden usw.. Hier mal die sechs möglichen Lizenzen.

CC-Lizenzen, Creative CommonsWir alle sollten froh sein, dass es Menschen gibt, die ihre Werke mit uns teilen und deshalb sollten wir ihre Rechte und Wünsche bezüglich der Nutzung beachten. Wenn ihr bei Google „Creative Commons Bilder“ eingebt, findet ihr diverse Seiten, die solche Bilder anbieten.

Bilder in Blogartikel einfügen und verlinken

Ich gehe aber hier mal davon aus, dass ihr eure eigenen Fotos nehmt, die ihr mit eurer Kamera selbst geschossen habt. Deshalb geht es jetzt mit Punkt 1 los:

Punkt 1: Dateiname

Die meisten Fotos, die so geknipst werden heißen zum Beispiel „IMG12345“ oder „CIMG12345“ oder so ähnlich je nach Kamera-Typ. Nun laden die meisten die Bilder von ihrem PC oder ihrer Digicam hoch ohne den Namen zu ändern. Böser Fehler! Milliarden Bilder im Netz haben diese Bezeichnung. Versucht mal bei Google den coolen Schnappschuss vom letzten Halloweenball zu finden, wenn das Bild CIMG12345 heißt? Unter „Halloweenball“ wirst Du es niemals finden, da musst Du schon die genaue Nummer kennen und wer die kennt, sucht ja das Bild nicht, oder?

Also gilt es zunächst die Bilder so umzubenennen, dass man sie identifizieren und über Suchmaschinen finden kann. Ein Foto vom letzten Zoobesuch „IMG23456.jpg“ zu nennen ist genau so Käse wie es „banane.jpg“ zu nennen. Warum also nicht gleich in „zoobesuch.jpg“ oder „zoo-2012.jpg“ umbenennen? Sinnvoll ist es das Bild immer so zu nennen wie das Motiv das drauf ist, oder so wie es gefunden werden soll. Ausnahme, ihr wollt nicht, dass es gefunden wird, weil es privat ist, dann lasst es bei „img23456.jpg“.

Chaosweibs Chaos-Blog - Bilder richtig einfügenPunkt 2: Bild hochladen und in den Artikel einfügen

Die meisten Blogsysteme machen es einem da einfach und man kann in der Maske, in der man den Artikel schreibt auf ein Bildsymbol klicken und das Bild vom PC hochfahren. Ihr könnt es aber auch normal auf euren Server hochladen oder auf eine Seite, die das „Bilder hochladen“ erlaubt. Zum Beispiel imagehack.us oder bilderhoster.net oder wie sie alle heißen.

Ladet ihr ein Bild über euer Blogsystem, so gibt es da ein Fenster in dem ihr alle wichtigen Punkte eintragen könnt. In WordPress sieht das zum Beispiel so aus:

Wordpress Maske Bilder einfügenSymbol zum Bilder hochladen anklicken und Datei auswählen

Datei auswählen

Punkt 3: Titel, Alt-Text, Dateigröße

Gebt dann alles an, was wichtig ist. Bildname, Titel, Beschreibung, Beschriftung, Größe. Je ausführlicher ihr hier seid umso „wichtiger“ nimmt Google euer Bild. Soll heißen, nur Bilder mit Titel, Alt-Text Größe usw. stehen bei der Google Bildersuche vorne.

Tutorial Bilder in Artikel einfügen

Wenn ihr kein Blogsystem habt, dass für euch die meisten Punkte vorgibt, könnt ihr Bilder auch normal in eure Website einfügen. Das geht dann so:

<img title=“Titel“ src=“Bildlink“ alt=“Beschreibung“ width=“200“ height=“250“ />

„width“ und „height“ steht übrigens für „Breite“ und „Höhe“. Hier ist die Größe des Bildes in Pixel anzugeben. Was hier als „alt“ angegeben ist, das nennt sich Alt-Text (= Alternativtext). Das hatte ich hier schon einmal erklärt:

Wer ein Foto in seinen Artikel einfügt, sollte ihm einen sogenannten Alt-Text (Alternativtext) geben. Kann ein Browser keine Bilder anzeigen oder sind sie aus technischen Gründen mal nicht eingeblendet, so kann man wenigstens sehen und lesen, dass da ein Bild sein sollte. Ebenso dient es Blinden und Sehbehinderten, die ihre Texte von diversen Programmen vorgelesen bekommen. Wenn da nichts steht, kann auch nichts vorgelesen werden. Stichwort: barrierefreies Internet.

Punkt 4: Bilder verlinken

Wenn ihr die Bilder so wie oben gezeigt über euer Blogsystem einfügt, dann führt der dort angegebene Link meistens zur Bilddatei selbst. Das hießt wenn man das Bild anklickt, wird es on Originalgröße angezeigt. Es gibt für diesen Link das URL-Feld.

Tutorial Bilder verlinkenDiesen Link zur Bilddatei kann man nun austauschen oder ganz löschen. Löscht man den Link o ist ddas Bild einfach nur ein Bild und man kann es nicht anklicken. Möchte man aber zum Beispiel ein Foto von Halloween mit der Erklärung was „Halloween“ ist zu Wikipedia verlinken, dann ersetzt man den Link einfach in diesen hier: http://de.wikipedia.org/wiki/Halloween

So kann man jedes beliebige Bild zu jeder beliebigen Seite verlinken, oder auch nicht verlinken. Und für alle ohne Blog, die nur eine Website haben, sieht der Link dann so aus:

<a href=“gewünschter Link„><img title=“Titel“ src=“Bildlink“ alt=“Beschreibung“ width=“200“ height=“250“ /></a>

Soweit die wichtigsten Punkte zum Einfügen und Verlinken von Bildern. Ich hoffe, dass ich damit ein bisschen helfen konnte und eure Bilder dadurch korrekt bei Google erscheinen. Sollten noch Fragen offen sein, dann stellt sie mir bitte, ich versuche sie natürlich zu beantworten.

↑↑ wieder nach oben ↑↑
Hat der Artikel gefallen? Dann abonniere doch meinen Feed Chaos-Blog RSS Feed abonnieren

Über Chaosweib

Jutta - Nachtmensch, Bücherwurm, Spielkind, Teeliebhaberin - chaotisch, frech, neugierig, ungeduldig, experimentierfreudig - bloggt über alles, was ihr unter die Finger kommt und freut sich genau jetzt über deinen Kommentar :)
Gepostet unter: gebloggt
Tags: , , ,
Setze ein Lesezeichen auf den Permalink.


14 Antworten auf Tutorial: Bilder in Blogartikel einfügen und verlinken

  1. Tante Trulla sagt:

    Danke für die tollen Tips!

    liebe Grüße

    Tante Trulla

  2. Kai sagt:

    Kleiner Seiteneinwurf zu verlinkten Bildern.
    Als Standard werden Bilder mit Links mit einem 1-2 Pixel breiten Rahmen versehen, um die Verlinkung hervorzuheben. Wen das stört oder es schlicht nicht haben will, der fügt dem Tag noch folgenden Zusatz bei:

    1
    <img src="..." style="border: 0px;" ...... />

    Und schon ist das verlinkte Bild ‚rahmenfrei‘.

    Gruß,
    Kai

    • Chaosweib sagt:

      Wenn Du mir sagst, was ich da korrigieren soll? Es kam nichts an, außer dem was da steht. Hab kurz noch gegoogelt, aber auf die Schnelle nichts gefunden. Zur Not mail es mir, ich füge es dann ein. blog at chaosweib . com

      • Kai sagt:

        Was da oben fehlt ist dieses:

        [ img src=“…“ style=“border: 0px;“ …… ]

        Anstelle der [] natürlich mit entsprechend.

        • Kai sagt:

          BEI ALLEN GÖTTERN! Anstelle der [] benutze man bitte die üblichen „dreieckige-HTML-Befehlsanfangs-und-Ende-Klammern“ für HTML-Tags. (also echtmal^^)

        • Kai sagt:

          Und jetzt darfst du aufräumen. *grinst*

  3. Kai sagt:

    *narf* wen die Webmistress bitte so nett wäre, meinen vorhergehenden Kommentar zu korrigieren – und dann diesen hier zu löschen?

    Ich Schussel hab die html-Einschränkungen in den Kommentaren ganz vergessen ^.^

  4. Tolle Tipps, danke!
    Mich würde noch interessieren was ein follow link ist und wie ich den setzte. Habe schon alles abgesucht, finde aber nichts. Villeichts hast du ja ein Rat für mich.
    LG
    Manu

  5. Enrico sagt:

    Hallo,

    wie von dir gewohnt, wieder ein super Tutorail.

    Sicher war hier vieles schon bekannt, dennoch habe ich nicht gewusst, das die URL zum Bild so einfach austauschen kann.

    danke für den Tipp

  6. Stefan sagt:

    Bilder auf die tatsächliche Größe skalieren sollte hier erwähnt werden. Denn auch das flotte Laden einer Seite darf nicht außer acht gelassen werden. Ansonsten 1A Anleitung 🙂

Jetzt mitreden!

Bitte beachte die Netiquette. Ich behalte mir vor Kommentare mit Werbe-Links und/oder Keywords als Namen zu editieren oder zu löschen! ↑↑ wieder nach oben ↑↑

Deine E-Mail-Adresse wird nicht veröffentlicht.