Archimidis Mertzanos.

Archimidis Mertzanos.


Proud Father & Husband - WordPress Lover - Lead WordPress Developer @ Hellenic Technologies - Plugin Author - Speaker @ WordCamp Athens 2017

Ιανουάριος 2017
ΔΤΤΠΠΣΚ
  Αυγ »
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

Kατηγορίες


Προσθήκη schema.org (microdata) σε WordPress Theme. Μέρος 1

Αρχιμήδης ΜερτζάνοςΑρχιμήδης Μερτζάνος

Καλησπέρα σας και χρόνια πολλά. Εύχομαι το 2017 να φέρει σε όλους ό,τι επιθυμείτε & ό,τι δεν σας έφερε το 2016. Σίγουρα οι προβλέψεις δεν είναι ό,τι καλύτερο αλλά πραγματικά εάν υπάρχει υγεία όλα τα άλλα-ή έστω όλα- βρίσκονται. Ευχαριστώ για την επίσκεψή σας στο νέο mertzanos.gr το οποίο θα συνεχίσει στην ουσία το webapptester.com με μία μικρή διαφορά. Τα tutorials αλλά και τα γενικότερου ενδιαφέροντος άρθρα θα είναι πολύ πιο developer oriented από ότι τώρα. Εννοείται ότι έχω κατά νου και όλους εσάς που στηρίζετε το webapptester και ξεκινάτε τα πρώτα σας βήματα στο web development,απλά το ύφος των θα πρέπει να είναι πολύ πιο μαζεμένο και straight ώστε να σας δίνεται το έναυσμα για να βρείτε τις λύσεις που σας ταιριάζουν. Μετά από αυτά πάμε γρήγορα να δούμε τι είναι αυτό το schema.org.

[call_to_action]Αν σας αρέσουν τα άρθρα, ή οτιδήποτε κάντε τα share να το μάθουν και άλλοι. Όλο το net βασίζεται στην πληροφορία. Μοιραστείτε λοιπόν την πληροφορία χωρίς φόβο αλλά με πάθος!![/call_to_action]

Τι είναι το schema.org ;

Μην πάμε μακριά . Ας δούμε τι λέει η Επίσημη ιστοσελίδα του schema.org για το schema.org.

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

Το παραπάνω είναι ο βασικός ορισμός του schema.org ο οποίος δεν είναι τόσο κατανοητός με την πρώτη ματιά. Θα προσπαθήσω να το εξηγήσω με κατανοητούς όρους. Το πιο βασικό είναι ότι το schema.org προέρχεται από την ελληνική λέξη “σχήμα” . Το πρώτο που κρατάμε είναι ότι πλέον πρόκειται για “σχήματα” δεδομένων. Με πολύ απλά λόγια το schema.org είναι ένας τρόπος που μπορούμε να παρουσιάσουμε τα δεδομένα σε μία ιστοσελίδα ώστε η μηχανή αναζήτησης που θα την βρει , να μπορεί να “κατανοήσει” ,άρα και να παρουσιάσει καλύτερα , τι είναι αυτό που “δείχνει” αυτή η σελίδα. Για παράδειγμα κάντε μία αναζήτηση στο Google γράφοντας “Carbonara recipe” και παρατηρήστε τι αποτελέσματα παίρνετε.

Παράδειγμα αποτελεσμάτων του schema.org στη μηχανή αναζήτησης Google.

Παράδειγμα αποτελεσμάτων του schema.org στη μηχανή αναζήτησης Google.

Παρατηρείτε ότι τα αποτελέσματα αυτά, δεν είναι μόνο κείμενο αλλά έχουν και εικόνα, κάποιες κριτικές και βαθμολογία, αλλού μπορείτε να δείτε ότι υπάρχουν τα λεπτά ψησίματος του συγκεκριμένου γεύματος και γενικά δίνονται αρκετές πληροφορίες σχετικά με το συγκεκριμένο αποτέλεσμα. Σε αυτές λοιπόν τις σελίδες έχει εφαρμοστεί το λεγόμενο “Recipe Schema”.

Πώς ο crawler της Google “βλέπει” αυτές τις έξτρα πληροφορίες; Ο ρόλος των microdata .

Πολλοί αναρωτιούνται πώς ο crawler των διαφόρων μηχανών αναζήτησης βλέπουν και παρουσιάζουν τις διάφορες πληροφορίες, όπως είδαμε στο παράδειγμα. Ένας τρόπος εφαρμογής του schema.org είναι μέσω της χρήσης των microdata. 

