Cześć!
Dzisiaj pokażę Ci prostą wtyczkę, która pomoże Ci w prosty sposób ustawić ważne z punktu widzenia SEO meta tagi – słowa kluczowe oraz opis. Przy okazji nauczysz się jak dodać własne metaboxy oraz pola bez używania dodatkowych wtyczek.
Na początek krótki opis – czym właściwie są meta tagi?
Do stworzenia strony internetowej używa się konkretnych elementów. To, co widzi użytkownik na froncie, to już gotowa witryna napisana za pomocą kodu HTML. Dzięki temu na stronie można zamieścić najbardziej potrzebne treści. Mogą to być teksty, zdjęcia, multimedia, dane kontaktowe i wiele innych rzeczy. W kodzie HTML znajdziemy również wspomniane meta tagi. Te znaczniki umieszczamy w nagłówku strony, a za ich pomocą można ją dokładnie opisać.
Ten opis odczytywany jest następnie przez przeglądarki internetowe. Dzięki niemu kiedy użytkownik wpisuje w wyszukiwarkę daną frazę, w wynikach pojawiają się strony dopasowane pod kątem odpowiedzi na zapytanie. Oczywiście prawda meta tagi pierwotnie stworzono, aby odczytywały je roboty indeksujące strony, ale ich treść realnie wpływa na dotarcie witryny do odbiorców. Stosując meta tagi HTML, mamy pewność, że strona będzie widoczna w sieci i użytkownicy łatwo na nią trafią
Jak umieścić odpowiednie meta tagi w WordPressie?
Do napisania tego wpisu oraz w ogóle do stworzenia wtyczki zainspirowała mnie dyskusja na jednej z facebookowych grup dotyczących WordPressa. Padło na niej dość proste pytanie – mianowicie czy jest możliwe dodawanie w prosty sposób meta tagów bez używania „dużych” wtyczek takich jak np. RankMath SEO, YoastSEO. Oczywiście, że się da – wystarczy dosłownie parę linijek kodu, aby dołożyć do naszego WordPressa prostą i przydatną funkcjonalność.
Dygresja.
Tak, wiem jak to brzmi – zastępowanie wtyczki wtyczką, ale dodam jedynie, iż cały kod, o którym dzisiaj mówimy posiadam jako standardowy feature w moim motywie, którego używam w WordPressowych projektach. Plugin powstał wyłącznie w celach treningowo – edukacyjnych 🙂 Przejdźmy zatem do meritum, czyli:
SEO Tags – prosty plugin do dodawania meta tagów.
Wtyczkę instalujemy dokładnie w taki sam sposób jak każdy inny plugin pobrany z internetu – wrzucamy nasz plik .zip i uruchamiamy plugin.
Po jego uruchomieniu w edytorze naszych wpisów zobaczymy dodatkowe okienko pozwalające ustawić nasz opis.
Jako meta keywords wtyczka pobiera dodane przez nas do wpisu tagi i dodaje je w headzie witryny.
Wtyczkę możesz pobrać klikając tutaj, zainstalować na swojej stronie i jeśli nie jesteś zbytnio zainteresowany programowaniem, możesz spokojnie zakończyć lekturę tego wpisu. PHPowe freaki przechodzą dalej.
Na początek – rzućmy okiem jak skonstruowany jest plugin.
Oprócz standardowego pliku seotags.php – czyli głównego pliku naszej wtyczki znajdziemy tutaj folder classes zawierający – a jakże – klasy oraz folder z szablonami – strony otwieranej jako zakładka menu w kokpicie WordPressa oraz plik form.php – zawierający szablon metaboxa dodawanego przez wtyczkę do stron i wpisów.
Tak jak mówiłem – bardzo lekkie i proste.
Główny plik wtyczki
Funkcją pliku seotags.php jest oczywiście, oprócz standardowej formułki zawierającej obowiązkowe informacje o pluginie, zebranie w jedną całość wszystkich naszych klas i templatek. Wczytujemy plik konfiguracyjny (zawierający jedynie definicję root directory całej wtyczki) oraz dodajemy pliki klas, use’ingi oraz wywołujemy ich obiekty.
Szablony zaczytujemy bezpośrednio w głównym pliku a nie w osobnej klasie, gdyż szanujemy nasz wspólny czas 🙂
require_once ('config.php');
include ('classes/admin.php');
include ('classes/metabox.php');
include ('classes/seotags.php');
use seotags\admin;
use seotags\metabox;
use seotags\seotags;
$admin = new admin();
$metabox = new metabox();
$seotags = new seotags();
function seoTagsSettingsPage()
{
include plugin_dir_path( __FILE__ ) . './templates/hello.php';
}
function SEOTagsMetaboxCallback( $post )
{
include plugin_dir_path( __FILE__ ) . './templates/form.php';
}
Klasy
Admin – ta klasa nie robi nic innego, niż dodanie strony naszej wtyczki do nawigacji w kokpicie. Strona ta wyświetla póki co jedynie proste informacje na temat pluginu. Funkcja __construct() dodaje odpowiednią akcję, wywołana w akcji metoda zakłada odpowiednią stronę. I tyle.
namespace seotags;
class admin
{
function __construct()
{
add_action( 'admin_menu', array($this, 'addSeoTagsPage' ));
}
public function addSeoTagsPage()
{
add_menu_page(
'SeoTags',
'SEOtags',
'administrator',
__FILE__,
'seoTagsSettingsPage',
get_stylesheet_directory_uri('stylesheet_directory') . "/images/icon.png");
}
}
Metabox – podobnie jak poprzednia klasa – tutaj dodajemy odpowiedniego metaboxa oraz w drugiej funkcji zapisujemy jego wartość podczas zapisywania naszego wpisu. Podobnie jak poprzednio – kontruktor obiektu tej klasy dodaje nasze metody klasy do odpowiednich akcji WordPressa.
namespace seotags;
class metabox
{
public function __construct()
{
add_action( 'add_meta_boxes', array($this, 'addSeoTagsMetabox' ) );
add_action( 'save_post', array($this, 'saveMetaDescription') );
}
function addSeoTagsMetabox()
{
add_meta_box('STMetabox', 'SEO Tags', 'SEOTagsMetaboxCallback', null);
}
function saveMetaDescription( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( $parent_id = wp_is_post_revision( $post_id ) ) {
$post_id = $parent_id;
}
$fields = [
'metadesc',
];
foreach ( $fields as $field ) {
if ( array_key_exists( $field, $_POST ) ) {
update_post_meta( $post_id, $field, sanitize_text_field( $_POST[$field] ) );
}
}
}
}
Seotags – główna (i póki co jedyna) funkcjonalność wtyczki. Pobieramy tagi oraz uzupełniony w metaboxie opis witryny i podczas akcji (’wp_head’) wyświetlamy ją w headzie witryny.
namespace seotags;
class seotags
{
public function __construct()
{
add_action( 'wp_head', array($this, 'addSeoTagsToPages'));
}
function addSeoTagsToPages()
{
global $post;
$keywords = get_the_tags($post);
$tags = array();
$description = get_post_meta($post->ID, 'metadescription', true);
foreach($keywords as $keyword) {
$tags[] = $keyword->name.' ';
}
if ( is_singular() ) {
echo '<meta name="description" content="'.$description.'" />' . "\n";
echo '<meta name="keywords" content="'.implode($tags).'" />';
}
if ( is_home() ) {
echo '<meta name="description" content="' . get_bloginfo( "description" ) . '" />' . "\n";
}
if ( is_category() ) {
$des_cat = strip_tags(category_description());
echo '<meta name="description" content="' . $des_cat . '" />' . "\n";
}
}
}
Oprócz tego znajdziemy jeszcze dwa najprostsze pliki wyświetlające odpowiedniego metaboxa oraz stronę menu. Pozwolę sobie je pominąć – jeśli chcesz zerknąć – śmiało! Cały kod wtyczki znajdziesz na moim githubie.
Konkluzja.
Na koniec odpowiedzmy sobie krótko na postawione na początku pytanie. Czy można dodawać w prosty sposób meta tagi do stron i wpisów w WordPressie bez instalowania dużych, często obciążających stronę wtyczek? Oczywiście, że można. Dodawanie własnych funkcjonalności do często pozwala nam na stworzenie projektu dopasowanego do potrzeb naszego klienta i zachowanie dużej wydajności całej witryny. Jest to również rozwiązanie przyszłościowe – w razie potrzeby dodania dodatkowych funkcji i modułów pluginu, możemy zrobić to bez większego problemu.
Oczywiście nie zabraniam i nie odradzam korzystania z wtyczek pokroju YoastSEO – to sprawdzone i popularne narzędzia. Należy jednak pamiętać iż plugin nie zrobi nic za nas, a jedynie udzieli (nie zawsze trafnych) porad dotyczących pozycjonowania naszej witryny. Początkujących użytkowników mnogość opcji dostępnych w takich „kombajnach” może także przytłoczyć, dlatego zawsze warto zaproponować proste i tak samo skuteczne rozwiązania.
Do następnego!
Dodaj komentarz