**Έχουμε περίπου 1061 τεχνολογικά άρθρα στο blog Sotostips -στα 10 χρόνια λειτουργίας, πολλά από αυτά ακόμη χρήσιμα ΚΑΙ ΣΥΝΕΧΙΖΟΥΜΕ ΠΛΕΟΝ ΜΕ ΕΠΙΣΟΔΕΙΑ PODCAST**
Podcast ειναι "ηχογραγημενο αρθοο". SoundCloud είναι μια πλατφορμα podcasting. Σε PC, laptop 1 κλικ και παιζει κι μπορεις κ να το κατεβασεις το καθε επισοδειο. Σε κινητο εγκαθιστας τη μικρη εφαρμογη για να τα ακουσεις

Βελτίωση απόδοσης φωτογραφιών στο blog(alt attribute)

Ακολουθώντας τις καλές πρακτικές στη δημοσίευση φωτογραφιών στο blog μας αυξάνουμε τις πιθανότητες να εμφανιστεί η φωτογραφία μας σε καλή θέση στα αποτελέσματα αναζήτησης στις Εικόνες Google. Ταυτόχρονα, με αυτά που συζητάμε σήμερα, βελτιώνουμε τον τρόπο παρουσίασης των φωτογραφιών στο ίδιο μας το blog ώστε να τις"βλέπουν" ακόμη και άτομα τυφλά που χρησιμοποιούν ειδικό "αναγνώστη". Σε αυτό το άρθρο θα δούμε στη συνέχεια

  • πως πρέπει να χρησιμοποιούμε πάντα το μαγικό alt attribute
  • πως πρέπει να ονομάζουμε τις φωτογραφίες που θα ανεβάσουμε στο blog
  • τι είναι το title attribute στη φωτογραφία
  • επηρεάζει τη θέση μας στα αποτελέσματα Εικόνων Google οι νέες λεζάντες στο Blogger blog;
Ας δούμε αμέσως μια σελίδα αναζήτησης στις Εικόνες Google(κλικ για μεγέθυνση)


Εικόνες Google

Στα αποτελέσματα μας αναζήτησης στις Εικόνες Google για το "πορτάρα NASA", βλέπουμε ότι η μεγενθυμένη φωτογραφία στην παραπάνω εικόνα έχει πάρει αυτόματα σαν "επεξήγηση" ένα κομμάτι από το άρθρο του blog, μερικές λέξεις από την πρώτη παράγραφο συγκεκριμένα. "Κάθε ημέρα η NASA διαλέγει μια εικόνα και την δημοσιεύει σαν την". Στο άρθρο αυτό δεν είχε χρησιμοποιηθεί στην συγκεκριμένη φωτογραφία το alt.

Το όνομα του αρχείου αυτού, της φωτογραφίας, που βάλαμε στο άρθρο το βλέπουμε στις αναζητήσεις Εικόνων Google με μπλε χρώμα σαν σύνδεσμο(δείτε την εικόνα πάνω). Ενώ θα μπορούσε να είναι πολύ χειρότερα βλέπουμε ότι η φωτογραφία έχει όνομα μάλλον περίπλοκο με τα νούμερα 800X600PIXEL που εμφανίζονται. Θα μπορούσε ακόμη χειρότερα να λέγεται IMG123.jpg.

Δεν λέω ότι σε αυτή τη περίπτωση η φωτογραφία δεν έχει καλή θέση στα αποτελέσματα χωρίς το alt. Σίγουρα βοηθάνε και οι λέξεις στην ονομασία της φωτογραφίας: solar-scenic-portara για την καλή θέση. Λέω ότι θα μπορούσαμε να βοηθήσουμε τη Google κάπως προσφέροντας και μια περιγραφή για τη φωτογραφία μας. Τι δείχνει. Η Google ΧΡΗΣΙΜΟΠΟΙΕΙ και την περιγραφή αυτή, αν υπάρχει, για να μας δείξει κατάλληλα αποτελέσματα στην αναζήτηση μας.

Αυτή η περιγραφή δίνεται από εσάς. Αφού έχετε προσθέσει την φωτογραφία, ενώ επεξεργάζεστε το άρθρο σας κάντε κλικ στο "επεξεργασία HTML".  Βρείτε των κώδικα που αντιστοιχεί στη συγκεκριμένη φωτογραφία(ξέρετε το όνομα της φωτογραφίας έτσι δεν είναι;). Θα μοιάζει κάτι σαν

