<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Freelancer web dev who ❤️ performance &amp; Jamstack.]]></title><description><![CDATA[Freelancer web dev who ❤️ performance &amp; Jamstack.
Wordpress/Woocommerce expert, Shopify Expert, Google Dev Expert, Cloudinary Media Dev Expert.]]></description><link>https://blog.giannis.dev</link><image><url>https://cdn.hashnode.com/res/hashnode/image/upload/v1650529684053/VpsvRt_zO.png</url><title>Freelancer web dev who ❤️ performance &amp;amp; Jamstack.</title><link>https://blog.giannis.dev</link></image><generator>RSS for Node</generator><lastBuildDate>Fri, 05 Jun 2026 09:54:23 GMT</lastBuildDate><atom:link href="https://blog.giannis.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Static Site Generators]]></title><description><![CDATA[Οι ιστοσελίδες-ιστότοποι χωρίζονται σε δύο βασικές κατηγορίες, σε στατικές (static sites) και σε δυναμικές (dynamic sites), σαν εμφάνιση μπορεί να μην έχουν μεγάλες διαφορές , αλλά σαν λειτουργία και δυνατότητες οι διαφορές είναι αρκετές και ουσιαστι...]]></description><link>https://blog.giannis.dev/static-site-generators</link><guid isPermaLink="true">https://blog.giannis.dev/static-site-generators</guid><category><![CDATA[development]]></category><category><![CDATA[WordPress]]></category><dc:creator><![CDATA[Giannis Theodoropoulos]]></dc:creator><pubDate>Tue, 25 May 2021 16:29:36 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1650558541910/LHgNg5FoS.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Οι ιστοσελίδες-ιστότοποι χωρίζονται σε δύο βασικές κατηγορίες, σε στατικές (static sites) και σε δυναμικές (dynamic sites), σαν εμφάνιση μπορεί να μην έχουν μεγάλες διαφορές , αλλά σαν λειτουργία και δυνατότητες οι διαφορές είναι αρκετές και ουσιαστικές.</p>
<p>Οι γεννήτριες δημιουργίας στατικών ιστοσελίδων (Static Site Generators – SSG) τεχνικά είναι υποκατηγορία των στατικών ιστοσελίδων, στην κατηγορία των δυναμικών ιστοσελίδων περιλαμβάνονται ιστοσελίδες που έχουν δημιουργηθεί με κάποιο CMS ή framework όπως Wordpress, Drupal, Joomla κ.α.</p>
<h2 id="heading-statikes-istoselides">Στατικές ιστοσελίδες</h2>
<p>Η τρόπος λειτουργίας των στατικών ιστοσελίδων είναι σχετικά απλός, ουσιαστικά πρόκειται για έτοιμα αρχεία (HTML, CSS, εικόνες κ.α.) που βρίσκονται σε κάποιον server και όταν ζητηθεί η ιστοσελίδα από τον χρήστη ο server στέλνει αυτά τα αρχεία στο πρόγραμμα περιήγησης του χρήστη.</p>
<p>Η πρώτη ιστοσελίδα που δημιουργήθηκε το 1990 ήταν στατική γραμμένη σε απλή HTML, επίσης εφαρμογές όπως το Dreamweaver και το FrontPage ήταν τα πρώτα προγράμματα δημιουργίας στατικών ιστοσελίδων που έκαναν χρήση επεξεργαστή WYSIWYG.</p>
<h3 id="heading-pleonekthmata-statikwn-istoselidwn">Πλεονεκτήματα στατικών ιστοσελίδων</h3>
<ul>
<li>Ταχύτητα, οι στατικές ιστοσελίδες είναι γρήγορες στην φόρτωση γιατί ο server δεν έχει να διαχειριστεί πολύπλοκα αιτήματα ή διαδικασίες παρά μόνο να στείλει την ιστοσελίδα στο πρόγραμμα περιήγησης του χρήστη.</li>
<li>Ασφάλεια, οι στατικές ιστοσελίδες δεν χρειάζονται βάσεις δεδομένων, scripts που πρέπει να τρέξουν ή να διαχειριστεί ο server για αυτό το λόγο δεν είναι ευάλωτες σε hackers και γενικά δεν έχουν ευπάθειες ασφαλείας που συναντάμε σε διάφορα CMS.</li>
<li>Κόστος, το κόστος φιλοξενίας μιας στατικής ιστοσελίδας είναι σχετικά μικρό συγκρίνοντας το με το κόστος φιλοξενίας μια ιστοσελίδας Wordpress.</li>
<li>Συντήρηση, μια στατική ιστοσελίδα δεν απαιτεί σχεδόν καθόλου συντήρηση εκτός αν θέλετε να κάνετε αλλαγές.</li>
</ul>
<h3 id="heading-meionekthmata-statikwn-istoselidwn">Μειονεκτήματα στατικών ιστοσελίδων</h3>
<ul>
<li>Η δημιουργία/ενημέρωση μιας στατικής ιστοσελίδας μπορεί να δείχνει απλή αλλά δεν είναι κάτι εύκολο για κάποιον που δεν γνωρίζει HTML-CSS-Javascript κ.α., οπότε απαιτούνται γνώσεις προγραμματισμού.</li>
<li>Σε πολλές περιπτώσεις οι στατικές ιστοσελίδες δεν μπορούν να εκτελέσουν πολύπλοκες εργασίες όπως αποστολή contact forms, προσθήκη και ενημέρωση σχολίων σε blog, για αυτό το σκοπό πρέπει να χρησιμοποιηθούν υπηρεσίες τρίτων με το ανάλογο κατά περίπτωση κόστος.</li>
<li>Ανεπάρκεια, εξαρτάται από τα άτομα που δημιουργούν και συντηρούν την  ιστοσελίδα, εάν δεν είναι σχολαστικά ή / και δεν διαθέτουν επαρκείς πόρους και γνώσεις, η ιστοσελίδα πιθανότατα να μην έχει το αναμενόμενο αποτέλεσμα.</li>
</ul>
<h2 id="heading-dynamikes-istoselides">Δυναμικές ιστοσελίδες</h2>
<p>Οι δυναμικές ιστοσελίδες εμφανίστηκαν το 1993 με την έλευση του Common Gateway Interface (CGI). Το CGI είναι ένα σύνολο προτύπων για τον καθορισμό του τρόπου ανταλλαγής πληροφοριών μεταξύ διακομιστών.</p>
<p>Tο CGI επέτρεπε στους διακομιστές να κάνουν περισσότερα από απλώς να λαμβάνουν αιτήματα και να ανταποκρίνονται σε αυτά ως είσοδο/έξοδο.</p>
<p>Το συμβαίνει όταν ο χρήστης περιηγείται σε μια δυναμική ιστοσελίδα:</p>
<ol>
<li>Όταν ο χρήστης ζητά πρόσβαση σε έναν ιστότοπο, το πρόγραμμα περιήγησης ζητά αρχεία από το διακομιστή, το αίτημα θα μπορούσε να περιλαμβάνει μια απλή σελίδα περιεχομένου ,ένα ερώτημα αναζήτησης, μια υποβολή φόρμας ή ακόμη και έμμεσα δεδομένα (όπως η γεωγραφική σας τοποθεσία).</li>
<li>Χρησιμοποιώντας τα κριτήρια που καθορίζονται από το CGI, ο διακομιστής ιστού μιλά με έναν άλλο διακομιστή (ο διακομιστής εφαρμογών) που επεξεργάζεται όλες τις εισόδους και κάνει μια λίστα με αυτό που χρειάζεται.</li>
<li>Ο διακομιστής εφαρμογών θα μιλήσει με έναν άλλο διακομιστή, τη βάση δεδομένων, για να συλλέξει τις πληροφορίες που χρειάζεται, για παράδειγμα, το ιστορικό παραγγελιών σας ή τα προϊόντα που σας ενδιαφέρουν.</li>
<li>Ο διακομιστής εφαρμογών μεταφράζει όλα αυτά σε μια γλώσσα που κατανοεί ο διακομιστής ιστού και στη συνέχεια τα στέλνει στον διακομιστή ιστού.</li>
<li>Ο διακομιστής ιστού στέλνει τα δημιουργημένα αρχεία στο πρόγραμμα περιήγησής σας,</li>
<li>Το πρόγραμμα περιήγησής σας αποδίδει τα αρχεία και σας παρουσιάζει τον ιστότοπο.</li>
</ol>
<p>Οι δυναμικές ιστοσελίδες άλλαξαν τον κόσμο του Διαδικτύου, προσαρμόζοντας την εμπειρία του χρήστη, ωστόσο εισήγαγαν μια αναπόσπαστη πολυπλοκότητα στη όλη διαδικασία.</p>
<p>Οποιαδήποτε ιστοσελίδα που εξυπηρετείτε από μια βάση δεδομένων, μια Διεπαφή προγραμματισμού εφαρμογών (API), είναι ένας δυναμικός ιστότοπος. Οι περισσότεροι σύνθετοι ιστότοποι είναι δυναμικοί π.χ. Amazon, Facebook, Pinterest.</p>
<p>Οι ιστότοποι που δημιουργούνται από CMS όπως το WordPress, το Wix και το Shopify κ.α. είναι επίσης δυναμικοί.</p>
<h3 id="heading-pleonekthmata-dynamikwn-istoselidwn">Πλεονεκτήματα δυναμικών ιστοσελίδων</h3>
<ul>
<li>Όπως υποδηλώνει και το όνομα η ιστοσελίδα δημιουργείται από μια δέσμη συγκεκριμένων αιτημάτων ή και δεδομένων που συλλέγονται από την πλευρά του χρήστη.</li>
<li>Οι δυναμικοί ιστότοποι επιτρέπουν την διασύνδεση των CMS, των πλατφορμών ηλεκτρονικού εμπορίου και γενικότερα οποιασδήποτε πολυπλοκότητας.</li>
<li>Οι δυναμικοί ιστότοποι μπορούν να προβάλουν περιεχόμενο βάσει μεταβλητών που μπορούν να ορισθούν από τον χρήστη.</li>
<li>Η έλευση των πλατφορμών CMS έδωσε την δυνατότητα σε χρήστες χωρίς γνώσεις προγραμματισμού να δημιουργήσουν ιστότοπους.</li>
<li>Αμεση εγκατάσταση, η δημιουργία ενός ιστότοπου έγινε πολύ πιο γρήγορη. CMS όπως το Wordpress, Squarespace και το Shopify σας παρέχουν όλα τα εργαλεία για να δημιουργήσετε έναν ιστότοπο μέσα σε λίγα λεπτά.</li>
<li>Αυτοματισμοί, οι προσθήκες προϊόντων ή αναρτήσεων από μια πλατφόρμα σε μια άλλη είναι αυτοματοποιημένη.</li>
<li>Βελτιστοποίηση μηχανών αναζήτησης (SEO) – oriented, τα περισσότερα CMS είναι SEO ready σε ικανοποιητικό βαθμό.</li>
</ul>
<h3 id="heading-meionekthmata-dynamikwn-istoselidwn">Μειονεκτήματα δυναμικών ιστοσελίδων</h3>
<ul>
<li>Κόστος: ενώ το ίδιο το WordPress είναι δωρεάν, τα θέματα και πολλά πρόσθετα δεν είναι. Υπηρεσίες όπως το Wix και το Shopify έχουν μηνιαίο κόστος χρήσης. Εξιδεικευμένες αλλαγές, προσθήκες και συντήρηση επίσης δεν είναι δωρεάν.</li>
<li>Απαιτητικοί διακομιστές: Για την εκτέλεση του WordPress χρειάζεται ένα ελάχιστο setup από την πλευρά του διακομιστή, εκτός από το αυξημένο κόστος που μπορεί να έχετε χρειάζεται να γίνει και το κατάλληλο setup, αυτό είναι κάτι που πρέπει να γίνει από εξιδεικευμένο πρόσωπο με το ανάλογο κόστος.</li>
<li>Ταχύτητα: οι δυναμικές ιστοσελίδες λόγω των πολλών αιτημάτων έχουν μπορεί να έχουν σαν αποτέλεσμα αυξημένους χρόνους αναμονής από την πλευρά του χρήστη, τέτοιου είδους καθυστερήσεις ίσως δημιουργήσουν δυσαρεστημένους χρήστες.</li>
<li>Ασφάλεια: οι δυναμικοί ιστότοποι έχουν ευπάθειες και είναι ανοιχτοί σε επιθέσεις.Δεν είναι τυχαίο ότι  το 70% των ιστότοπων που έχουν δημιουργηθεί με WordPress είναι ευάλωτοι σε επιθέσεις.</li>
<li>Αστάθεια: οι μη αναμενόμενη αύξηση της επισκεψιμότητας μπορεί να υπερφορτώσει τον διακομιστή με αποτέλεσμα ο ιστότοπος να μην είναι προσβάσιμος, αυτό είναι κάτι που το βλέπουμε κατα περιόδους σε ιστότοπους που έχουν αυξημένη κίνηση πχ. περίοδος εκπτώσεων όπως Black Friday κ.α.</li>
<li>Μονοτονία: τυχαίνει δύο ή και παραπάνω διαφορετικές επιχειρήσεις να επιλέξουν το ίδιο theme για την ιστοσελίδα τους, αυτό έχει σαν αποτέλεσμα κάποιες φορές να βλέπουμε πανομοιότυπους ιστότοπους.</li>
</ul>
<h2 id="heading-static-site-generators">Static Site Generators</h2>
<h3 id="heading-ti-akribws-einai-oi-static-site-generators">Τι ακριβώς είναι οι Static Site Generators</h3>
<p>Ενας Static Site Generator είναι ένα εργαλείο που δημιουργεί έναν πλήρη στατικό ιστότοπο HTML που βασίζεται σε ανεπεξέργαστα δεδομένα και ένα σύνολο προτύπων. Ουσιαστικά, μια στατική γεννήτρια ιστότοπων αυτοματοποιεί το έργο της κωδικοποίησης μεμονωμένων σελίδων HTML και προετοιμάζει αυτές τις σελίδες για προβολή στους χρήστες εκ των προτέρων, αυτές οι σελίδες HTML αποθηκεύονται  στον διακομιστή, αυτό έχει σαν αποτέλεσμα να μπορούν να φορτωθούν πάρα πολύ γρήγορα στα προγράμματα περιήγησης των χρηστών.</p>
<p>Από τεχνική άποψη, ένας ιστότοπος που δημιουργήθηκε από ένα SSG είναι ένας στατικός ιστότοπος.</p>
<p>Αναλυτικά η διαδικασία έχει ως εξής:</p>
<ol>
<li>Ο ιστότοπος αποτελείται από αρχεία γλώσσας (Markup), αρχεία προτύπων (Templates), αρχεία δεδομένων (data files) και διάφορα στοιχεία (assets).</li>
<li>Οι SSG αναλαμβάνουν ουσιαστικά τις ενέργειες που πρέπει να εκτελεστούν από την πλευρά του διακομιστή (για την δημιουργία των αρχείων HTML) και τις εκτελούν πριν από την δημιουργία του ιστότοπου. Το SSG επεξεργάζεται όλα τα δεδομένα από τα επιμέρους αρχεία και δημιουργεί τα αρχεία HTML, CSS και JavaScript - αυτά τα αρχεία είναι τα στατικά αρχεία που μεταφορτώνονται στο διακομιστή, οπότε το αποτέλεσμα που προκύπτει είναι ένας στατικός ιστότοπος.</li>
</ol>
<p><strong>Κάποια από τα πιο γνωστά SSG είναι:</strong></p>
<ul>
<li><strong>Gatsby (React)</strong></li>
<li><strong>Jekyll (Ruby)</strong></li>
<li><strong>Next.js (React)</strong></li>
<li><strong>Hugo (Go)</strong></li>
<li><strong>Eleventy (Node.js)</strong></li>
</ul>
<p>Καινούργια SSG εμφανίζονται συνεχώς καθώς η χρήση αυτών υιοθετείται ευρύτερα.</p>
<p>Στο πλαίσιο των SSG, μπορεί να έχετε ακούσει για το JAMstack. Το JAMstack, σημαίνει JavaScript, API και Markup. Δημιουργήθηκε από προγραμματιστές που θέλουν να διατηρήσουν την ταχύτητα και την ασφάλεια των στατικών ιστότοπων, προσθέτοντας παράλληλα σε αυτούς χαρακτηριστικά δυναμικών ιστότοπων.</p>
<p>Ωστόσο δεν είναι όλα τα SSG μέρος του JAMstack, το JAMstack δεν αφορά μόνο τα SSG. (Διαβάστε περισσότερα σχετικά στο <a target="_blank" href="https://jamstack.wtf/">JAMstackWTF</a> και στο <a target="_blank" href="https://jamstack.org/">JAMstack.org</a>).</p>
<p>Αυτό που λείπει από τους SSGs είναι το (user friendly) κομμάτι της επεξεργασίας περιεχομένου, είναι σχετικά εύκολο ακόμα και για έναν junior developer να ανεβάζει περιεχόμενο με Markdown σε έναν SSG αλλά φαντάζει δύσκολο έως αδύνατον για κάποιον που (είναι τελικός χρήστης και δεν είναι developer να το κάνει).το κάνει μέσα από το διαχειριστικό του Wordpress και δεν είναι developer</p>
<p>Τα τελευταία χρόνια έχουν προστεθεί πολλά εργαλεία στο οικοσύστημα των Static Site Generators SSGs προσθέτοντας τους πολλές δυνατότητες και ευκολίες που δεν είχαν στο παρελθόν ωστόσο το ποσοστό χρήσης τους δεν είναι μεγάλο αλλά η τάση είναι ανοδική.</p>
<p>Αν και οι SSG υπερτερούν σε ταχύτητα και ασφάλεια έναντι των γνωστών CMS (Wordpress κ.λ.π.) στην Ελλάδα αυτή τη στιγμή οι σελίδες που είναι φτιαγμένες με Static Generator είναι ελάχιστες, μια ενδιαφέρουσα σελίδα είναι της ομάδας <a target="_blank" href="https://oupspuppetry.gr/">ΟΥΠΣ το κουκλοθέατρο</a>, <a target="_blank" href="https://giannis.dev/">η προσωπική μου ιστοσελίδα</a> βασίζεται σε SSG, ενδιαφέρον έχει επίσης το <a target="_blank" href="https://www.victoriabeckhambeauty.com/">eshop της Victoria Beckham</a>, σε περίπτωση που αναρωτιέστε αυτή η ιστοσελίδα βασίζεται στο Ghost, το Ghost είναι ένα πρότζεκτ που ανήκει στην κατηγορία των Headless CMS περισσότερες πληροφορίες σχετικά με το Ghost μπορείτε να διαβάσετε σε αυτό <a target="_blank" href="https://thecodebee.com/ti-einai-to-ghost-cms/">το άρθρο</a>.</p>
<hr />
<p><strong>Και ερχόμαστε στο βασικό ερώτημα που προκύπτει διαβάζοντας αυτό το άρθρο. «Και πως θα γνωρίζω ποια τεχνολογία πρέπει να χρησιμοποιηθεί για την κατασκευή του ιστότοπου μου ;»</strong></p>
<p>Όπως καταλάβατε υπάρχουν δύο επιλογές η μία είναι να δημιουργήσετε κάτι γρήγορο, ευέλικτο με την προϋπόθεση ότι έχετε γνώσεις προγραμματισμού και η άλλη είναι να έχετε κάτι δυναμικό με πολλές δυνατότητες που σε κάποιες περιπτώσεις δεν σας χρειάζονται αλλά να απαιτεί περισσότερους πόρους και μεγαλύτερο κόστος.</p>
<p>Ωστόσο σαν επιχειρηματίας αυτό πρέπει να σας απασχολεί δεν είναι με ποιο εργαλείο/τεχνολογία θα δημιουργηθεί ο ιστότοπος της επιχείρησης σας, σας ενδιαφέρει να έχετε έναν πλήρως λειτουργικό και καλοσχεδιασμένο ιστότοπο που να παρουσιάζει με τον καλύτερο τρόπο την επιχείρηση σας στο διαδίκτυο και να χρησιμοποιεί όλα τα τελευταία τεχνολογικά trends.</p>
<p>H επιλογή του εργαλείου/τεχνολογίας κατασκευής του ιστότοπου σας εξαρτάται από πολλούς παράγοντες και είναι μια απόφαση που πρέπει να πάρετε εκτιμώντας διάφορες παραμέτρους, η ομάδα που θα δημιουργήσει τον ιστότοπο είναι ο σύμβουλος σας σε αυτή την περίπτωση και καλό είναι να πάρετε περισσότερες από μια προτάσεις ώστε να μπορέσετε να αξιολογήσετε καλύτερα.</p>
]]></content:encoded></item><item><title><![CDATA[Ποια είναι η διαδικασία καταγραφής μιας ιστοσελίδας από την Google]]></title><description><![CDATA[Για να έχει την πιθανότητα μια σελίδα να εμφανιστεί στα αποτελέσματα μιας σχετικής αναζήτησης είναι απαραίτητο η Google να την έχει εντοπίσει, καταγράψει και να έχει αναλύσει το περιεχόμενο της.
Όταν η Google δεν «γνωρίζει» μία σελίδα δεν την εμφανίζ...]]></description><link>https://blog.giannis.dev/poia-einai-h-diadikasia-katagrafhs-mias-istoselidas-apo-thn-google</link><guid isPermaLink="true">https://blog.giannis.dev/poia-einai-h-diadikasia-katagrafhs-mias-istoselidas-apo-thn-google</guid><category><![CDATA[SEO]]></category><dc:creator><![CDATA[Giannis Theodoropoulos]]></dc:creator><pubDate>Wed, 14 Apr 2021 15:54:49 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1650556240598/ki-33MLs9.jpg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Για να έχει την πιθανότητα μια σελίδα να εμφανιστεί στα αποτελέσματα μιας σχετικής αναζήτησης είναι απαραίτητο η Google να την έχει εντοπίσει, καταγράψει και να έχει αναλύσει το περιεχόμενο της.</p>
<p><strong>Όταν η Google δεν «γνωρίζει» μία σελίδα δεν την εμφανίζει πουθενά</strong>.</p>
<p>Η Google δεν καταγράφει όλες τις σελίδες για διάφορους λόγους. Το ποσοστό των σελίδων ενός website που δεν καταγράφονται εξαρτάται από τον τύπο, τον τρόπο σχεδιασμού και το μέγεθος του και μπορεί να φτάσει ακόμη και πάνω από το 50%.</p>
<p>Εάν οι σελίδες που δεν έχουν καταγραφεί δεν είναι σημαντικές όπως η πολιτική απορρήτου, δεν υπάρχει πρόβλημα. 
Τι γίνεται όμως όταν αυτό συμβαίνει με σελίδες όπως π.χ. των προϊόντων ή των υπηρεσιών;</p>
<p>Θα γράψω για αυτά τα σύνθετα ζητήματα ξεκινώντας με τον τρόπο με τον οποίο η Google βρίσκει τις σελίδες, τις αναλύει και ενδεχομένως τις καταγράφει.</p>
<h2 id="heading-google-crawler">Google Crawler</h2>
<p>H Google για τη διαδικασία της σάρωσης του Internet, του εντοπισμού και της καταγραφής των σελίδων, χρησιμοποιεί ένα είδος λογισμικού, τον Google crawler (ή Googlebot, spider κτλ).</p>
<h2 id="heading-discovery">Discovery</h2>
<p>Εφόσον δεν υπάρχει ένας κεντρικός κατάλογος στον οποίο να καταγράφονται αυτόματα όλες οι σελίδες, η Google θα πρέπει με κάποιο τρόπο να τις ανακαλύψει.
Αυτό γίνεται με τον Google crawler ο οποίος περιπλανάται στο Internet πηγαίνοντας από τη μία σελίδα στην άλλη μέσω των links που βρίσκει, ψάχνοντας για νέο ή ενημερωμένο περιεχόμενο και σελίδες που δεν υπάρχουν ήδη στη βάση της Google.
Ο crawler μπορεί να λάβει πληροφορίες για κάτι καινούργιο και από τα XML sitemaps.</p>
<h2 id="heading-crawling">Crawling</h2>
<p>Μόλις η Google ανακαλύψει μια URL πρεπει να την επισκεφθεί (crawl) για να μάθει τι υπάρχει σε αυτήν.
Όμως η Google δεν κάνει crawl όλες τις σελίδες που βρίσκει. Χρησιμοποιεί αλγόριθμους για να καθορίσει ποιες από τις σελίδες και με ποια προτεραιότητα θα κάνει crawl, ανάλογα με το πόσο "σημαντικές" τις θεωρεί.</p>
<h2 id="heading-rendering">Rendering</h2>
<p>Η Google επισκέπτεται την σελίδα και την αναπαραγάγει (render) με μία διαδικασία παρόμοια με τον τρόπο που βλέπουμε τις σελίδες στους browsers μας και ειδικότερα τον Chrome.
Αυτό γίνεται για να καταλάβει πως είναι σχεδιασμένη η σελίδα, το περιεχόμενο και την λειτουργικότητα της, με έμφαση στον τρόπο που εμφανίζεται και λειτουργεί στα κινητά τηλέφωνα.</p>
<h2 id="heading-indexing">Indexing</h2>
<p>Στο τέλος η Google αναλύει το περιεχόμενο, τα κείμενα, τις φωτογραφίες, και αξιολογεί την ποιότητα τους για να αποφασίσει εάν η σελίδα είναι κατάλληλη για να εμφανίζεται στα αποτελέσματα των αναζητήσεων.
Εάν όλα πάνε καλά τότε η σελίδα αποθηκεύεται στο Google Ιndex, τη βάση δεδομένων από την οποία η Google αντλεί τα αποτελέσματα των αναζητήσεων.</p>
]]></content:encoded></item><item><title><![CDATA[Server-Side Tagging με το Google Tag Manager]]></title><description><![CDATA[O Google Tag Manager είναι ένα δωρεάν εργαλείο που μας επιτρέπει να δημιουργούμε και να διαχειριζόμαστε με ευκολία τις λεγόμενες ετικέτες ώστε να επεκτείνουμε τις δυνατότητες τις ιστοσελίδας μας καθώς και στην αποστολή δεδομένων αλληλεπίδρασης χρηστώ...]]></description><link>https://blog.giannis.dev/server-side-tagging-me-to-google-tag-manager</link><guid isPermaLink="true">https://blog.giannis.dev/server-side-tagging-me-to-google-tag-manager</guid><category><![CDATA[analytics]]></category><category><![CDATA[data]]></category><dc:creator><![CDATA[Giannis Theodoropoulos]]></dc:creator><pubDate>Thu, 08 Apr 2021 16:40:49 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1650560294386/lZhXKDcRJ.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>O Google Tag Manager είναι ένα δωρεάν εργαλείο που μας επιτρέπει να δημιουργούμε και να διαχειριζόμαστε με ευκολία τις λεγόμενες ετικέτες ώστε να επεκτείνουμε τις δυνατότητες τις ιστοσελίδας μας καθώς και στην αποστολή δεδομένων αλληλεπίδρασης χρηστών στο Google Analytics ή και στο Google Analytics 4.<br />Εδώ και κάποιους μήνες η Google έχει κυκλοφορήσει σε public beta την δυνατότητα <a target="_blank" href="https://developers.google.com/tag-manager/serverside/intro">Server-side tagging</a> για τον Google Tag Manager.<br />Εν συντομία το Server-side tagging σημαίνει ότι ο container του Google Tag Manager μπορεί να τρέχει από το περιβάλλον κάποιου server, αυτό έχει σαν αποτέλεσμα τα δεδομένα και οι ετικέτες που έχουμε δημιουργήσει να μην περνάνε καθόλου μέσα από τους Servers της Google αλλά από δικό μας server όπου και έχουμε τον πλήρη έλεγχο.<br />Εκτός από την καλύτερη ασφάλεια που μας παρέχει ως αναφορά την συλλογή και διανομή των δεδομένων το Server-side tagging βοηθάει επίσης στην απόδοση της ιστοσελίδα μας διότι οι ετικέτες τρέχουν σε επίπεδο server και όχι σε επίπεδο browser χρήστη.</p>
<h2 id="heading-plhrhs-elegxos-twn-dedomenwn-poy-syllegontai">Πλήρης έλεγχος των δεδομένων που συλλέγονται</h2>
<p>Ακόμα ένα από τα πλεονεκτήματα που προσφέρει είναι ότι για τα δεδομένα στέλνονται μεταξύ της συσκευής του χρήστη και της ιστοσελίδας μας έχουμε τον πλήρη έλεγχο, δεν υπάρχουν ανεπιθύμητα third-party cookies όπως επίσης και εξωτερικές προς τρίτους συνδέσεις με το browser του χρήστη, η επικοινωνία του χρήστη πραγματοποιείται μόνο με τον δικό μας server.<br />Μια ακόμη δυνατότητα που μας δίνει το Server-side tracking είναι η χρήση του δικού μας domain/subdomain σαν endpoint, όταν χρησιμοποιούμε same-site στα cookies η συμπεριφορά των browsers στο tracking protection/προστασία παρακολούθησης είναι εντελώς διαφορετική από το αν χρησιμοποιούμε το endpoint του Google Tag Manager <code>my-server-side.domain.com</code> vs  <code>www.googletagmanager.com</code> .</p>
<h2 id="heading-prostasia-apo-mhxanismoys-content-blocking">Προστασία από μηχανισμούς content blocking</h2>
<p>Συνήθως το content blocking/αποκλεισμός περιεχομένου βασίζεται σε γνωστές λίστες με διευθύνσεις που πρέπει να αποκλειστούν, όπως ανέφερα και πιο πάνω το <code>googletagmanager.com</code> είναι πιθανόν να αποκλείεται από την πλειοψηφία των browsers το <code>my-server-side.domain.com</code> σίγουρα δεν θα περιλαμβάνεται σε καμία λίστα αποκλεισμού.</p>
<h2 id="heading-diafaneia-sthn-syllogh-dedomenwn">Διαφάνεια στην συλλογή δεδομένων</h2>
<p>Σημαντικό θέμα επίσης είναι η διαχείριση συναίνεσης του χρήστη, όπως και σε κάθε άλλη περίπτωση και εδώ πρόκειται για κάτι που πρέπει να λάβουμε υπόψη.<br />Συνήθως η συγκατάθεση του χρήστη αποθηκεύεται σε μια καταχώριση cookie ή localStorage για κάθε περίσταση, στην περίπτωση που χρησιμοποιούμε Server-side tagging υπάρχει μια ενιαία ροή όπου μπορεί να διαχωρίζεται σε πολλαπλά αιτήματα marketing, διαφήμισης, αναλυτικών στοιχείων κ.α.<br />Τα API συναίνεσης που κυκλοφορούν δεν μπορούν να αξιοποιηθούν από τα πρότυπα που υπάρχουν στον container του Tag Manager συνεπώς πρέπει να δημιουργήσουμε ερμηνείες και να αναλύσουμε τους λόγους της συναίνεσης που ζητάμε από τον χρήστη.<br />Πρέπει να είμαστε ξεκάθαροι σχετικά με τα δεδομένα που συλλέγονται στον ιστότοπό μας, ο χρήστης πρέπει να γνωρίζει ακριβώς τι κάνει όταν επιλέγει να αποκλείσει ή μη τη συλλογή δεδομένων.</p>
<h2 id="heading-kostos">Κόστος</h2>
<p>Το κόστος εκτέλεσης ετικετών από το περιβάλλον του Server-side είναι μεγάλο ή μικρό, ανάλογα με το τι συγκρίνετε, είναι μεγάλο σε σύγκριση με την απλή εκτέλεση των ετικετών κατευθείαν μέσα από το Google Tag Manager στο πρόγραμμα περιήγησης.<br />Είναι μικρό σε σύγκριση με τα οφέλη που θα λάβουμε ως αντάλλαγμα, αυτή είναι καθαρά προσωπική άποψη.<br />Το κόστος προσδιορίζεται από την επισκεψιμότητα της ιστοσελίδας μας οπότε είναι δύσκολο να προσδιοριστεί ποιο θα είναι το ακριβές για μια ιστοσελίδα που χρησιμοποιεί Server-side tagging χωρίς να έχουμε στατιστικά επισκέψεων.</p>
<hr />
<p>Πιστεύω ότι το Server-side tagging θα αλλάξει το τοπίο των Analytics, η Google δεν είναι η πρώτη εταιρεία που έδωσε την δυνατότητα για Server-side tagging, το κάνουν και άλλοι η διαφορά είναι ότι οι υπόλοιποι έχουν πολύ υψηλές χρεώσεις.<br />Ισως υπάρξουν κάποιες ανησυχίες σχετικά με το Server-side tagging, για αυτόν τον λόγο, σας προτείνω να είστε απόλυτα ξεκάθαροι προς τους επισκέπτες σας σχετικά με το τι καταγράφετε και πως είτε άμεσα είτε έμμεσα και την ιδιότητα σας, αυτό φυσικά δεν αφορά μόνο το Server-side tagging.</p>
<p>Είμαι βέβαιος ότι θα δούμε πολλά νέα προσαρμοσμένα πρότυπα ειδικά σχεδιασμένα για  Server Containers και αναμένω επίσης ότι οι περισσότεροι πάροχοι στο χώρο των ads tech και του marketing tech θα προσαρμόσουν  ανάλογα τεχνικές επικοινωνίας server-to-server για τα pixel και τα τελικά σημεία συλλογής δεδομένων.</p>
]]></content:encoded></item><item><title><![CDATA[Πως προσθέτω λογότυπο στο εταιρικό μου email]]></title><description><![CDATA[Το email αποτελεί ακόμα έναν από τους πιο διαδεδομένους τρόπους επικοινωνίας μεταξύ ιδιωτών και επιχειρήσεων, στέλνοντας ένα email σε έναν ιδιώτη για μια προσφορά, ένα newsletter ή για την εξέλιξη της παραγγελίας του, καλό θα ήταν το μήνυμα μας να συ...]]></description><link>https://blog.giannis.dev/pws-pros8etw-logotypo-sto-etairiko-moy-email</link><guid isPermaLink="true">https://blog.giannis.dev/pws-pros8etw-logotypo-sto-etairiko-moy-email</guid><category><![CDATA[marketing]]></category><category><![CDATA[email marketing]]></category><category><![CDATA[Emails]]></category><dc:creator><![CDATA[Giannis Theodoropoulos]]></dc:creator><pubDate>Wed, 20 May 2020 18:39:38 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1650566166802/4WxdlUIoc.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Το email αποτελεί ακόμα έναν από τους πιο διαδεδομένους τρόπους επικοινωνίας μεταξύ ιδιωτών και επιχειρήσεων, στέλνοντας ένα email σε έναν ιδιώτη για μια προσφορά, ένα newsletter ή για την εξέλιξη της παραγγελίας του, καλό θα ήταν το μήνυμα μας να συνοδεύεται από μια εικόνα αποστολέα (αλλιώς γνωστό ως avatar email).</p>
<p>Η εικόνα του αποστολέα σε ένα email μας βοηθάει να ξεχωρίσουμε και προσδίδει ένα κύρος στην επιχείρηση μας, <strong>πως όμως προσθέτουμε ένα avatar-logo στο εταιρικό μας email ;</strong> </p>
<p>Ο πιο γνωστός και διαδεδομένος τρόπος έχει ένα σημαντικό μειονέκτημα, απεικονίζει το λογότυπο μας μόνο σε παραλήπτες με λογαριασμό gmail, αυτό δείχνει να αλλάζει γιατί πολύ πρόσφατα δημιουργήθηκε ένα νέο πρότυπο που λέγετε BIMI (ακρωνύμιο των Brand Indicators for Message Identification) και ο σκοπός του είναι να δείξει το λογότυπο μας στους παραλήπτες των email μας, συνεχίζοντας θα σας αναλύσω και τους δύο τρόπους και πως θα τους εφαρμόσετε.</p>
<h3 id="heading-pro8hkh-logotypoy-sto-email-moy-gia-paralhptes-me-logariasmo-gmail">Προθήκη λογοτύπου στο email μου για παραλήπτες με λογαριασμό gmail.</h3>
<blockquote>
<p>Η παρακάτω μέθοδος δεν εφαρμόζετε αν διαχειρίζεστε τον εταιρικό σας λογαριασμό μέσο Gsuite</p>
</blockquote>
<p>Όπως θα διαπιστώσατε και από τον τίτλο αυτός ο τρόπος λειτουργεί μόνο αν οι παραλήπτες του email σας έχουν λογαριασμό gmail.</p>
<p>Παίρνω ως δεδομένο ότι έχετε έναν λογαριασμό email info@mycompany.gr και ότι αυτός είναι ο λογαριασμός απο όπου στέλνετε μηνύματα email στους παραλήπτες σας.</p>
<p>Αυτά που χρειαζόμαστε είναι το λογότυπο μας σε μέγεθος 600x600 px τουλάχιστον, οπότε εφόσον το έχουμε έτοιμο προχωράμε στο επόμενο βήμα.</p>
<ol>
<li>Πηγαίνουμε στην παρακάτω διεύθυνση και κάνουμε εγγραφή <a target="_blank" href="https://accounts.google.com/SignUpWithoutGmail">https://accounts.google.com/SignUpWithoutGmail</a></li>
<li>Εφόσον ολοκληρώσουμε την εγγραφή ακολουθώντας όλα τα βήματα πηγαίνουμε στο <a target="_blank" href="https://myaccount.google.com/">https://myaccount.google.com/</a> κάνουμε είσοδο με τα ίδια στοιχεία που κάναμε εγγραφή πιο πάνω και προσθέτουμε το λογότυπο μας.</li>
</ol>
<p>Αν θέλουμε να χρησιμοποιήσουμε το λογότυπο μας και σε άλλον λογαριασμό email που τυχόν χρησιμοποιούμε για επικοινωνία θα χρειαστεί να επαναλάβουμε τα παραπάνω βήματα.</p>
<p><strong>Συνεχίζοντας θα χρειαστεί να δηλώσετε το λογότυπο σας και το λογαριασμό email και σε άλλη μια υπηρεσία που λέγετε Gravatar.</strong></p>
<p>Το Gravatar είναι ένα παγκοσμίως αναγνωρισμένο πρότυπο Avatar, που το χρησιμοποιούν πάρα πολλοί ιστότοποι και εφαρμογές για να παρέχουν ένα avatar-λογότυπο στον χρήστη με βάση την διεύθυνση email.</p>
<p>Για να δηλώσετε το λογότυπο σας στο Gravatar ακολουθείτε τα παρακάτω βήματα</p>
<ol>
<li>Δημιουργήστε έναν λογαριασμό στο <a target="_blank" href="https://el.gravatar.com/">https://el.gravatar.com</a></li>
<li>Ανεβάστε το λογότυπο σας στο Gravatar</li>
<li>Προσθέστε τον εταιρικό λογαριασμό email που επιθυμείτε και μετά ορίστε το λογότυπο που ανεβάσατε για αυτό το λογαριασμό.</li>
</ol>
<p>Επαναλάβετε τα βήματα 2 και 3 αν θέλετε να προσθέσετε και άλλον λογαριασμό email.</p>
<p>To gravatar μας δίνει επίσης την δυνατότητα να ελέγξουμε το λογότυπο που ανεβάσαμε ακολουθώντας τον παρακάτω σύνδεσμο <a target="_blank" href="https://el.gravatar.com/site/check/">https://el.gravatar.com/site/check/</a></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1650566290104/ohQcapjls.png" alt="Gravatar - Globally Recognized Avatars.png" /></p>
<p>Είμαστε έτοιμοι! Τώρα, όταν οι παραλήπτες λαμβάνουν τα email μας σε λογαριασμό Gmail ή σε μια υπηρεσία που χρησιμοποιεί το Gravatar, θα βλέπουν το λογότυπο μας.</p>
<h3 id="heading-pros8hkh-logotypoy-sto-etairiko-email-symfwna-me-to-protypo-bimi-brand-indicators-for-message-identification">Προσθήκη λογοτύπου στο εταιρικό email σύμφωνα με το πρότυπο BIMI (Brand Indicators for Message Identification)</h3>
<p>Όπως έγραψα και πιο πάνω το BIMI είναι ένα νέο πρότυπο που έρχεται να λύσει το πρόβλημα της εμφάνισης λογότυπου στο email σας η βασική του διαφορά με τον παραπάνω τρόπο προσθήκης λογοτύπου είναι ότι η δήλωση του λογοτύπου γίνεται σε επίπεδο domain και όχι λογαριασμού email αυτό πρακτικά σημαίνει ότι εφόσον το χρησιμοποιήσετε όλα τα email που στέλνετε από το @mycompany.gr θα έχουν το λογότυπο που θα ορίσετε, καλό εεε!</p>
<p>Προς το παρόν αυτό το πρότυπο χρησιμοποιείται μόνο από τη Yahoo, η Google έχει δηλώσει ότι θα το χρησιμοποιήσει κάποια στιγμή στο μέλλον και οι λοιποί mail provider Microsoft, Apple δεν έχουν κάνει κάποια αναφορά σχετικά με το αν και πότε θα το χρησιμοποιήσουν.</p>
<p><strong>Για παραλήπτες με λογαριασμούς Microsoft μπορείτε να υποβάλετε αίτημα για χρήση λογότυπου στο παρακάτω link <a target="_blank" href="https://business.microsoft.com/">https://business.microsoft.com/</a></strong></p>
<p>To ΒΙΜΙ έχει υλοποιηθεί με τέτοιο τρόπο έτσι ώστε εκτός από την απεικόνιση του λογοτύπου να πιστοποιεί και να επαληθεύει την ταυτότητα μας σαν αποστολέα στους παραλήπτες μας, με αυτό το τρόπο προσδίδει στα email μας ένα ακόμα επίπεδο ασφάλειας και μειώνει σημαντικά τις πιθανότητες το email που στέλνουμε να χαρακτηριστεί ως spam.</p>
<p>Τι θα χρειαστείτε για να το υλοποιήσετε</p>
<ol>
<li>Για να λειτουργήσει το BIMI χρειάζεται να έχετε ορίσει της DNS εγγραφές του domain σας για τα SPF, DKIM και DMARC records.</li>
<li>Πρέπει να έχετε πρόσβαση στους DNS του domain σας για να ορίσετε μια νέα καταχώριση DNS BIMI.</li>
<li>To λογότυπο μας θα πρέπει να είναι τετράγωνο σε μορφή SVG.</li>
<li>Εφόσον έχουμε το λογότυπο μας σε ένα αρχείο logo.svg (τυχαίο όνομα) θα χρειαστεί επίσης να το ανεβάσουμε στο root του domain μας www.mycompany.gr/logo.svg, ή σε κάποιο άλλο σημείο του domain μας αρκεί να είναι προσβάσιμο απο οποιονδήποτε browser.</li>
</ol>
<p>H εγγραφή DNS που πρέπει να δηλώσετε θα είναι της μορφής</p>
<pre><code>default._bimi.www.mycompany.gr. TXT v<span class="hljs-operator">=</span>BIMI1; l<span class="hljs-operator">=</span>https:<span class="hljs-comment">//www.mycompany.gr/logo.svg;</span>
</code></pre><p>BIMI DNS Record example</p>
<p>Θεωρώ δεδομένο ότι έχετε ορίσει εγγραφές DKIM &amp; SPF αλλά είναι πολύ πιθανόν να μην έχετε εγγραφή DMARC οπότε η εγγραφή DMARC που θα χρειαστεί θα είναι της μορφής</p>
<pre><code>_dmarc.www.mycompany.gr. TXT v<span class="hljs-operator">=</span>DMARC1; p<span class="hljs-operator">=</span>reject; pct<span class="hljs-operator">=</span><span class="hljs-number">50</span>; rua<span class="hljs-operator">=</span>mailto:dmarc@mycompany.gr
</code></pre><p>DMARC DNS Record example</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1650566326498/tROE1d3Sx.png" alt="BIMI inspector - Validate or Generate Your BIMI Record.png" /></p>
<p>Εφόσον τελειώσουμε πρέπει και περιμένουμε κάποιες ώρες ώστε να ενημερωθούν οι εγγραφές DNS, κατόπιν μπορούμε να δούμε τα αποτελέσματα χρησιμοποιώντας το παρακάτω link <a target="_blank" href="https://mxtoolbox.com/bimi.aspx">https://mxtoolbox.com/bimi.aspx</a></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1650566344608/pHAYUGAVa.png" alt="Network Tools  DNS IP Email.png" /></p>
]]></content:encoded></item></channel></rss>