Pomysł na bloga pojawił się w okolicach roku 2015. Utworzyłem wówczas prosty projekt w ASP.NET MVC mając zamysł jak będzie wyglądała pierwsza implementacja bloga. Chciałem skupić się na lepszym zrozumieniu (nauce) języka C# oraz interesujących mnie zagadnieniach programistycznych. Od tamtego czasu blog nieco się rozrósł – ja zacząłem interesować się szerszymi tematami. Jeden z nich to SEO.

Jest to proces optymalizacji stron pod kątem wyszukiwarek internetowych. Procesu oczywiście nie możemy opisać jedynie w kilku zdaniach – są to działania mające na celu osiągnięcie jak najlepszej pozycji w wyszukiwarce dla danych słów kluczowych. Dotyczas nie poświęcałem na to zagadanienie zbyt wielu czasu. Śledząc statystki bloga trafiłem(siłą rzeczy) na narzędzia, które mogą być w pomocne w pozycjonowaniu. Jedno z takich narzędzi to Google Search Console. Narzędzie to pozwala na umieszczenie mapy naszej witryny celem poprawy jej widoczności i odpowiedniego zindeksowania.

Zapytacie jak to działa w praktyce? Całkiem dobrze dla mojego bloga. Niektóre wyszukiwania znajdują się na pierwszym miejscu, inne nieco dalej a niektórych nie uświadczymy wcale...

Spójrzcie jak wyszukiwanie wygląda w praktyce:

Specjalnie uruchomiłem wyszukiwanie w oknie prywatnym, żeby nie zakrywać ekranu swoimi statystykami i dodatkowymi informacjami dotyczącymi pozycjonowania. Chyba każdy by skłamał mówiąc, że nie zależy mu, aby jego wpisy były jak najwyżej w wyszukiwarce...
Przyjemnie jest widzieć swoje wpisy w "towarzystwie" innych znanych osób czy portali

Wraz z ukończniem cyklu wpisów dotyczących Angulara problem SEO powrócił. Słowa kluczowe zdefiniowane w jednym miejscu i używane dla całej witryny nijak mają się do tematu, który poruszaliśmy. Standardowym miejscem deklaracji znaczników meta w aplikacji ASP.NET MVC jest plik _Layout.cshtml znajdujący się w folderze Shared. Nie jest to żadna tajemnica - tak wygląda deklaracja znaczników w moim przypadku:

<meta charset="utf-8" name="keywords" value="C#, .NET, Programowanie, Poradniki, Tutoriale" />
<meta charset="utf-8" descrption="Blog programistyczny związany z technologią .NET. Poradniki, tutoriale, artykuły, pytania i odpowiedzi." />

Niby wszystko wygląda normalnie – otwórzmy jednak jakikolwiek wpis dotyczący Angulara i spójrzmy na kod witryny wykorzystując narzędzia deweloperskie (Podgląd zrzutu ekranu w dużej rozdzielczości): Jak widzicie słowa kluczowe zupełnie tutaj nie pasują i nie ma się co dziwić, że moich wyników nie ma w wyszukiwarce. Z drugiej strony trzeba mieć na uwadzę, że jest to proces wymagający czasu – z dnia na dzień moje artykuły dotyczące Angulara nie będą widzoczne na najwyższych pozycjach.

W tym artykule skupimy się na prostej optymalizacji, która może pomóc nieco poprawić statystki naszej witryny. Mechanim jest niezwykle prosty w swojej implementacji – ja jedynie żałuje, że nie zainteresowałem się tym nieco wcześniej. Teraz powinienem przejść osobno przez każdy z wpisów i dokonać aktualizacji. Ja jednak tego nie zrobię... przeprowadze testy na artykułach związanych z Angularem. Dlaczego decyduje się na taki krok? SEO jest pojęciem niezwykle szerokim a sama pozycja nie zależy jedynie od słów kluczowych. Wpływ ma długość oraz jakoś wpisów, słowa pojawiające się w treści czy liczba zewnętrznych odnośników. To oczywiście nie wszystko – tak jak wspomniałem wcześniej, zajmiemy się wąskim zagadnieniem, które możemy z powodzeniem (mam nadzieję) wprowadzić w naszych projektach ASP.NET MVC.

Pierwszym krokiem jest modyfikacja pliku _Layout.cshtml celem umożliwienia stosowania dynamicznych znaczników. Dokonamy zmiany z obecnego zapisu:

<meta charset="utf-8" name="keywords" value="C#, .NET, Programowanie, Poradniki, Tutoriale" />
<meta charset="utf-8" descrption="Blog programistyczny związany z technologią .NET. Poradniki, tutoriale, artykuły, pytania i odpowiedzi." />

<meta charset="utf-8" descrption="@ViewBag.MetaDescription" />
<meta charset="utf-8" name="keywords" value="@ViewBag.MetaKeywords" />

@{
    if (ViewBag.UpdateMetaAttributes != null)
    {
        <meta charset="utf-8" name="keywords" value="@ViewBag.MetaKeywords" />
        <meta charset="utf-8" descrption="@ViewBag.MetaDescription" />
    }
    else
    {
        <meta charset="utf-8" name="keywords" value="C#, .NET, Programowanie, Poradniki, Tutoriale" />
        <meta charset="utf-8" descrption="Blog programistyczny związany z technologią .NET. Poradniki, tutoriale, artykuły, pytania i odpowiedzi." />
    }
}

Przechodząc do właściwej implementacji możemy wykorzystać jeden z dwóch sposobów. Pierwszy z nich to zdefiniowanie opisu oraz słów kluczowych na poziomie całego kontrolera lub osobna definicja w każdej z metod. W tym wpisie wykorzystamy pierwszy sposób ponieważ jest szybki w implementacji i przetestowaniu. Na potrzeby Waszych widoków możecie oczywiście przygotować bardziej szczegółowy opis każdego z wpisów – taki też jest mój zamysł.

W pierwszym kroku przygotujemy prywatną metodę w wybranym kontrolerze:

private void SeoOptymizer()
{
    this.ViewBag.UpdateMetaAttributes = true;
    this.ViewBag.MetaDescription = "wprowadz-swoj-opis";
    this.ViewBag.MetaKeywords = "wprowadz-swoje-slowa-kluczowe";
}

public ActionResult IntroductionI()
{
    SeoOptymizer();
    return View();
}

Jesteśmy gotowi na przetestowanie naszej implementacji. W tym celu otworzymy dwie różne podstrony oraz skorzystamy z narzędzi deweloperskich w celu porównania rezultatów(Podgląd video w dużej rozdzielczości):

Patrząc na powyższe video możecie zobaczyć, że prosta implementacja działa i jesteśmy w stanie nieco zoptymalizować naszą witrynę pod kątem SEO. W momencie publikacji artykułu zmieniłem wszystkie opisy tak, aby nie zawierały powyższych (bezużytecznych) informacji. Miejcie też proszę na uwadzę, że opisy i słowa kluczowe które stosuje – to nie są żadne wyznaczniki. Takie sformułowania oraz słowa kluczowe podpowiedziała mi intuicja a nie chłodna kalkulacja i poszukiwanie najlepszych (konkurencyjnych) słów kluczowych w rankingu wyszukiwarki.