Τα microdata είναι “δεδομένα” που τα τοποθετούμε inline μέσα στον HTML κώδικα της σελίδας, με συγκεκριμένο τρόπο, και δίνουν τη δυνατότητα στη μηχανή αναζήτησης να “καταλάβει” τι είναι αυτό που διαβάζει και έτσι να το παρουσιάσει καλύτερα στους χρήστες.

Παράδειγμα από το schema.org – Article Schema.

Ένα απλό παράδειγμα της χρήσης των Microdata είναι το εξής:

How to Tie a Reef Knot
by John Doe
This article has been tweeted 1203 times and contains 78 user comments.

Με χρήση microdata:

<div itemscope itemtype="http://schema.org/Article">
  <span itemprop="name">How to Tie a Reef Knot</span>
  by <span itemprop="author">John Doe</span>
  This article has been tweeted 1203 times and contains 78 user comments.
  <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
    <div itemprop="interactionService" itemscope itemid="http://www.twitter.com" itemtype="http://schema.org/Website">
      <meta itemprop="name" content="Twitter" />
    </div>
    <meta itemprop="interactionType" content="http://schema.org/ShareAction"/>
    <meta itemprop="userInteractionCount" content="1203" />
  </div>
  <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
    <meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
    <meta itemprop="userInteractionCount" content="78" />
  </div>
</div>

Δείτε προσεκτικά τον κώδικα παραπάνω και θα δείτε ότι έχει τοποθετηθεί μέσα στο HTML το schema.org και είναι τύπου “Article”. Από εκεί και πέρα κάθε schema.org έχει διάφορα microdata και πολλά schemas επικαλύπτουν το ένα το άλλο, για παράδειγμα το “Article” επικαλύπτει το “NewsArticle” κλπ. Έτσι το “NewsArticle” χρησιμοποιεί και microdata από το “Article” και ου το καθ’ εξής. Δείτε διάφορα microdata που μπορεί να έχει ένα “Article“. Είναι προφανές ότι ΔΕΝ είναι υποχρεωτικό να τα έχουμε όλα. Όμως με το εργαλείο που ελέγχουμε την εγκυρότητα της τοποθέτησης του schema.org στη σελίδα μας, μας γίνεται γνωστό ποια είναι τα υποχρεωτικά microdata και ποια όχι.

Επίδραση του schema.org στο SEO της σελίδας

Χωρίς αμφιβολία η προσθήκη του schema.org σε μία ιστοσελίδα δυναμώνει κατά πολύ το SEO της. Δεν ξεχνάμε ποτέ όμως τις 4 λέξεις που θα καθορίσουν εντέλει τη επιτυχία της ή όχι. Content Is The King. Χωρίς καλά κείμενα και άρθρα, SEO και Google δεν υπάρχει . Εκτός αν έχουμε ένα τεράστιο ποσό να δαπανήσουμε σε adwords και γενικότερα διαφήμιση αλλά το ζήτημα που πρέπει να κοιτάμε είναι πώς θα κρατήσουμε τον επισκέπτη και πώς θα τον κάνουμε να μας επισκεφτεί πάλι.

Τοποθέτηση του schema.org σε μια σελίδα

Ύστερα από τα πιο θεωρητικά κομμάτια που αναφέραμε πιο πάνω είναι ώρα να δούμε πώς μπορούμε να τοποθετήσουμε το schema.org στη σελίδα μας και μάλιστα να ελέγξουμε ότι το έχουμε κάνει σωστά. Επειδή στο ίντερνετ υπάρχουν διάφορα, όχι πολλά, tutorials αυτό που θα δούμε είναι πρακτική εφαρμογή του schema.org στην ιστοσελίδα μου, στο mertzanos.gr ! Εννοείται θα ακολουθήσει και ένα μικρό video το οποίο θα αναφέρει 2-3 ιδέες και σκέψεις για το schema.org και το πώς μπορούμε να το τοποθετήσουμε σε υπάρχον theme.

Πώς ελέγχουμε το schema.org

Η Google μας παρέχει ένα εργαλείο το οποίο ονομάζεται structured data testing tool και ελέγχει τη τοποθέτηση των διαφόρων schemas στον κώδικα της ιστοσελίδας μας.

Τι schema είναι αυτό που επιλέγουμε;

