SWFAddress ile Flash’da SEO ve Deep Linking
Tarih: Haziran 8th, 2009 | Yazar: Ertuğrul Erkan | Kategori: Action Script | Etiketler: action scriopt 3, action script 3 link, action script 3 seo, action script 3 seo yapımı, as3 de link, as3 deep linking, as3 seo, deep linking, flash da link, flash seo, swfaddress, swfaddress ile seo | 13 Yorum »Selam dostlar. Bugün gerçektende harika, süper ötesi bir yazı geliyor. Biliyorsunuz ki Flash yani swf dosyaları artık yavaş yavaş Google amca tarafından indexlenebiliyor. Fakat hala birçok sorun aşılmış değil. Peki çok kolay bir şekilde Seo yapmak istersek? Evet mümkün! Google amcayı öyle bir şekilde yönlendireceğiz ki direkt olarak Html okur gibi okuyacak!
Peki Deep Linking methodu nedir? Şimdi arkadaşlar hemen adres satırına bakalım. Geçmiş aktif değil mi? Yani site adresleri belirli şekilde dağılmış. Parçalara dağılmış halde duruyorlar. İşte Swf dosyaları bundan sonra direkt adres satırından “sayfa yenilenmeden” veri alabilecek güçte!
Swf nin Js Api ile iletişim halinde olduğunu biliyorduk zaten. Bunu kullanan geliştiriciler SWFAddress projesini yaratmışlar. Aynen yukarıda belirttiğim gibi sayfa yenilenmeden adres satırından veri almak, swf yi seolu hale getirmek çok çok kolay. Birkaç adet dosya ve birkaç satır kodcuk ile herşeyi yapabilir güçteyiz!
Peki nasıl kuracağız?
Öncelikle bu adresteki dosyayı yüklüyorsunuz. Şu anda en son versiyonu 2.3 . Neyse zip arşivi halindeki dosyaları çıkarıyorsunuz. İçerisinde örnekler ve gerekli dosyalar var. Biz örnekler içerisideki dosyaları kullanacağız. Çünkü gereksiz, büyük projelerde kullanan fazladan satırlara şimdilik ihtiyacımız yok.
Samples->Cs3 klasörü içerisindeki SWFAddress ve swfobject isimli klasör + SWFAddress.as ve SWFAddressEvent.as yi kendi swf dosyalarınızın olduğunu yere kopyalayın. İşte oldu. Gerekli dosyaların tamamı yüklendi…
Peki nasıl uygulayacağız? ( Deep Linking – Adres Satırı yöntemi )
Arkadaşlar ilk olarak Deep Linking denilen yöntemi deneyeceğiz. Yani adres satırından alınan verileri direkt olarak metin alanına verip göstereceğiz.
Öncelikle html kodlarımız önemli;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Bir Öğrenci Klasiği Örnekler</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
html, body, #website {
height: 100%;
overflow: hidden;
}
body {
background: #CCCCCC;
font: 86% Arial, "Helvetica Neue", sans-serif;
margin: 0;
}
/*]]>*/
</style>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
swfobject.embedSWF('index.swf', 'website', '100%', '100%', '9.0.45',
'swfobject/expressinstall.swf', {}, {bgcolor: '#FFFFCD', menu: 'false', wmode: 'opaque'}, {id: 'website'});
/*]]>*/
</script>
</head>
<body>
<div id="website">
<p>In order to view this page you need Flash Player 9+ support!</p>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</p>
</div>
</body>
</html>
Burada swfobject sayesinde Js api içerisine swf dosyamızı yüklüyoruz. Bu sayede veri iletişimini sağlayacağız. Neyse bu kodları localhostta çalıştırıp deneyelim. Normalde adres satırı şöyle olacaktır;
localhost/ornek/index.html# Burada en önemli kısım # ve ondan sonrası. Hatırlarsanız Html de ? ile gösterilirdi. Fakat burada bilerek ayrılmışki karışmasın diye. Neyse eğer bu şekilde olduysa Js ve Html tarafında herşey tamamlanmış demektir. Ardından ise As3 kısmına geçeceğiz;
Bir tane metin alanı yaratın. Bu alanın adını ise degisken yapın. Şimdi adres satırından verileri alıp içeride gösteceğiz;
import SWFAddress;
import SWFAddressEvent;
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, addressChange)
function addressChange(e:Event){
var deger:String = SWFAddress.getValue();
degisken.text = deger;
}
Gördüğünüz kodda öncelikle sınıflarımızı dahil ediliyoruz. Sonra addressChange yani adres değiştiği anda verileri al diyoruz. SWFAddress.getValue(); sayesinde adres satırındaki # işaretinden sonraki bütün veriler alınıyor.
Eğer ki kodlarımızı denerseniz verilerin sayfa yenilenmeden swf içerisinde gözüktüğünü görürsünüz. Ayrıca diyelim ki ilk merhaba sonra hoşçakal yazdınız. Geri tuşuna bastığınızda ise merhaba tekrar adres satırına gelecek ve içeriye alınacaktır. İstersek adres satırına veri de yollayabiliriz. Evet yapabiliriz! 
Aşağıdaki örneğe bakalım;
import SWFAddress;
import SWFAddressEvent;
SWFAddress.setTitle("site adı");
SWFAddress.setValue("merhaba");
}
Bu örnekte setTitle dediğimiz sayfa adı. Diğeri ise # dan sonra merhaba verisini yolluyor. Fark ettiyseniz get ile alıyor, set ile veriyor. Bunun mantığı burada aslında. Son olarak verileri parametler yani değişkenler olarak almak istersek? Yani Html deki gibi sayfa=1&yazi=3 gibi birden fazla değişkeni çekmek istersek? İşte onun içinde bir yöntem mevcut;
import SWFAddress;
import SWFAddressEvent;
SWFAddress.getParameter("sayfa");
SWFAddress.getParameter("yazi");
Bu kodlar ile de #?sayfa=sayfa6&yazi=yazi5 şeklinde bir iskelet kurabiliriz. Ayrıca unutmadan; istersek Swf içerisinden adres satırına ileri-geri yaptırabiliriz. Bunun içinde SWFAddress.forward(); ve SWFAddress.back(); kodları mevcut…
Peki nasıl uygulayacağız? ( SEO yöntemi )
Eğer ki bu yazıya sadece SEO için girdiyseniz “amma da uzattın” diyerek bana biraz kızabilirler. Fakat gerçekten de çok güzel bir sistemi tanıtıyorum. Bunun herkes tarafından anlaşılmasını isterim…
Arkadaşlar swf tarafında bizim yapacağımız pek birşey yok. Önemli kısım ise Js ve PHP veya ASP tarafında gerçekleşiyor. Swf verilerimizi hep Php veya Asp çıktısından hazır olarak alır. Bundan yola çıkarak bir fikir bulmuştum. Bu çıktıları sadece Swf değilde; botlarda kullanabilir hale getirmeyi planladım. Botların Php iskeletine yönlendirilmesi akıllıca bir hareketti. Fakat bütün bir iskeleti tanımlamak zor gelmişti. İşte SwfAddress bu yöntemin üzerine kurulmuş. Botları iskelete değilde; sadece çıktıya aktarıyordu… Kodlarımız;
Bu kodlarımız index.php ye;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="<?php swfaddress_optimizer('/swfaddress/swfaddress-optimizer.js?flash=8'); ?>"></script>
<title><?php swfaddress_title('SWFAddress Website'); ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
html, body {
height: 100%;
overflow: hidden;
}
body {
background: #CCCCCC;
font: 86% Arial, "Helvetica Neue", sans-serif;
margin: 0;
}
#content {
height: 100%;
}
/*]]>*/
</style>
<script type="text/javascript" src="<?php swfaddress_resource('/swfobject/swfobject.js'); ?>"></script>
<script type="text/javascript" src="<?php swfaddress_resource('/swfaddress/swfaddress.js'); ?>"></script>
</head>
<body>
<div id="content">
<div>
<h1><a href="<?php swfaddress_link('/'); ?>">SWFAddress Website</a></h1>
<ul>
<li><a href="<?php swfaddress_link('/about/'); ?>">SWFAddress Website / About</a></li>
<li>
<a href="<?php swfaddress_link('/portfolio/'); ?>">SWFAddress Website / Portfolio</a>
<ul>
<li><a href="<?php swfaddress_link('/portfolio/1/?desc=true&year=2001'); ?>">SWFAddress Website / Portfolio / 1</a></li>
<li><a href="<?php swfaddress_link('/portfolio/2/?desc=true'); ?>">SWFAddress Website / Portfolio / 2</a></li>
<li><a href="<?php swfaddress_link('/portfolio/3/?desc=false&year=2001'); ?>">SWFAddress Website / Portfolio / 3</a></li>
</ul>
</li>
<li><a href="<?php swfaddress_link('/contact/'); ?>">SWFAddress Website / Contact</a></li>
</ul>
</div>
<div><?php swfaddress_content(); ?></div>
</div>
<script type="text/javascript">
// <![CDATA[
(new SWFObject('<?php swfaddress_resource('/website.swf?datasource=datasource.php'); ?>', 'website', '100%', '100%', '8', '#CCCCCC', 'high')).write('content');
// ]]>
</script>
</body>
</html>
Arkadaşlar burada bazı önemli noktalar var. Her sayfanın adresleri kodları içerisinde belirtilmiş halde. Bu sayede herşey belirli. Unutmayalım; Google amca ve diğer arama motorları kodları okurlar. İnsan gibi sitelerde dolaşamazlar. İşte bu adresleri alıyorlar ve gerekli yerlere gidiyorlar. Kodları direkt olarak “seo” isimli klasördeki örnekten aldım. Neyse birde bu kodlara göre datasource.php olması lazım. Onun kodları da şöyle;
<?php
$swfaddress = preg_replace('/^(.+)\/$/', '$1', $_GET['swfaddress']);
switch($swfaddress) {
case '/':
echo('<p>Quisque libero mauris, ornare in, faucibus ut, facilisis nec, quam. Mauris quis felis ac nisl laoreet adipiscing. Nunc libero. Vivamus nec libero. Fusce neque odio, interdum a, pharetra sit amet, mattis non, nisl. Donec quis metus et pede gravida pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed tincidunt ipsum ut mi. Sed tincidunt porta ipsum. Curabitur sem risus, egestas et, ultricies sed, sollicitudin a, nulla. Praesent eget lectus sed erat commodo ultrices. Donec purus enim, nonummy ut, iaculis sit amet, convallis a, est. Mauris consequat, elit et scelerisque posuere, dui est convallis quam, vitae dignissim tortor odio consectetuer leo. Donec turpis velit, varius id, tincidunt sed, sodales id, eros.</p>');
break;
case '/about':
echo('<p>Suspendisse vitae nibh. Curabitur laoreet auctor velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam tortor. Sed porta diam vel augue. Praesent sollicitudin blandit lectus. Duis interdum, arcu vel convallis porttitor, magna tellus auctor odio, ac lobortis nulla orci vel lacus. Morbi tortor justo, sagittis et, interdum eget, placerat et, metus. Ut quis massa. Phasellus leo nulla, tempus sed, mattis mattis, sodales in, urna. Fusce in purus. Curabitur a lorem quis dolor ultrices egestas. Maecenas dolor elit, tincidunt vel, tempor ac, imperdiet a, quam. Nullam justo. Morbi sagittis. Ut suscipit pulvinar ante. Cras eu tortor. In nonummy, erat eget aliquet molestie, sapien eros pretium lorem, eu pretium urna neque eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque scelerisque lorem ut ligula.</p>');
break;
case '/portfolio':
echo('<p>Fusce at ipsum vel diam ullamcorper convallis. Morbi aliquet cursus lacus. Nunc nisi ligula, accumsan sit amet, condimentum nec, ullamcorper a, lectus. Vestibulum ut lectus. Ut rutrum mi nec lectus. Morbi quis nibh. Pellentesque congue, lorem quis porta tincidunt, tellus tortor venenatis leo, vel porttitor massa massa nec dui. In interdum euismod magna. In hac habitasse platea dictumst. Donec erat. Donec nunc ipsum, lobortis ac, feugiat sit amet, vehicula et, tellus. Donec in lacus ac metus condimentum gravida. Duis vehicula. In a neque in purus hendrerit molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>');
break;
case '/portfolio/1':
echo('<p><img src="' . $base . '/images/1.png" alt="Portfolio 1" width="400" height="300" /><br />');
echo((isset($_GET['desc']) && $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar<br />' : '');
echo((isset($_GET['year']) && $_GET['year'] != '') ? $_GET['year'] . '<br />' : '');
echo('<br /><a href="http://www.sergeevstudio.com">Photos by Lyubomir Sergeev</a></p>');
break;
case '/portfolio/2':
echo('<p><img src="' . $base . '/images/2.png" alt="Portfolio 2" width="400" height="300" /><br />');
echo((isset($_GET['desc']) && $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar<br />' : '');
echo((isset($_GET['year']) && $_GET['year'] != '') ? $_GET['year'] . '<br />' : '');
echo('<br /><a href="http://www.sergeevstudio.com">Photos by Lyubomir Sergeev</a></p>');
break;
case '/portfolio/3':
echo('<p><img src="' . $base . '/images/3.png" alt="Portfolio 3" width="400" height="300" /><br />');
echo((isset($_GET['desc']) && $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar<br />' : '');
echo((isset($_GET['year']) && $_GET['year'] != '') ? $_GET['year'] . '<br />' : '');
echo('<br /><a href="http://www.sergeevstudio.com">Photos by Lyubomir Sergeev</a></p>');
break;
case '/contact':
echo('<p>Nulla nec nunc id urna mollis molestie. Suspendisse potenti. Aliquam vitae dui. In semper ante eu massa. Praesent quis nunc. Vestibulum tristique tortor. Duis feugiat. Nam pharetra vulputate augue. Sed laoreet. Mauris id orci ac nisl consectetuer sollicitudin. Donec eu ante at velit cursus gravida. Suspendisse arcu.</p>');
break;
default:
echo('<p><!-- Status(404 Not Found) -->Page not found.</p>');
break;
}
?> ?>
Burada switch döngüsünde direkt olarak swf nin içerisindeki yerlerin verileri var. Adres satırına bakıyorlar ve ona göre yazdırıyorlar. Google amca da sadece bu yazıları görüp, indexliyor. Sonra aynı adrese tıklayan kişi swf ile karşılaşıyor ve bum; SEO görevini tamamladı…
Arkadaşlar aslında SwfAddress dahilinde birçok fonksiyon daha var. Docs isimli klasörden hepsine ulaşabilirsiniz…
Evet arkadaşlar bugün gerçekten güzel bir yazı oldu. Tekrar görüşmek üzere hoşçakalın…
evet yazi gercekten cok güzel detayli zevkle okudum. ilk defa uzattigin bir yaziyi kizmadan okudum :p sonra cok detayli incelicegim ama simdiden sorayim as2 icin ne var ? yoksa bu yöntemin tamami as3 icinmi gecerli. hali hazirda milyonlarca as2 sayfa mevcut.
Çok hoş bir yazı olmuş Ertuğrul, klavyene sağlık:)
Herkese teşekkürler;
@xcoder;
Genelde konunun daha iyi kavranması için uzatıyorum yoksa başka bir nedeni yok
. Ayrıca evet SwfAddress in As2 ve As1 versiyonlarıda mevcut. Eğer ki indirdiğiniz zip arşivi içerisinde src klasörünü incelerseniz kaynak dosyalara ulaşabilirsiniz…
Herkese iyi günler, iyi çalışmalar…
Merhabalar,
Öncelikle makale için teşekkürler. Bu index kodlarını kullanınca flash içeriğim pencereden daha geniş olmasına rağmen dikey kaydırma çubuğu aktif değil, buna sebep olan kod hangisi acaba, benim sayfamda dikey kaydırma çubuğu olması lazım, flash embed kodları javascript ağırlıklı olduğu için aradığım kodu da bulamadım. Yardım ederseniz çok sevinirim
İyi çalışmalar
Merhaba Burak;
İlk verilen kod satırları içerisinde şöyle bir kısım olacak;
/*< ![CDATA[*/
09. html, body, #website {
10. height: 100%;
11. overflow: hidden;
12. }
13. body {
14. background: #CCCCCC;
15. font: 86% Arial, "Helvetica Neue", sans-serif;
16. margin: 0;
17. }
18. /*]]>*/
ve şöyle bir kısım daha;
swfobject.embedSWF(‘index.swf’, ‘website’, ’100%’, ’100%’, ’9.0.45′,
Burada dikkat ederseniz sürekli değeler 100% olarak yani tam oturtulmak üzere verilmiş. Bu yüzdeki kısımları kendi boyutlarınız olarak değiştirirseniz artık tam oturtmayacaktır.
İyi günler, iyi çalışmalar…
Hmm, hepsini değiştirmiştim ama 10. satır gözümden kaçmış, çabucak yanıt verdiğiniz için de tekrar teşekkür ediyorum, çalışmalarınızda başarılar
Heheh Google Talk sağolsun :=)
Yorum için ben teşekkür ederim. İyi günler…
[...] Bir Öğrenci Klasiği (This page is in Turkish. Çok güzel bir Türkçe [...]
Merhabalar anlatım çok güzel olmuş.Teşekkür etmek istedim.Çünkü günde kimbilir kaç kişi ziyaret ediyor ve bilgilerden yararlanıyor ama yorum yazanlar az.Ondan bilgine ve aklına sağlık.:D Peki biz bu sistemi yeri gelmişken sorayım xml tabanlı bir menü sistemine nasıl uyarlarız.Yani bunun farklı bi kodu mesela ID üzerinde mi gideriz nasıl ? yaparız.Teşekkür ederim.Ayrıca bu yazı hala güncelliğini koruyorsa ne mutlu bana:) en son 2009 da yazılmış bi kaç ay sona bir yıl olacak neredeyse:) İyi çalışmalar.
[...] [...]
merhaba, ben turkce kararkter sorunu yasiyorum, cozenininz var mi
swfaddress-2.4samples
ewriteless klasöründeki örnekler as2 ile yapılmış.Hocam bu örneğin as3 ile olanı varmı?
[...] birorenciklasigi.com [...]