Πώς να προσθέσετε έναν υπερσύνδεσμο σε μια εικόνα στο WordPress

Μια συνδεδεμένη εικόνα μετατρέπει ένα στατικό οπτικό στοιχείο σε εργαλείο πλοήγησης. Αντί να ζητάτε από τους επισκέπτες να κάνουν κλικ σε έναν κείμενο-σύνδεσμο ή σε ένα κουμπί, μπορείτε να τους επιτρέψετε να πατήσουν σε μια φωτογραφία προϊόντος, ένα banner, ένα λογότυπο ή μια εικόνα προτροπής και να μεταβούν απευθείας στη σελίδα που θέλετε να δουν.

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

Γιατί να συνδέσετε μια εικόνα;

Η προσθήκη υπερσυνδέσμου σε μια εικόνα είναι χρήσιμη σε πολλές συνηθισμένες διατάξεις ιστοσελίδων:

• Hero banners που οδηγούν σε μια προβαλλόμενη προσφορά
• Κάρτες υπηρεσιών που ανοίγουν λεπτομερείς σελίδες
• Λογότυπα που επιστρέφουν τους χρήστες στην αρχική σελίδα
• Φωτογραφίες προϊόντων που οδηγούν σε σελίδες λεπτομερειών προϊόντος
• Προωθητικά γραφικά που στέλνουν τους επισκέπτες σε σελίδα καμπάνιας
• Ενότητες προτροπής για δράση που χρειάζονται ένα οπτικό σημείο κλικ

Οι εικόνες με δυνατότητα κλικ μπορούν να κάνουν μια σελίδα πιο εύκολη στην σάρωση, ειδικά σε κινητές συσκευές όπου τα οπτικά στοιχεία συχνά λειτουργούν καλύτερα από τους μικρούς συνδέσμους κειμένου.

Πριν ξεκινήσετε

Βεβαιωθείτε ότι έχετε ήδη:

• Μια δημοσιευμένη ή πρόχειρη σελίδα ή άρθρο στο WordPress
• Την εικόνα μεταφορτωμένη στη Βιβλιοθήκη Πολυμέσων ή έτοιμη για εισαγωγή
• Το URL προορισμού που θέλετε να ανοίγει η εικόνα

Αν συνδέετε σε εσωτερική σελίδα, αντιγράψτε πρώτα το URL της σελίδας. Αν συνδέετε σε εξωτερικό ιστότοπο, επιβεβαιώστε ότι ο προορισμός είναι αξιόπιστος και σχετικός.

Πώς να προσθέσετε έναν υπερσύνδεσμο σε μια εικόνα στο WordPress block editor

Οι περισσότεροι σύγχρονοι ιστότοποι WordPress χρησιμοποιούν το Block Editor, γνωστό και ως Gutenberg. Η διαδικασία είναι απλή.

1. Ανοίξτε τη σελίδα ή το άρθρο

Από τον πίνακα ελέγχου του WordPress, μεταβείτε στη σελίδα ή το άρθρο όπου θέλετε να εμφανίζεται ο σύνδεσμος της εικόνας.

2. Εισαγάγετε ή επιλέξτε το block εικόνας

Αν η εικόνα δεν υπάρχει ήδη στη σελίδα:

• Κάντε κλικ στο κουμπί +
• Επιλέξτε το block Image
• Μεταφορτώστε μια νέα εικόνα, επιλέξτε μία από τη Βιβλιοθήκη Πολυμέσων ή εισαγάγετε από ένα URL, αν αυτό είναι κατάλληλο

Αν η εικόνα υπάρχει ήδη στη σελίδα, κάντε κλικ μία φορά επάνω της για να επιλεγεί το block.

3. Προσθέστε τον σύνδεσμο

Όταν το block εικόνας είναι επιλεγμένο, αναζητήστε το εικονίδιο συνδέσμου στη γραμμή εργαλείων του block.

• Κάντε κλικ στο κουμπί συνδέσμου
• Επικολλήστε ή πληκτρολογήστε το URL προορισμού
• Πατήστε Enter ή εφαρμόστε τον σύνδεσμο

Ανάλογα με την έκδοση του WordPress και το θέμα σας, μπορεί επίσης να δείτε επιλογές σύνδεσης σε:

• Αρχείο πολυμέσων
• Σελίδα συνημμένου
• Προσαρμοσμένο σύνδεσμο
• Κανένα

Για τις περισσότερες επαγγελματικές χρήσεις, ο Προσαρμοσμένος σύνδεσμος είναι η καλύτερη επιλογή, επειδή σας δίνει πλήρη έλεγχο για το πού οδηγεί η εικόνα.

4. Προσαρμόστε τη συμπεριφορά του συνδέσμου αν χρειάζεται

Ορισμένοι editors σάς επιτρέπουν να επιλέξετε αν ο σύνδεσμος θα ανοίγει σε νέα καρτέλα. Αυτό είναι συχνά χρήσιμο για εξωτερικούς συνδέσμους, ενώ οι εσωτερικοί σύνδεσμοι συνήθως λειτουργούν καλύτερα στην ίδια καρτέλα.