Είναι αλήθεια ότι στην επιλογή αυτή έχουμε αρκετές επιλογές εκτός αν η ιστοσελίδα μας μιλάει για κάτι που δεν μπορεί να γίνει πιο συγκεκριμένο . Εντούτοις υπάρχει και το γενικό “WebPage” schema όπου είναι το πλέον γενικό. Το τρικ στις διάφορες σελίδες είναι να δώσουμε στην κάθε μηχανή αναζήτησης ένα hint για το τι είναι το κάθε URL που έχει κάνει crawl. Για παράδειγμα στη σελίδα που εμφανίζονται τα άρθρα μας, στο blog μας δηλαδή, μπορούμε να τοποθετήσουμε γενικό schema τύπου “Blog” και το κάθε ένα άρθρο που θα βρίσκεται στο blog , στη λίστα αυτή να είναι τύπου “BlogPosting“. Σε single άρθρο μπορούμε να χρησιμοποιήσουμε schema τύπου “article“. Βέβαια υπάρχουν και πιο “συγκεκριμένοι τύποι” του schema.org , για παράδειγμα ένα άρθρο μπορεί να είναι “Newsarticle”, “Report” και πολλά άλλα. Possibilities are endless.

Ενσωμάτωση schema.org στο υπάρχον WordPress

Στην ιστοσελίδα μου χρησιμοποιώ ένα theme το οποίο ονομάζεται “Read WP”. Οι λόγοι  που χρησιμοποιώ έτοιμο WordPress Theme και όχι κάτι tailor-made είναι αρκετοί αυτή τη στιγμή και θα τους μοιραστώ μαζί σας σε άλλο άρθρο. Σε αυτό λοιπόν το theme θα τοποθετήσω το schema.org και θα το κάνω πολύ πιο SEO frindly από ότι είναι. Θα αρχίσω τοποθετώντας το στα single posts και εν συνεχεία σε άλλα σημεία του website. Ίσως βέβαια δεν το τοποθετήσω σε όλο το site διότι δεν είναι και υποχρεωτικό αυτό. Σκεφτείτε ότι αν κάποιος θέλει να είναι 100% σωστός μπορεί να βάλει schema ακόμα και στο logo αλλά και στα navigation menus. Εγώ δεν θα το κάνω αυτό.

Ποιο schema θα χρησιμοποιήσω στο mertzanos.gr;

Το schema:Article είναι αυτό που είναι και πιο γενικό και που ταιριάζει στη ιστοσελίδα μου. Θα μπορούσα να γίνω πιο συγκεκριμένος , χρησιμοποιώντας κάποιο schema όπως το “NewsArticle” αλλά δεν χρειάζεται. Πηγαίνοντας στη σελίδα https://schema.org/Article θα δούμε τι properties μπορούμε να χρησιμοποιήσουμε. Για να ξεκινήσω να τοποθετώ το schema.org βρίσκω στο theme μου το single.php και βρίσκω μέσα στο αρχείο μου που ξεκινάει το single post.

Η συνολική δομή του single.php που υπάρχει στο WordPress Theme μου είναι η:

