मैं कोणीय 4 की नई मेटा सेवा का उपयोग कर रहा हूं:

import { Meta } from '@angular/platform-browser';

constructor(
    private route: ActivatedRoute,
    private metaService: Meta) {
}

let newText = "Foo data. This is test data!:)";
    //metatags to publish this page at social nets
    this.metaService.addTags([
        // Open Graph data
        { property: 'og:type', content: "website" },
        { property: 'og:title', content: this.card.caption },
        { name: "twitter:title", content: this.card.caption },
        { property: 'og:description', content: this.card.caption + newText },
        { name: "twitter:description", content: this.card.caption + newText },
        { name: "mrc__share_description", content: this.card.caption + newText },
        { property: "og:url", content: window.location.href },
        { name: "twitter:url", content: window.location.href },
        { property: 'og:image', content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" },
        { property: 'og:image:width', content: "1200" },
        { property: 'og:image:height', content: "630" },
        { property: "twitter:image", content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" },
        { name: "twitter:image:src", content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" },
        { name: "twitter:card", content: "summary_large_image" },
        { name: "twitter:site", content: "fooContent" },
        { name: "twitter:creator", content: "fooContent" },
        { property: 'og:site_name', content: this.card.caption },
        { property: "article:published_time", content: "2017-04-17T05:59:00+01:00" },
        { property: "article:modified_time", content: "2017-04-17T05:59:00+01:00" },
        { property: "article:section", content: "Article Section" },
        { property: "article:tag", content: "Article Tag" },
        { property: "fb:admins", content: "414358988584020" },

        //mark up for Google
        { itemprop: "name", content: this.card.caption },
        { itemprop: "description", content: this.card.caption + newText },
        { itemprop: "image", content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" }
    ]);

और मेरा पेज इस तरह दिखता है:

<head>
    <meta property="og:type" content="website">
    <meta property="og:title" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta name="twitter:title" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta property="og:description" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta name="twitter:description" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>Foo data. This is test data!:)">
    <meta name="mrc__share_description" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>Foo data. This is test data!:)"><meta property="og:url" content="http://fourl.com">
    <meta name="twitter:url" content="http://fourl.com"><meta property="og:image" content="http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg">
    <meta property="og:image:width" content="1200"><meta property="og:image:height" content="630">
    <meta property="twitter:image" content="http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg">
    <meta name="twitter:image:src" content="http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg">
    <meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="fooContent">
    <meta name="twitter:creator" content="fooContent">
    <meta property="og:site_name" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta property="article:published_time" content="2017-04-17T05:59:00+01:00">
    <meta property="article:modified_time" content="2017-04-17T05:59:00+01:00">
    <meta property="article:section" content="Article Section">
    <meta property="article:tag" content="Article Tag"><meta property="fb:admins" content="414358988584020">
    <meta itemprop="name" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta itemprop="description" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>Foo data. This is test data!:)"><meta itemprop="image" content="http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg">
</head>

हालाँकि, जब मैं facebook, twitter या goolge में सम्मिलित करता हूँ, तो कोई अच्छी छवि, पाठ का शीर्षक और कुछ सामग्री नहीं होती है। ऐसे व्यवहार का कारण क्या हो सकता है?

-1
StepUp 23 मई 2017, 19:55
क्या fourl.com वास्तविक URL है? इसमें कोई भी ओपन ग्राफ़ मेटा डेटा शामिल नहीं है।
 – 
CBroe
24 मई 2017, 10:31
यह सिर्फ एक उदाहरण है। क्षमा करें, लेकिन मैं वास्तविक यूआरएल नहीं दिखा सकता।
 – 
StepUp
24 मई 2017, 10:33
लेकिन आपके पूर्व शोध ने आपको कम से कम इस जानकारी तक पहुँचाया है कि आप क्लाइंट-साइड जावास्क्रिप्ट के माध्यम से उन मेटा टैग्स को सेट नहीं कर सकते हैं, है ना?
 – 
CBroe
24 मई 2017, 10:36
नहीं, जब मैं पेज खोलता हूं तो मुझे सभी आवश्यक मेटा टैग दिखाई देते हैं!
 – 
StepUp
24 मई 2017, 10:38
1
हां, या तो अपने सर्वर पर ऐसे पैकेज का उपयोग कर रहे हैं, या किसी बाहरी सेवा जैसे prerender.io . का उपयोग कर रहे हैं
 – 
CBroe
24 मई 2017, 10:55

1 उत्तर

सबसे बढ़िया उत्तर

आप क्लाइंट-साइड जावास्क्रिप्ट के माध्यम से इन ओपन ग्राफ़ मेटा टैग्स को सेट नहीं कर सकते हैं - फेसबुक स्क्रैपर को इसकी परवाह नहीं है, यह केवल उस HTML कोड पर ध्यान देता है जब आपका सर्वर यूआरएल का अनुरोध करता है।

उन ऐप्स/साइटों के लिए जो अपनी सामग्री को प्रस्तुत करने के लिए एंगुलर जैसे क्लाइंट-साइड फ्रेमवर्क का उपयोग करते हैं, इसका मतलब है कि आपको इसे "प्री-रेंडर" भी करना होगा (सम्मान कम से कम प्रासंगिक ओजी मेटा टैग, दस्तावेज़ अन्यथा खाली हो सकता है), या तो उपयोग कर आपके सिस्टम के लिए उपलब्ध अतिरिक्त पैकेज (जैसे https://www.npmjs.com/package/prerender -कोणीय आपने उल्लेख किया है; हालांकि इसमें उल्लिखित _escaped_fragment_ सिंटैक्स पदावनत है, https://developers.google.com/webmasters/ajax-crawling/docs/specification), या कोई बाहरी सेवा जैसे https://prerender.io/ (कोई संबद्धता नहीं; बस इसे एक सामान्य उदाहरण के रूप में जानें।)

2
CBroe 24 मई 2017, 11:01