Блог

Главная - Вопросы по программированию - динамически генерируемые мета — теги-работают для Facebook, но не для Twitter или связаны в

динамически генерируемые мета — теги-работают для Facebook, но не для Twitter или связаны в

#javascript #node.js #dynamic #meta-tags

Вопрос:

Проблема: Я динамически генерирую мета-теги на стороне сервера, чтобы контролировать то, что очищается искателями социальных сетей для страницы блога. Когда я публикую сообщение из блога, Facebook правильно очищает страницу, но не ссылается на нее или Твиттер. Для Twitter и Linkedin обновление мета-тегов работает для обслуживаемой страницы, но скребки, похоже, «застревают» на одном посте-они, похоже, не каждый раз очищают страницу. Похоже, что, возможно, скребки обладают памятью и не выскабливают каждый раз, когда страница публикуется? Но Facebook делает это?

Справочная информация: Я использую Node.js сервер с express, который вызывает API Blogger для отображения сообщений в блоге (мое решение для того, чтобы не создавать CMS для блога для клиента-клиент редактирует блог на Blogger, и он отображается на сайте с помощью вызова API на стороне сервера). Вот страница блога для сайта: https://www.pisgahclimbingschool.com/blog. Я удалил опцию общего доступа к Твиттеру с сайта, так как он не предоставляет доступ к определенной странице. Если вы поделитесь URL-адресом конкретного поста, очищенная информация на данный момент является общей. Конечная цель состоит в том, чтобы сделать его динамичным.

Код для динамической генерации метатегов: Я использовал этот сайт в качестве ресурса, чтобы помочь мне с моим методом: https://dev.to/js_bits_bill/dynamic-open-graph-meta-tags-with-vuejs-and-node-js-bits-2a11

Вот JS на стороне клиента. Функция buildMetaArray вызывается после первоначального вызова API Blogger для извлечения и визуализации сообщений.

 function buildMetaArray(data, id) {
    for(post in data){
        let title = data[post].title;
        let content = data[post].content;
        let noHtml = content.replace( /(<([^>] )>)/ig, '');
        let noBackspace = noHtml.replace('amp;nbsp;', '');
        let shorterContent = noBackspace.slice(0, 197);
        let description = shorterContent.concat('...');
        let url =  `https://www.pisgahclimbingschool.com/blog-post#${titleAsId(title)}`;
        let postContent = data[post].content; 
        let imgStart = postContent.match('src="');
        let startIndex = imgStart.index 5;
        let startingString = postContent.substring(startIndex, postContent.length);
        
            let imgEnd = findJpg(startingString);
            let endIndex = imgEnd   startIndex;
            let img = postContent.substring(startIndex, endIndex);
        
            let postData = {
                title: title,
                description: description,
                url: url,
                image: img
            }
            metaArray.push(postData);
        }
}

Когда сообщение публикуется в Facebook, метаданные для этого конкретного сообщения отправляются на сервер. Это код на стороне клиента для того, что происходит при нажатии кнопки «Поделиться».:

 function sharePost(postId, index) {
    let shareUrl = `https://www.pisgahclimbingschool.com/blog#${postId}`;
    let facebookLink = document.getElementById('facebook-share-'   index);
    let twitterLink = document.getElementById('twitter-share-'   index);
    let urlLink = document.getElementById('url-share-'   index);
    let newPage; 
    
    facebookLink.addEventListener('click', async function(){
        let string = this.id; 
        let id = (string.slice(string.length-1))-1;
     
        let thisMetaData = metaArray[id];
        shareData = {thisMetaData}
        const options = {
            method: 'POST',

            headers: {
                "Content-Type": "application/json", 
            },
            body: JSON.stringify(shareData)
        }
        
        let newPage;
        const response =  await fetch(send_meta_data, options);
        if(response.ok === true){
             newPage = await fetch(blog_post);
        }
       
        if(newPage.ok === true){
            let facebookShare = "https://www.facebook.com/sharer.php?u="   (newPage.url)   "#"          postId;
            FB.ui({
            method: 'share',
            href: ((newPage.url)   "#"   postId),
          }, function(response){}); 
            
        }else{console.log('not ok')
    }
        
    });

Вот код сервера, в котором заменяется содержимое мета-тега:

 let updatedPost; 

app.post('/metaData', async (request, response) => {
    const metaData = await request.body;
    const metaDataContent = metaData.thisMetaData; 
    const filePath = path.resolve(__dirname, './public', 'blog.html');
    

    fs.readFile(filePath, 'utf8', function (err,data) {
        if (err) {
          return console.log(err);
        }
       
        data = data.replace("Pisgah Climbing School Blog", metaDataContent.title);
        data = data.replace("Learn more about techniques, gear, locations, and all things climbing in the Pisgah Mountains and beyond", metaDataContent.description);
        data = data.replace("resources/images/alewine-topping-out-on-cutthroat-peak.jpg", metaDataContent.image);
        result = data.replace("www.pisgahclimbingschool.com/blog", metaDataContent.url);
        updatedPost = resu< 
        response.send(updatedPost);
        return(updatedPost);
      });
      
});

Once the meta tags are updated, it’s sent back to the client side this way:

 app.get('/blog-post', async (request, response) => {
        response.send(updatedPost);
      });

The page that is shared is https://www.pisgahclimbingschool.com/blog-post#(title of post). My suspicion is that Facebook is scraping the https://www.pisgahclimbingschool.com/blog-post every time it is shared but the other platforms are not.

Одна из моих мыслей заключалась в том, чтобы сделать каждую публикацию своей собственной уникальной страницей при первоначальном вызове API, таким образом, URL-адрес был бы примерно таким https://www.pisgahclimbingschool.com/blog/(название должности). Но я не совсем уверен, как это сделать. Любое понимание, мысли или решения приветствуются! Я новый разработчик, и это мой первый сайт.

Метки: ,