<div id="primary" class="site-content">
	<div id="content" role="main">
		<div class="readable-content blog-single">
			<?php
				if ( have_posts() ) :
					while ( have_posts() ) : the_post();
						?>
							<article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix' ); ?>>
								<header class="entry-header">
									<?php
										$hide_post_title = get_option( $post->ID . 'hide_post_title', false );
										
										if ( $hide_post_title )
										{
											$hide_post_title_out = 'style="display: none;"';
										}
										else
										{
											$hide_post_title_out = "";
										}
									?>
									<h1 class="entry-title" <?php echo $hide_post_title_out; ?>><?php the_title(); ?></h1>
								</header>
								<!-- end .entry-header -->
								
								<div class="entry-meta">
									<span class="post-category">
										<?php
											echo __( 'posted in', 'read' );
											
											echo ' ';
											
											the_category( ', ' );
										?>
									</span>
									<!-- end .post-category -->
									
									<span class="post-date">
										<?php echo __( 'on', 'read' ); ?> <a rel="bookmark" title="<?php the_time(); ?>" href="<?php the_permalink(); ?>"><time class="entry-date" datetime="2012-11-09T23:15:57+00:00"><?php echo get_the_date(); ?></time></a>
									</span>
									<!-- end .post-date -->
									
									<span class="by-author"> <?php echo __( 'by', 'read' ); ?>
										<span class="author vcard">
											<a class="url fn n" rel="author" title="<?php echo __( 'View all posts by ', 'read' ) . get_the_author(); ?>" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a>
										</span>
										<!-- end .author -->
									</span>
									<!-- end .by-author -->
									
									<?php
										$post_share_links_single = get_option( 'post_share_links_single', 'Yes' );
										
										if ( $post_share_links_single == 'Yes' )
										{
											get_template_part( 'part', 'share' );
										}
									?>
									
									<?php
										edit_post_link( __( 'Edit', 'read' ), '<span class="edit-link" style="margin-top: 8px;">', '</span>' );
									?>
								</div>
								<!-- end .entry-meta -->
								
								<?php
									if ( has_post_thumbnail() )
									{
										?>
											<div class="featured-image">
												<?php
													the_post_thumbnail( 'full', array( 'alt' => get_the_title(), 'title' => "" ) );
												?>
											</div>
											<!-- end .featured-image -->
										<?php
									}
									// end if
								?>
								
								<div class="entry-content clearfix">
									<?php
										the_content();
									?>
									
									<?php
										wp_link_pages( array( 'before' => '<div class="page-links clearfix">' . __( 'Pages:', 'read' ), 'after' => '</div>' ) );
									?>
								</div>
								<!-- end .entry-content -->
								
								<?php
									if ( get_the_tags() != "" )
									{
										?>
											<footer class="entry-meta post-tags">
												<?php
													the_tags( "", ', ', "" );
												?>
											</footer>
											<!-- end .entry-meta -->
										<?php
									}
									// end if
								?>
							</article>
							<!-- end .hentry -->
							
							<?php
								$about_the_author_module = get_option( 'about_the_author_module', 'Yes' );
								
								if ( $about_the_author_module == 'Yes' )
								{
									get_template_part( 'about', 'author' );
								}
							?>
							
							<nav class="row-fluid nav-single">
								<div class="span6 nav-previous">
									<?php
										previous_post_link( '<h4>' . __( 'PREVIOUS POST', 'read' ) . '</h4>%link', '<span class="meta-nav">&#8592;</span> %title' );
									?>
								</div>
								<!-- end .nav-previous -->
								
								<div class="span6 nav-next">
									<?php
										next_post_link( '<h4>' . __( 'NEXT POST', 'read' ) . '</h4>%link', '%title <span class="meta-nav">&#8594;</span>' );
									?>
								</div>
								<!-- end .nav-next -->
							</nav>
							<!-- end .nav-single -->
							
							<?php
								comments_template( "", true );
							?>
						<?php
					endwhile;
				endif;
				wp_reset_query();
			?>
		</div>
		<!-- end .blog-single -->
	</div>
	<!-- end #content -->
</div>

Διακρίνω την αρχή του άρθρου:

<?php
if ( have_posts() ) :
   while ( have_posts() ) : the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix' ); ?>>

Το κάθε single post βρίσκεται  <article>….</article> . Η πρώτη αλλαγή που θα κάνω είναι η εξής: Μετατρέπω το

<article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix' ); ?>>

σε

<article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix' ); ?> itemscope itemtype="http://schema.org/Article">

Από τη στιγμή που ορίζουμε αυτό ξεκινάει και όλη η εργασία μας για το ποια properties θα βάλουμε στο άρθρο μας. Αν θέλουμε να βρούμε μόνο τα required (υποχρεωτικά) ,απλά τοποθετούμε το URL του άρθρου μας στο ειδικό debugging tool και μας αναλύει τι πρέπει να συμπληρώσουμε ακόμα. Κάνοντας το test παίρνουμε το παρακάτω screenshot:

Σφάλματα στο schema.org

Παρατηρούμε ότι για το schema.org:Article πρέπει υποχρεωτικά να βάλουμε author, πότε δημοσιεύτηκε το άρθρο, headline(τίτλος), URL βασικής εικόνας και όχι μόνο (αυτό είναι tricky) , publisher (συνήθως το URL ή το όνομα της ιστοσελίδας – επίσης tricky) και μας προτείνει και άλλα δύο properties , το dateModified και το mainEntityOfPage. Θα δοκιμάσουμε να βάλουμε τα required, και ότι μείνει θα δοκιμάσουμε να το βάλουμε και αυτό.

Λογικά το author και datepublished θα πρέπει να είναι μέσα σε κομμάτι κώδικα που παρουσιάζει τα metadata του post. Ψάχνοντας τα βρίσκουμε και τοποθετούμε:

Για το author:

