AMP Eklentisiz Olarak Nasıl Kurulur? AMP Sayfa Oluşturma

Meka
Nis 21,2018 SEO

AMP Eklentisiz Olarak Nasıl Kurulur? AMP Sayfa Oluşturma

Bu makalede eklentisiz amp kurulumundan, amp kurallarından, amp sayfa oluşturmaktan bahsedeceğim.

Hızlandırılmış Mobil Sayfalar anlamına gelen Accelerated Mobile Pages kısaltması olan AMP Google’ın öncülük ettiği, Mobil Ağ kullanan kullanıcıların fazla kota yemeden, hızlı ve sade bir şekilde içeriğe erişimine imkan sağlayan yeni çıkarılmış bir HTML sayfa kurallar bütünüdür. AMP yi sağlamak için bir çok wordpress eklenti mevcut fakat ben sıfırdan AMP nasıl kurulur onu anlatmaya çalışacağım.

Öncelikle bazı amp kurallarından bahsadeyim: sayfamızda javascript çalıştıramıyoruz ve css dosyalarına link veremiyoruz. cssleri style amp-custom etiketinin içine yazarak kullanabiliyoruz. Ayrıca inline style yani <div style=”” kullanımı yasak. <img tagı kullanımı da yasak bunun yerine <amp-img> kullanabiliriz.

İlk olarak açık olan sayfanın amp sayfasımı normal sayfamı kontrolünü yapacak php fonskiyonumuzu yazalım :


function is_amp(){
    $url=$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
    if( strpos($url,'?amp')|| strpos($url,'.amp')|| strpos($url,'/amp')){
        return true;
    }
    else{
        return false;
    }
}

Daha sonra temamızın html tag kısmını aşağıdaki şekilde güncelleyelim :


<html <?php if(is_amp())echo '⚡';?> lang="tr-TR">

Burada ⚡ sembolü googleın, sayfanın amp sayfası olduğunu anlamasını sağlıyor. Aynı mantıkla aşağıdaki kodla, amp sayfasında olması gereken style ve script parçalarını ekliyoruz.


<?php if(is_amp()): ?>

        <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both; -moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

        <script async src="https://cdn.ampproject.org/v0.js"></script>

        <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

        <link rel="canonical" href="<?php $req=str_replace('?amp','',$_SERVER[REQUEST_URI]);

        echo 'https://'.$_SERVER[HTTP_HOST].$req;?>">

        <style amp-custom>

        <?php include "style.css"; ?>

        </style>
<?php else: ?>
        <link rel="amphtml" href="<?php echo $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];.'?amp';?>">
        <link rel="stylesheet" type="text/css" href="/style.css">
<?php endif: ?>

Burada eğer amp sayfasıysa canonical yani normal sayfa linkini; normal sayfaysa amphtml linkini head tagı arasında belirtiyoruz. Yukarda da belirttiğim gibi css dosyalarını çağıramadığımız için css dosyasını <style amp-custom> tagı arasına “include” ediyoruz.

Gelelim resimlere :


 <?php if(is_amp()): ?>
        <a href="bilmemne.jpg"  itemprop="image">
        <amp-img src="bilmemne.jpg" width="670" height="350"
                 alt="bilmemne" layout="responsive">
        </amp-img></a>
        <?php else:?>
        <img src="bilmemne.jpg" width="670" height="350" itemprop="image"
             alt="bilmemne.jpg">
        <?php endif; ?>

Burada da amp sayfasıysa amp-img tagını kullanıyoruz.
Peki wordpresste the_content fonksiyonun ekrana bastığı içerik amp ye uygun değilse : bunun için de preg_replace kullanabiliriz:


 <?php if(is_amp()){

                $cont = apply_filters( 'the_content', get_the_content() );
                $cont=preg_replace('/(<[^>]+) style=".*?"/i', '$1', $cont);
                $cont=preg_replace('/<iframe.*>.*<\/iframe>/', ' ', $cont);
                $cont=preg_replace('/\[caption.*"\]/', ' ', $cont);
                $cont=preg_replace('/\[\/caption\]/', ' ', $cont);
                $cont=preg_replace(
                    '/<img.*src="([^"]*)".*width="([^"]*)".*height="([^"]*)".*>/',
                    '<amp-img src="$1" width="$2" height="$3" layout="responsive" alt="AMP"></amp-img>',
                    $cont
                );

                $cont = str_replace( ']]>', ']]>', $cont );
                echo $cont;
            }
                else{the_content();}
        ?>

Gördüğünüz gibi contentdeki style iframe caption img taglarını amp ye uyumlu hale çevirdik.

AMP Test nasıl yapılır

Son olarak sayfamızın ampye uyumlu olduğunu şu şekilde test ediyoruz: <script async src= “https:// cdn.ampproject.org /v0.js”></script> kodunu head tagı arasına eklemiştik. Chromeda diğer araçlar->geliştirici araçları nı açıp Üstten Console’a tıklıyoruz. amp sayfamız /blog/?amp şeklinde bitiyorsa buna #development=1 (/blog/ ?amp#development=1) ekleyerek entera basıyoruz ve consoleda düzeltilmesi gereken hatalar listeleniyor.

Php Wordpress

0 Yorum yapan