Geek Answers Handbook

Social sharing MEAN.js?

So, I created an application using MEAN.js, and made some updates in the section of articles (blog) for better SEO, readability, design, etc. One of the problems that I can't seem to understand is how to share articles using Facebook, Google+, Twitter, etc., and force them to fill in the required data using the og meta tags.

WHAT I WANT

All I want is the ability to publish articles (blog posts) from my MEAN.js app and show the content of the article when I post a link on social sites (like Facebook).

WHAT I ARTED

I tried to create a separate server layout specifically for blog posts, but it violates so many other things that I realized that the amount of work is probably not worth it - there should be a smarter way.

I also tried updating the meta tag data from Angular on the client side, but these values ​​should not be updated before social sites capture these tags ... in other words, it didn’t actually do what I wanted it to be.

I tried to grab the Angular route URL when rendering the index so that I could update this metadata before the index was displayed, but I can not find these values ​​anywhere in the data req.

WHAT I THINK THE PROBLEM

Conceptually, this is what I believe is happening:

  • The request hits my server, but since it is a one-page application using Angular routing, the value req.urlis just the root page ('/').

  • An index file is loaded that uses the standard server template template.

  • Angular AJAX , .

, ( og meta) , Angular , .

express.js :

// Setting application local variables
app.locals.siteName = config.app.siteName;
app.locals.title = config.app.title;
app.locals.description = config.app.description;
app.locals.keywords = config.app.keywords;
app.locals.imageUrl = config.app.imageUrl;
app.locals.facebookAppId = config.facebook.clientID;
app.locals.jsFiles = config.getJavaScriptAssets();
app.locals.cssFiles = config.getCSSAssets();

Swig layout.server.view.html :

// Note the {{keywords}}, {{description}}, etc. values. 
<!-- Semantic META -->
<meta id="keywords" name="keywords" content="{{keywords}}">
<meta id="desc" name="description" content="{{description}}">

<!-- Facebook META -->
<meta id="fb-app-id" property="fb:app_id" content="{{facebookAppId}}">
<meta id="fb-site-name" property="og:site_name" content="{{siteName}}">
<meta id="fb-title" property="og:title" content="{{title}}">
<meta id="fb-description" property="og:description" content="{{description}}">
<meta id="fb-url" property="og:url" content="{{url}}">
<meta id="fb-image" property="og:image" content="{{imageUrl}}">
<meta id="fb-type" property="og:type" content="website">

<!-- Twitter META -->
<meta id="twitter-title" name="twitter:title" content="{{title}}">
<meta id="twitter-description" name="twitter:description" content="{{description}}">
<meta id="twitter-url" name="twitter:url" content="{{url}}">
<meta id="twitter-image" name="twitter:image" content="{{imageUrl}}">

, , . , Angular, , , ? , Angular, -, req, , .

, - "" MEAN.js? ? ? , Angular?

+4
2

- Nginx - MEANJS. , , . , .

, , URL- URL-. , , . example.com/myprofile, example.com/#!/profile/myprofile.

( , ) , . :

-layout.server.view.html

...some stuff here...
//Note the variable names, e.g. {{siteName}}
<meta id="fb-app-id" property="fb:app_id" content="{{facebookAppId}}">
<meta id="fb-site-name" property="og:site_name" content="{{siteName}}">
<meta id="fb-title" property="og:title" content="{{socialTitle}}">
<meta id="fb-description" property="og:description" content="{{socialDescription}}">
<meta id="fb-url" property="og:url" content="{{socialUrl}}">
<meta id="fb-image" property="og:image" content="{{socialImageUrl}}">
<meta id="fb-type" property="og:type" content="website">

...other stuff here...

user-agents, , . , , URL , , :

express.js

// This code happens just after app.locals variables are set.
    // Passing the request url to environment locals
    app.use(function(req, res, next) {
        // Let check user-agents to see if this is a social bot. If so, let serve a different layout to populate the og data so it looks pretty when sharing.
        if(req.headers['user-agent'] === 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)' ||
            req.headers['user-agent'] === 'facebookexternalhit/1.0 (+http://www.facebook.com/externalhit_uatext.php)' ||
            req.headers['user-agent'] === 'facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)' ||
            req.headers['user-agent'] === 'facebookexternalhit/1.0 (+https://www.facebook.com/externalhit_uatext.php)' ||
            req.headers['user-agent'] === 'visionutils/0.2' ||
            req.headers['user-agent'] === 'Twitterbot/1.0' ||
            req.headers['user-agent'] === 'LinkedInBot/1.0 (compatible; Mozilla/5.0; Jakarta Commons-HttpClient/3.1 +http://www.linkedin.com)' ||
            req.headers['user-agent'] === 'Mozilla/5.0 (Windows NT 6.1; rv:6.0) Gecko/20110814 Firefox/6.0 Google (+https://developers.google.com/+/web/snippet/)' ||
            req.headers['user-agent'] === 'Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko Firefox/11.0 (via ggpht.com GoogleImageProxy)') {

            var urlAttempt = req.url;
            urlAttempt = urlAttempt.substr(1);

            Users.findOne({ link: urlAttempt }, function(err, results) {
                if(err) {
                    res.locals.url = req.protocol + '://' + req.headers.host;
                    next();
                } else if (results !== null) {
                    // Found link. Populate data.
                    res.status(200).render('social-index', {

                        // Now we update layout variables with DB info.
                        socialUrl: req.protocol + '://' + req.headers.host + req.url,
                        socialTitle: results.orgName,
                        socialDescription: results.shortDesc,
                        socialImageUrl: req.protocol + '://' + req.headers.host + '/profile/img/' + results.imgName
                    });
                } else {
                    res.locals.url = req.protocol + '://' + req.headers.host;
                    next();
                }
            });
        } else {
            res.locals.url = req.protocol + '://' + req.headers.host;
            next();
        }
    });

, , (). URL- ( ). , .

+2

. Mean-Seo. github repo mean.js. : (Google ..) _escaped_fragment_ , URL- SPA. - , _escaped_fragment_. , Phantom.Js, HTML , .

Facebook Twitter mean-seo.js Mean-Seo, , . Phantom.Js , API. HTML. cheerio.js HTML.

, . hashbang HTML5. URL- https://example.com/post/1 Twitter Facebook _escaped_fragment_.

: aprroach. Phantomjs , , , , . . :

- Twitter Facebook. . Angular, Bootstrap : . Swig ( Meanjs), . Nginx . Nginx rewrite . - :

if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
    rewrite ^/posts/(.*)$ /api/posts/crawl/$1 last;
    }

URL-, Nginx .

0

More articles:


All Articles