<a class="url fn n" rel="author" title="<?php echo __('View all posts by ', 'read') . get_the_author(); ?>" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"> <?php the_author(); ?></a>

το αλλάζω σε :

<a class="url fn n" rel="author" title="<?php echo __('View all posts by ', 'read') . get_the_author(); ?>" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"> <span itemprop="author"><?php the_author(); ?></span></a>

Παρατηρήστε το “itemprop” πριν το όνομα του author.

Για το datePublished: Εδώ είναι λίγο πιο σύνθετο το θέμα διότι το property αυτό δέχεται date object .Τις περισσότερες φορές η ημερομηνία που βλέπουμε δεν είναι date object αλλά ένα string represantation όπως λέμε. Έτσι αυτό που μπορούμε να κάνουμε εδώ είναι να χρησιμοποιήσουμε το attribute “content” με αυτό το itempop. Το datePublished δέχεται τιμές με συγκεκριμένα formats όπως εδώ

Βρίσκουμε το κομμάτι αυτό:

<span class=”post-date”> ….. </span> και μέσα σε αυτό τοποθετούμε το

 <span itemprop="datePublished" content="<?php echo get_the_date('Y-m-d'); ?>"></span>

Έτσι το συνολικό μας κομμάτι κώδικα είναι το :

<span class="post-date">
<?php echo __('on', 'read'); ?> <a rel="bookmark" title="<?php the_time(); ?>"  href="<?php the_permalink(); ?>">
<time class="entry-date" datetime="<?php echo get_the_date('d-m-y H:i:s'); ?>"
<strong><span itemprop="datePublished" content="<?php echo get_the_date('Y-m-d'); ?>"></strong>
</span> <?php echo get_the_date(); ?></time></a> </span>

Για το headline:

Βρίσκω το h1 του άρθρου, ή όποιο σημείο χρησιμοποιεί σαν headline-title και το αλλάζω σε:

<h1 class="entry-title"  itemprop="headline" <?php echo $hide_post_title_out; ?>><?php the_title(); ?></h1>

Κάνοντας το test για την σωστή δομή των microdata μου , παίρνω το αποτέλεσμα:

Παρατήρηση στα μέχρι στιγμής αποτελέσματα του structured data testing tool

Βλέποντας την παραπάνω εικόνα θα παρατηρήσετε τα εξής: Ότι τα σωστά itemprops τα μαρκάρει με μαύρο και τα λάθος με κόκκινο χρώμα. Ένα άλλο στοιχείο είναι στο σημείο που αναφέρει τα σχετικά με το “author” itemprop. Παρατηρείστε ότι εκτός από το name , που είναι το όνομα του συντάκτη του άρθρου, έχει και ένα @type. Αυτό μας δείχνει ότι το itemprop author δεν ανήκει στην πραγματικότητα στο Article αλλά σε ένα πολύ γενικότερο schema , αυτό του Thing. Έτσι βλέπουμε και στην πράξη ότι ένα schema “κληρονομεί” χαρακτηριστικά και από άλλα schemas και μπορεί να χρησιμοποιήσει τα δικά τους itemprops. Υπάρχουν περιπτώσεις βέβαια που για να χρησιμοποιήσουμε ένα itemprop πρέπει να δηλώσουμε ένα schema μέσα σε ένα άλλο schema, κοινώς να έχουμε nested schemas.

Η συνέχεια του άρθρου αυτού όπως και το video που περιγράφει το τι κάναμε για την τοποθέτηση του schema.org θα δοθεί σε επόμενο άρθρο, στις επόμενες ημέρες. Μέχρι τότε μοιράστε το άρθρο, κοινοποιήστε το και φυσικά αν επιθυμείτε γραφτείτε στο newsletter μου. Μπορείτε επίσης να σχολιάσετε ό,τι θέλετε κάτω από το άρθρο. Ευχαριστώ για την ανάγνωση.

Proud Father & Husband - WordPress Lover - Lead WordPress Developer @ Hellenic Technologies - Plugin Author - Speaker @ WordCamp Athens 2017

    1
    Αφήστε σχόλιο

    avatar
    1 Thread Σχολίων
    0 Απαντήσεις στο thread
    0 Ακόλουθοι
     
    Πιο δημοφιλές σχόλιο
    Πιο "καυτό" thread
    1 Comment authors
    Αρχιμήδης Μερτζάνος Recent comment authors
      Subscribe  
    νεότερα παλαιότερα πιο πολύ ψηφισμένα
    Ενημέρωσε με για..