Χρησιμοποιήστε νέα καρτέλα μόνο όταν βελτιώνει την εμπειρία του επισκέπτη. Αποφύγετε να αναγκάζετε κάθε σύνδεσμο να ανοίγει σε νέα καρτέλα, γιατί αυτό μπορεί να είναι αποπροσανατολιστικό.

5. Αποθηκεύστε ή ενημερώστε τη σελίδα

Κάντε κλικ στο Update, Publish ή Save Draft για να διατηρήσετε τις αλλαγές σας.

Πώς να συνδέσετε μια εικόνα στο Classic Editor

Αν ο ιστότοπός σας εξακολουθεί να χρησιμοποιεί το Classic Editor, η διαδικασία είναι λίγο διαφορετική αλλά παραμένει απλή.

1. Εισαγάγετε την εικόνα

Κάντε κλικ στο Add Media και τοποθετήστε την εικόνα στην περιοχή περιεχομένου.

2. Επιλέξτε την εικόνα

Κάντε κλικ στην εικόνα ώστε να εμφανιστεί η γραμμή εργαλείων επεξεργασίας.

3. Ανοίξτε τις ρυθμίσεις συνδέσμου

Επιλέξτε την επιλογή συνδέσμου από τη γραμμή εργαλείων της εικόνας ή από το πλαίσιο λεπτομερειών της εικόνας, ανάλογα με τη ρύθμισή σας.

4. Εισαγάγετε το URL προορισμού

Επικολλήστε το URL στο πεδίο συνδέσμου και επιβεβαιώστε την αλλαγή.

5. Ενημερώστε το άρθρο ή τη σελίδα

Αποθηκεύστε την εργασία σας ώστε η συνδεδεμένη εικόνα να ενεργοποιηθεί στον ζωντανό ιστότοπο.

Καλές πρακτικές για συνδεδεμένες εικόνες

Ένας υπερσύνδεσμος σε μια εικόνα είναι χρήσιμος μόνο αν οι επισκέπτες καταλαβαίνουν αμέσως τι θα συμβεί όταν κάνουν κλικ. Ακολουθήστε αυτές τις καλές πρακτικές για να διατηρήσετε την εμπειρία καθαρή και αποτελεσματική.

Κάντε τον προορισμό προφανή

Χρησιμοποιήστε εικόνες που υποδηλώνουν οπτικά τη δράση ή το περιεχόμενο πίσω από αυτές. Μια εικόνα υπηρεσίας πρέπει να οδηγεί σε σχετική σελίδα υπηρεσίας. Ένα προωθητικό γραφικό πρέπει να οδηγεί στην ίδια την προώθηση.

Χρησιμοποιήστε περιγραφικό alt text

Το alt text βοηθά τους αναγνώστες οθόνης να κατανοήσουν την εικόνα και υποστηρίζει την προσβασιμότητα. Επίσης, δίνει πλαίσιο αν η εικόνα δεν φορτώσει.

Αν η εικόνα είναι καθαρά διακοσμητική, ίσως να μην χρειάζεται καθόλου υπερσύνδεσμος.

Κρατήστε τις σημαντικές εικόνες με δυνατότητα κλικ σε κινητές συσκευές

Οι επισκέπτες από κινητά βασίζονται σε μεγάλους στόχους αφής. Βεβαιωθείτε ότι η εικόνα είναι αρκετά μεγάλη ώστε να πατιέται άνετα χωρίς τυχαία κλικ.

Αποφύγετε τη σύνδεση άσχετου περιεχομένου

Μην στέλνετε τους επισκέπτες από ένα θέμα σε κάτι εντελώς διαφορετικό. Οι ασύμβατοι σύνδεσμοι μειώνουν την εμπιστοσύνη και βλάπτουν τις μετατροπές.

Χρησιμοποιείτε συνδεδεμένες εικόνες με μέτρο

Πάρα πολλές εικόνες με δυνατότητα κλικ μπορούν να κάνουν μια σελίδα να φαίνεται φορτωμένη. Χρησιμοποιήστε τες εκεί όπου προσθέτουν πραγματική αξία, όχι απλώς επειδή υπάρχει η δυνατότητα.

Συνδυάστε τις εικόνες με υποστηρικτικό κείμενο

Ένας σύντομος τίτλος ή λεζάντα κοντά στην εικόνα βοηθά τους επισκέπτες να καταλάβουν το επόμενο βήμα. Αυτό είναι ιδιαίτερα σημαντικό για σελίδες μάρκετινγκ και σελίδες υπηρεσιών.

Συνήθεις περιπτώσεις χρήσης για επαγγελματικούς ιστότοπους

Οι συνδεδεμένες εικόνες μπορούν να υποστηρίξουν τους στόχους ενός μικρού επαγγελματικού ιστότοπου με διάφορους τρόπους.

Πλοήγηση αρχικής σελίδας

Ένα λογότυπο ή μια προβαλλόμενη εικόνα μπορεί να οδηγεί τους χρήστες σε βασικές σελίδες όπως υπηρεσίες, τιμολόγηση ή επικοινωνία.

