Question

我使用此angular-codeigniter-seed在服务器端使用Codeigniter创建了一个角度应用。我尝试将SEO添加到我的应用中，并且我使用ui-router-metatags在每个页面上都有动态元标记，但问题是只有Chrome的抓取工具运行javascript并等待如果DOM在索引页面时加载，其他所有（facebook，tweeter等）都没有，并且它们按原样使用html。

有许多付费服务预先渲染角度页面并在爬虫到来时缓存它们（seo4ajax，brombone，prerender.io等），但是我无法支付，而且我不会这样做。需要他们提供的音量。

所以我想在服务器上渲染一些页面（不必全部都是这样）的方向，并将它们作为现成的HTML提供，我应该如何处理它？。

我正在运行 Angular 1.5.3 ， Codeigniter 3.0.4 ， ui-router 0.2.18 并且服务器运行Nginx的。

这里是我路由的样本：

.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'
        }
    }
})

Answer 1

我最终在我的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 exmaple：

$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'] ?>">

这对我有用，希望它能帮助将来的某个人。

预渲染角度页面以使用Codeigniter为爬虫提供服务

1 个答案: