支持SEO的部分更新

Partial update while supporting seo

本文关键字:更新 SEO 支持      更新时间:2023-09-26

使用NodeJs,我正在尝试做一些与Meteor非常相似的事情:我只想发送页面中实际更改的部分。我的困境是,我知道如何创建这样的框架来响应链接点击并发送部分更新,但这样的框架不会满足直接浏览到索引以外的页面(这是搜索引擎和没有javascript的人使用您的网站所需要的(。

我还可以弄清楚如何制作一个框架来支持整个页面重新加载,车把和一个简单的节点服务器实例可以解决这个问题。Hoeever,我不知道如何创建一种方法,允许我编写一种方法来告诉框架页面的部分更新,并让框架找出还需要加载的内容。

我能想到的一种方法是每次(对于整个页面加载(创建索引页面并对其应用部分更新,但如果子页面与非常拥挤的索引有很大不同,这可能会很快变得昂贵。

示例方法如下所示:

function images(id) {
    if (id == null) {
        // load all images from database
        template.images = db.result();
        template.content = template.loadblock('gallery');
    }
    else {
        // retrieve single image
        template.content = template.loadblock('single_image');
        template.image = db.result();
    }
}

在部分更新中,为 domain.com/images 调用此方法可以正常工作,因为很明显发生了什么变化。对于整个页面加载,此函数将错过页眉,页脚,导航等内容。

在答案中,我会寻找一个已经这样做的例子或一些可以指出我正确方向的提示。我很抱歉我在 iPad 上写这篇文章的任何错别字。如果您对我的问题有任何疑问,请提出,我会根据需要进行更新。

更新:解决方案的一个可能示例可能是以下代码。这是为了给出一个想法,它可能不会真正运行

// As a convention, don't pass around raw values if they aren't static but pass around functions such as
data.images = function () {
    // run db query
    // return an object with the images
}
// This constraint might be limited to the index() method
var routes = {
// This now allows us to do things like this:
index: function() { 
    var data;
    // Initialise everything needed for the index
    data.title = 'Index';
    data.nav = { Index: '/', Images: '/images' };
    data.content = 'Hello World';
},
categories: function() {
    var data;
    data.content = render('gallery', function () { /* load and return images as object */ }); // Not sure about this dynamic subtemplating but oh well
}
// This now allows us to do the following:
function request(page, type) {
    if (type == 'update') {
        if (routes[page] != undefined && typeof routes[page] == 'function') {
            respond(routes[page]());
        }
    }
    else {
        if (routes[page] != undefined && typeof routes[page] == 'function') {
            var data = mergeArrays(routes['index'](), routes[page]());
            // index.html which is just a Handlebars template
            respond(data);
        }
    }
}

这是我经常使用的模式(在 Express 应用程序中(:

function respond(req, res, name, resource) {
    if(req.accepts('json')) {
        // Send JSON to clients who want it
        res.send(resource);
    } else {
        // Render with layout only for non-XHR requests
        resource.layout = !req.xhr;
        res.render('resources/' + name, resource);
    }
}

用法示例:

app.get('/images', function(req, res, next) {
  getImages(function(err, images) {
    if(err) return next(err);
    respond(req, res, 'images', images);
  });
});
app.get('/images/:id', function(req, res, next) {
  getImage(req.params.id, function(err, image) {
    if(err) return next(err);
    respond(req, res, 'image', image);
  });
});

图片.翡翠:

img(src=uri, alt=title)

图片.翡翠:

#gallery
  for image in images
    include image

请求 JSON 的客户端会得到它,否则他们只会在非 XHR 请求时获得整页。XHR 请求仅获取所请求资源的 HTML 代码段。这适用于非常简单的应用程序,其中资源主要对应于页面。