使用Codeigniter預渲染角頁面以提供爬蟲

我已在服務器端使用此angular-codeigniter-seed在Codeigniter上製作了一個角度應用程序。我試圖將SEO添加到我的應用中，並且我使用ui-router-metatags在每個頁面上都有動態元標記，但問題是隻有Chrome瀏覽器的抓取工具運行javascript，並且在索引頁面時等待DOM加載其他人（臉譜，高音等）沒有，他們採取的HTML是原樣。使用Codeigniter預渲染角頁面以提供爬蟲

有很多付費服務，預渲染角網頁並緩存他們的爬蟲來（seo4ajax，brombone，prerender.io等），但我不能支付，我不需要他們提供的數量。

所以我想在服務器上渲染一些頁面（不一定是全部）的方向，併爲它們提供準備好的HTML，我應該如何處理這個問題？

我跑角1.5.3，笨3.0.4，UI路由器0.2.18和服務器運行Nginx的。

這裏，從我的路由SA樣本：

.state('song', { 
    url: "/song/:songTitle", 
    templateUrl: root + 'templ/audio', 
    controller: 'audioController as audio', 
    resolve: { 
     songTitle: function ($stateParams) { 
      return $stateParams.songTitle; 
     }, 
     songDescription: function (SongDescService) { 
      return SongDescService.getDescription(); 
     } 
    }, 
    metaTags: { 
     title: function (songTitle) { 
      return songTitle; 
     }, 
     description: function(songDescription){ 
      return songDescription; 
     }, 
     properties: { 
      'og:title': function (songTitle) { 
       return songTitle; 
      }, 
      'og:type': 'audio', 
      'og:description': function(songDescription){ 
       return songDescription; 
      }, 
      'og:image': root + 'images/logo.png' 
     } 
    } 
})

來源

2016-04-24 FireBrand

我已經結束了注入meta標籤在我Home.php控制器像這樣：

public function index() 
{ 
    //get the page name to insert proper meta tags 
    $pageName = ($this->uri->segment(1) == null ? 'homepage' : $this->uri->segment(1)); 
    $metaTags = metatags(); // helper function gets the metatags defined in config.php 

    $data = $metaTags[$pageName]; 

    if ($pageName == 'song') { 
     $songName = $this->uri->segment(3); 
     $songObj = getsong($songName); 
     $data['title'] = $data['properties']['og:title'] = $data['properties']['twitter:title'] = $songObj->title; 
     $data['description'] = $data['properties']['og:description'] = $data['properties']['twitter:description'] = $songObj->description; 

     $data['properties']['og:image'] = $data['properties']['twitter:image'] = base_url() . 'images/song_image.png';//will better be dynamic 

    } else { 
     $data['properties']['og:image'] = base_url() . $data['properties']['og:image']; 
     $data['properties']['twitter:image'] = base_url() . $data['properties']['twitter:image']; 
    } 

    //add prefixes 
    $data['title'] .= ' | myApp'; 
    $data['properties']['og:title'] .= ' | myApp'; 
    $data['properties']['twitter:title'] .= ' | myApp'; 

    $this->load->view('layout/index', $data); 
}

的config.php〔實施例：

$config['metatags'] = array(
'homepage' => array(
    'title' => 'Home', 
    'properties' => array(
     'description' => 'blah blah blah', 
     'og:title' => 'Home', 
     'og:description' => 'blah blah blah', 
     'og:type' => 'website', 
     'og:image' => 'images/social_image.png', 
     'twitter:title' => 'Home', 
     'twitter:description' => 'blah blah blah', 
     'twitter:image' => 'images/social_image.png', 
    ), 
));

而在佈局頁面上（index.php）我加入到頭部以下：

<title><?= $title ?></title> 
<meta name="description" content="<?= $properties['description'] ?>"> 

<meta property="og:title" content="<?= $properties['og:title'] ?>"> 
<meta property="og:description" content="<?= $properties['og:description'] ?>"> 
<meta property="og:type" content="<?= $properties['og:type'] ?>"> 
<meta property="og:image" content="<?= $properties['og:image'] ?>"> 

<meta property="twitter:title" content="<?= $properties['twitter:title'] ?>"> 
<meta property="twitter:description" content="<?= $properties['twitter:description'] ?>"> 
<meta property="twitter:image" content="<?= $properties['twitter:image'] ?>">

這對我工作，希望這將幫助別人的未來。

來源

2016-04-27 09:31:07 FireBrand

使用Codeigniter預渲染角頁面以提供爬蟲

回答

相關問題