Menu Zamknij

Statyczna strona z pełnym archiwum bloga (Blogger)

Ostatnia aktualizacja wpisu:

SEOStworzenie statycznej strony, zawierającej całe archiwum wpisów bloga nie jest trudne. Dodatkowo jest to bardzo przydatne m.in. ze względów optymalizacji pod wyszukiwarki (SEO) i nie chodzi tutaj koniecznie o tworzenie dodatkowej sitemapy (swego rodzaju), a raczej o możliwość usunięcia linków dynamicznych (next-prev, starsze posty, nowsze posty) z naszego bloga. Samo wyłączenie tego typu odnośników zwiększyło SEO Score mojej strony aż o 10 punktów!


Jak stworzyć statyczną stronę z archiwum bloga?

Przede wszystkim musisz rozpocząć od stworzenia nowej strony na Twoim blogu, więc przejdź do panelu administracyjnego, wybierz strony i nowa strona

Po otwarciu nowej strony wybierz edytor html, następnie w oknie wklej poniższy skrypt:

<script type=”text/javascript”>
function LoadTheArchive(TotalFeed)
{
    var PostTitles = new Array();
    var PostURLs = new Array();
    var PostYears = new Array();
    var PostMonths = new Array();
    var PostDays = new Array();
    if(„entry” in TotalFeed.feed)
    {
 var PostEntries=TotalFeed.feed.entry.length;
 for(var PostNum=0; PostNum<postentries ; PostNum++)
 {
     var ThisPost = TotalFeed.feed.entry[PostNum];
     PostTitles.push(ThisPost.title.$t);
     PostYears.push(ThisPost.published.$t.substring(0,4));
     PostMonths.push(ThisPost.published.$t.substring(5,7));
     PostDays.push(ThisPost.published.$t.substring(8,10));
     var ThisPostURL;
     for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)
     {
  if(ThisPost.link[LinkNum].rel == „alternate”)
  {
      ThisPostURL = ThisPost.link[LinkNum].href;
      break
  }
     }
     PostURLs.push(ThisPostURL);
 }
    }
    DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}
function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
    var MonthNames=[„Styczeń”,”Luty”,”Marzec”,”Kwiecień”,”Maj”,”Czerwiec”,”Lipiec”,”Sierpień”,”Wrzesień”,”Październik”,”Listopad”,”Grudzień”];
    var NumberOfEntries=PostTitles.length;
    var currentMonth = „”;
    var currentYear = „”;
    for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
    {
 NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]
 if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
  currentMonth = NameOfMonth;
  currentYear = PostYears[EntryNum];
  document.write(„<div class=’dateStyle’><br />” + currentMonth+” „+currentYear+” </div>
„);
 }
  document.write(”<a href =”‚+PostURLs[EntryNum]+'”><div class=dayStyle>’+parseInt(PostDays[EntryNum],10)+”:&nbsp;&nbsp;</div> „+PostTitles[EntryNum]+”</a><br />”);
    }
}
</script>

<script src=”http://twoj_blog.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive”></script>
<script src=”http://twoj_blog.blogspot.com/feeds/posts/default?max-results=150&amp;start-index=151&amp;alt=json-in-script&amp;callback=LoadTheArchive”></script>
<script src=”http://twoj_blog.blogspot.com/feeds/posts/default?max-results=150&amp;start-index=301&amp;alt=json-in-script&amp;callback=LoadTheArchive”></script>
<script src=”http://twoj_blog.blogspot.com/feeds/posts/default?max-results=150&amp;start-index=451&amp;alt=json-in-script&amp;callback=LoadTheArchive”></script>
<script src=”http://twoj_blog.blogspot.com/feeds/posts/default?max-results=150&amp;start-index=601&amp;alt=json-in-script&amp;callback=LoadTheArchive”></script>
<script src=”http://twoj_blog.blogspot.com/feeds/posts/default?max-results=150&amp;start-index=851&amp;alt=json-in-script&amp;callback=LoadTheArchive”></script>
<script src=”http://twoj_blog.blogspot.com/feeds/posts/default?max-results=150&amp;start-index=1001&amp;alt=json-in-script&amp;callback=LoadTheArchive”></script>
<!–CUSTOMIZATION–>
<style type=”text/css”>
.dateStyle {
     color:#000;
     font-weight:bold;
     font-size: 15px;
     font-family: Arial, sans-serif;
     margin: 0;
}
.dayStyle {
     color:#000;
     font-weight:bold;
     font-family: Arial, sans-serif;
     display: inline-block;
}
</style>

Należy pamiętać, żeby w miejsce tekstu twoj_blog.blogspot.com wkleić właściwy adres Twojego bloga. Przykład jak wygląda takie archiwum (po małych zmianach) możesz zobaczyć u mnie, klikając w link: /p/archiwum.html

Modyfikacja wyglądu archiwum

Sam styl archiwum zmienisz modyfikując kod CSS:

.dateStyle {
     color:#000;
     font-weight:bold;
     font-size: 15px;
     font-family: Arial, sans-serif;
     margin: 0;
}
.dayStyle {
     color:#000;
     font-weight:bold;
     font-family: Arial, sans-serif;
     display: inline-block;
}

Jeżeli chcesz np. żeby zmienił się kolor tekstu, w obu klasach (.dateStyle, .dayStyle) zmień wartość atrybutu color (można zapisać to jako np. color: red; – wtedy tekst będzie czerwony)

Generalnie, jeżeli nie orientujesz się w css zmieniaj tylko tekst pomiędzy : a

Usuwanie numerowania dni z archiwum

Mi osobiście nie przypadł do gustu numerowany styl dni z postami. Postanowiłem go zamienić na zwykłe kropki.
Żeby to zrobić wystarczy fragment:

document.write(”<a href =”‚+PostURLs[EntryNum]+'”><div class=dayStyle>’+parseInt(PostDays[EntryNum],10)+”:&nbsp;&nbsp;</div> „+PostTitles[EntryNum]+”</a><br />”);

zamienić na:

document.write(‚<a href =”‚+PostURLs[EntryNum]+'”target=”_blank”><div class=dayStyle>
‚+”&bull;</div>
&nbsp;”+PostTitles[EntryNum]+”</a><br />”); 

Indeksowanie zawartości archiwum (document.write w JS, a Google)

Zadałem sobie pytanie – a jak z indeksowaniem zawartości archiwum? Czy treść z kodu JavaScript będzie „widziana” przez bota Google?

Odpowiedź brzmi – Tak! Google swego czasu udoskonaliło bota indeksującego i potrafi on wyciągać pewne treści z kodu JavaScript czy Ajax.

Przykładem treści, którą na pewno zaindeksuje jest właśnie document.write, z którego korzystamy w powyższym kodzie.


Mogą Cię też zainteresować:

Dodaj komentarz

avatar
  Subscribe  
Powiadom o