Alt tag

Μην μπερδεύεστε! Η φωτογραφία που βάλαμε έχει έναν κώδικα του τύπου

<img src="http://blablablabla.com/image.jpg" />

Το jpg μπορεί να είναι και png ή gif...Το src="..." μας το βάζει αυτόματα η google. Μέσα στα εισαγωγικά είναι η διεύθυνση της φωτογραφίας μας. Όπου φαίνεται το όνομα της φωτογραφίας: Δείτε το μεγάλο κυκλάκι στην εικόνα μας.

Αν χρησιμοποιείτε τον παλιό editor(όπως πολλοί) μόλις βάλατε την φωτογραφία θα σας πρόσθεσε και ένα alt="" αυτόματα οπότε τα πράγματα είναι ευκολότερα. Με κενό εντός των εισαγωγικών. Δείτε την εικόνα πάλι. Με κίτρινη επισήμανση μετά το img. Εμείς το έχουμε συμπληρώσει. Εδώ στο alt, μέσα στα εισαγωγικά προσθέτω μερικές λέξεις, σαν μικρή πρόταση, που περιγράφουν καλύτερα την φωτογραφία μας. Όσοι έχουν τον νέο editor πρέπει προσεκτικά να βρουν που είναι ο κώδικας που αντιστοιχεί στη συγκεκριμένη φωτογραφία και μετά το img να προαθέσουν το alt="" και να βάλουν περιγραφή μικρή μέσα στα εισαγωγικά αυτά. alt="Να η μικρή μαύρη γάτα μου"...

Μη σας μπερδεύουν τα πολλά που πρόσθεσε αυτόματα μέσα στο <img src=""> Εσείς ψάχνετε το img και το όνομα της φωτογραφίας σας. Μετά προσθέτετε το alt ΑΝ δεν υπάρχει ήδη.



Όπως ακούσατε, αν χρησιμοποιείται το alt και για κάποιο λόγο δεν φορτώσει καλά η εικόνα θα υπάρχει ένα πλαίσιο με την περιγραφή της εικόνας στη θέση της φωτογραφίας. Επίσης τυφλά άτομα που χρησιμοποιούν "αναγνώστες"(προγράμματα που διαβάζουν με ανθρώπινη φωνή) θα ακούσουν για το τι δείχνει η φωτογραφία αυτή.

Η ονομασία της φωτογραφίας είναι πολύ σημαντική. Μην αφήνετε τις φωτογραφίες να ονομάζονται DSC543.jpg. Βρείτε ένα πιο περιγραφικό όνομα για το αρχείο αυτό. Με λατινικούς χαρακτήρες. Πχ my-new-black-cat.jpg . Πληροφορεί το όνομα λεπτομερώς για το περί τίνος πρόκειται.

Το title attribute δεν είναι υποχρεωτικό. Υποτίθεται βοηθάει τους επισκέπτες του blog. Σε περιηγητές Internet Explorer αν προσθέσουμε το alt που λέγαμε στη φωτογραφία και βάλουμε τον κέρσορα του ποντικιού πάνω στη φωτογραφία βλέπουμε να πετάγεται η περιγραφή της φωτογραφίας σαν μπαλονάκι(tooltip text)

Title attribute

Στους υπόλοιπους περιηγητές, όπως ο Firefox για να έχουμε το ίδιο αποτέλεσμα πρέπει όπως προσθέσαμα το alt="" να προσθέσουμε και το title="". Πχ εντός εισαγωγικών και τα 2 μπορεί να έχουν ακριβώς την ίδια φράση.

Τώρα, για το αν επηρεάζει τη θέση μας στα αποτελέσματα Εικόνων Google οι νέες λεζάντες στο Blogger blog; Δεν ξέρω! Μόλις πρόσεξα ότι ενώ ψάχνω μια συγκεκριμένη φωτογραφία με λεζάντα στις Εικόνες Google δεν τη βρίσκω. Ούτε καν ψάχνοντας με το site:. Τυχαίο θα μου πείτε; Όπως είχα αναφέρει ο Blogger εμφανίζει λεζάντες τοποθετώντας τη φωτογραφία και τη λεζάντα σε ένα πίνακα HTML 2x1. Τι γνώμη έχετε;

Οι καλές πρακτικές στη δημοσίευση εικόνων όπως μας τις απαριθμεί η Google.


Licensed under a Creative Commons Attribution Non Commercial Licence