Προώθηση προϊόντων και υπηρεσιών

Οι εικόνες σε σελίδες προορισμού μπορούν να μεταφέρουν τους επισκέπτες πιο βαθιά στο σύνολο της διαδικασίας πώλησης.

Αλληλεπίδραση με το ιστολόγιο

Οι προβαλλόμενες εικόνες μπορούν να οδηγούν σε σχετικούς πόρους, μελέτες περίπτωσης ή εσωτερικά άρθρα.

Δημιουργία δυνητικών πελατών

Ένα banner ή ένα σήμα εικόνας μπορεί να οδηγεί σε φόρμα εγγραφής, σελίδα συμβουλευτικής ή σελίδα προσφοράς.

Ενίσχυση αξιοπιστίας

Σήματα αναγνώρισης, λογότυπα συνεργατών ή γραφικά μαρτυριών μπορούν να οδηγούν σε υποστηρικτικές σελίδες με περισσότερες πληροφορίες.

Αντιμετώπιση συνηθισμένων προβλημάτων

Αν η συνδεδεμένη εικόνα σας δεν λειτουργεί όπως αναμένεται, ελέγξτε τα παρακάτω:

Εισήχθη λάθος URL

Βεβαιωθείτε ότι ο προορισμός είναι πλήρης και σωστός. Ένα λανθασμένο πρωτόκολλο ή ένας σπασμένος εσωτερικός σύνδεσμος μπορεί να εμποδίσει τη σωστή λειτουργία της εικόνας.

Η εικόνα συνδέεται με τη σελίδα συνημμένου αντί με τη σωστή σελίδα

Το WordPress μερικές φορές ορίζει ως προεπιλογή συνδέσμους προς πολυμέσα ή σελίδες συνημμένων. Αντικαταστήστε τους με τον ακριβή προορισμό που θέλετε.

Οι αλλαγές του editor δεν αποθηκεύτηκαν

Αν ο σύνδεσμος της εικόνας δεν εμφανίζεται στη ζωντανή σελίδα, επιβεβαιώστε ότι πατήσατε Update ή Publish μετά την επεξεργασία.

Ένα πρόσθετο ή το θέμα παρεμβαίνει

Ορισμένοι page builders, πρόσθετα βελτιστοποίησης ή προσαρμοσμένα θέματα μπορούν να αλλάξουν τον τρόπο λειτουργίας των συνδέσμων εικόνας. Αν χρειάζεται, δοκιμάστε τη σελίδα με τα πρόσθετα προσωρινά απενεργοποιημένα σε περιβάλλον staging.

Η εικόνα φαίνεται κλικαρίσιμη αλλά δεν γίνεται τίποτα

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

Συμβουλές στρατηγικής συνδέσμων για καλύτερη απόδοση του ιστότοπου

Μια συνδεδεμένη εικόνα πρέπει να υποστηρίζει μια ευρύτερη στρατηγική περιεχομένου, όχι απλώς να λειτουργεί ως διακόσμηση.

• Συνδέστε μόνο όταν η εικόνα βοηθά τους χρήστες να κάνουν ένα χρήσιμο επόμενο βήμα
• Συνδέστε τις εικόνες με σελίδες που ταιριάζουν με την πρόθεση του χρήστη
• Χρησιμοποιήστε καθαρές λεζάντες και κοντινό κείμενο προτροπής για δράση
• Ελέγχετε την απόδοση των κλικ στα analytics όταν είναι δυνατό
• Ενημερώνετε παλιούς συνδέσμους εικόνων όταν αλλάζουν τα URLs των σελίδων

Για έναν εταιρικό ιστότοπο, αυτές οι μικρές βελτιώσεις μπορούν να κάνουν την πλοήγηση πιο ομαλή και να μειώσουν την τριβή σε όλη τη διαδρομή του χρήστη.

Τελικές σκέψεις

Η προσθήκη ενός υπερσυνδέσμου σε μια εικόνα στο WordPress είναι μια απλή εργασία, αλλά μπορεί να έχει ουσιαστικό αντίκτυπο στη χρηστικότητα και στις μετατροπές όταν γίνεται με σκοπό. Είτε συνδέετε ένα λογότυπο, ένα banner, μια εικόνα υπηρεσίας ή ένα προωθητικό γραφικό, το κλειδί είναι να παραμένει ο προορισμός σχετικός και η ενέργεια ξεκάθαρη.

Αν διαχειρίζεστε έναν επαγγελματικό ιστότοπο, αντιμετωπίστε κάθε εικόνα με δυνατότητα κλικ ως μέρος της δομής του ιστότοπού σας. Οι καλύτεροι σύνδεσμοι εικόνων καθοδηγούν φυσικά τους επισκέπτες στο επόμενο βήμα, υποστηρίζουν το περιεχόμενό σας και κάνουν την εμπειρία πιο εύκολη τόσο σε επιτραπέζιους υπολογιστές όσο και σε κινητές συσκευές.