After developing an app using MEAN.js, I made enhancements to the Articles (blog) section to improve SEO, readability, and design. However, one issue I'm struggling with is how to properly share these Articles on social media platforms like Facebook, Google+, and Twitter while ensuring that the correct data appears using og meta tags.
MY GOAL
All I want is to seamlessly share Articles (blog posts) from my MEAN.js application so that when I post links on social sites such as Facebook, the article content displays correctly.
MY ATTEMPTS
I experimented with creating a separate server layout specifically for blog posts, but this caused multiple issues and didn't seem feasible - surely there's a more efficient approach.
Additionally, I tried updating og meta tag data using Angular on the client side, but Social sites fetched those tags before the values were updated, rendering my efforts futile.
Another approach involved retrieving the Angular route URL during index rendering to update the og meta values prior to rendering the index; however, I couldn't locate these values in the req object.
IDENTIFIED ISSUE
The root of the problem, as I see it:
The initial request hits the server, which serves as a single page application utilizing Angular routing where the
req.urlvalue remains '/.'The index file loads with the standard server template layout.
Angular then initiates an AJAX call to fetch Article data and binds it to the page variables.
Hence, the layout gets rendered (including the og meta values) before Angular finalizes the article information retrieval.
PROPOSED SOLUTION
In my express.js file, the app's local variables are initialized as follows:
// 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();
These local variables are then called by Swig in the layout.server.view.html file as shown below:
// Note the {{keywords}}, {{description}}, etc. placeholders.
<!-- 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}}">
Ultimately, the aim is to update these values with Article-specific information before rendering the page. The challenge lies in getting this done if the layout renders before Angular determines the article data. Consequently, since the Angular route isn't accessible within the req object, I'm puzzled about how to proceed.
So, the core question remains - how can I effectively share my articles on social media platforms in an aesthetically pleasing manner through MEAN.js? Am I heading in the right direction? Is it achievable with the current Article structure, or should I consider constructing a dedicated blogging module that excludes Angular altogether?