Ok, spent some time on this late last night, and the good news is that itās finished, and ready for you to try out.
Please do remember that this isnāt a plugin, but a client side js function with a server side proxy. However, donāt be put off as the installation is simple, and you should be up and running in around 30 minutes maximum.
It does require some technical knowledge and ability, but if youāve setup NodeBB, then you can do this easily - besides, there will be full documentation so you are taken through each step.
Some other points to note are that not every site returns valid Open Graph data - in fact, some donāt even return an image (yes, Reddit, Iām taking about you) when they are closed to the public, or behind a registration form / membership grant, or in some cases, a paywall.
When this scenario is met, the problem arises that no valid image is being returned. I did toy with the idea of using a free random image API , and even wrote the code for it - then realised nature scenery didnāt quite align with a tech site like Reddit.
Ok - the only thing to do here is to generate your own image then, and bundle that in with the proxy. For this purpose, I chose an image (I have a subscription to stockphotosecrets.com, which is an annual cost to me. Iāve cancelled the subscription as I donāt use it, but provided I downloaded the image before the term expires, I have the right to use any images after the fact) and then added some text parts to it so that it could then be used as a placeholder for when the image is absent.
Hereās that image
Itās sparse, but functional. And given my comment earlier around membership and paywalls, hereās what that specific scenario would look like when encountered
Before I go ahead and provide the documentation, code, and proxy server, Iād recommend you try out the latest code on sudonix.dev.
Enjoy.
Mark could you please install to my site also?
@cagatay Let me put the guide together first, and see if you can get it working by yourself. Itās not a difficult installation, and once you understand how the components intersect and work together, I think youāll be fine. If the worst comes to it however, Iām always happy to help.
UPDATE: OGProxy is now live on this forum 
https://sudonix.org/topic/498/setup-ogproxy-for-use-in-nodebb
Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugsā¦
Already found 2 bugs, which have been committed to live code
undefined phenomlab referenced this topic on
One thing I never really took into account when developing OGProxy was the potential for CLS (Cumulative Layout Shifting). If youāre sitting there thinking āwhat is he talking about?ā then this goes some way to explain it
https://blog.hubspot.com/marketing/cumulative-layout-shift
Not only does this harm the user experience in the sense that the page jumps all over the place when you are trying to read content, but is also harmful when it comes to site performance and SEO, as this is a key measurable when checking page performance and speed.
Based on this, Iāve made several changes to how OGProxy works - some of which I will outline below
The function selects certain links in the document and filters out unnecessary ones, like internal links or specific classes.
It further filters links by checking for domains or file types that should be ignored.
Placeholders are inserted initially with a generic āLoadingā¦ā message and a temporary image. This prevents CLS, which happens when the page layout shifts due to asynchronously loaded content. By having a placeholder occupy the same space as the final preview, the layout stays stable while data is fetched.
The function sends an AJAX request to an OpenGraph proxy service to retrieve metadata (title, description, and image) about each link. It uses the same proxy server and API key to fetch this information as itās predecessor.
Once data is retrieved, the placeholder is replaced with the actual preview. Title, description, and image are updated based on the fetched metadata. If an image is missing or invalid, it defaults to a specified ā404ā image.
Debug logging and error handling ensure that if data canāt be fetched, the placeholders are either left unchanged or logged for troubleshooting.
This approach provides a smoother user experience by managing both loading time and visual stability, which are critical for preventing CLS in dynamically loaded content.
The new code is active on this site, and thereās not only a huge visual improvement, but also serious performance gains. Iāll give it a few weeks, then formally release the new code.
And now, changes made to the back-end Proxy Server to increase performance
Key Changes Made:
Added express-rate-limit to limit requests from a single IP.
Integrated morgan for logging HTTP requests.
Added a simple endpoint to check the serverās status.
Implemented input validation for the URL using Joi.
Used dotenv for managing sensitive data like API keys and port configuration.
Enhanced error logging for debugging purposes.
Utilize a centralized error-handling middleware to manage errors in one place.
Use environment variables for more configuration options, such as cache duration or allowed origins, making it easier to change configurations without altering the code.
Use a middleware for handling static responses or messages instead of duplicating logic.
Add compression middleware to reduce the size of the response bodies, which can improve performance, especially for larger responses.
Handle timeouts for the requests made to the target URLs and provide appropriate error responses.
Implement security best practices, such as Helmet for setting HTTP headers, which can help protect against well-known vulnerabilities.
Improve logging with different levels (e.g., info, error) using a logging library like winston, which provides more control over logging output.
Implement graceful shutdown logic to handle server termination more smoothly, especially during deployment.
Integrate monitoring tools like Prometheus or an APM tool for better insights into the applicationās performance and resource usage.
Use libraries like Joi or Ajv to validate responses sent back to the client, ensuring they conform to expected formats.
Again, this new code is running here in test for a few weeks.
Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugsā¦
wowww
Very good work my friend!!
@phenomlab the best of the best, great work Mark 
.
Seeing as not every site on the planet has relevant CORS headers that permit data scraping, I thought Iād make this a bit more obvious on the response. The link is still rendered, but by using the below if the remote site refuses to respond to request
Not entirely sold on the image yet - likely will change it, but you get the idea Itās more along the lines of graceful failure rather than a URL that simply does nothing.
Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugsā¦
@phenomlab I love that image and think it is perfect! LOL
@phenomlab said in OGProxy - a replacement for iFramely:
And now, changes made to the back-end Proxy Server to increase performance
Key Changes Made:
- Rate Limiting
Added express-rate-limit to limit requests from a single IP.
- Logging
Integrated morgan for logging HTTP requests.
- Health Check Endpoint
Added a simple endpoint to check the serverās status.
- Data Validation
Implemented input validation for the URL using Joi.
- Environment Variables
Used
dotenvfor managing sensitive data like API keys and port configuration.
- Error Handling
Enhanced error logging for debugging purposes.
- Asynchronous Error Handling
Utilize a centralized error-handling middleware to manage errors in one place.
- Environment Variable Management
Use environment variables for more configuration options, such as cache duration or allowed origins, making it easier to change configurations without altering the code.
- Static Response Handling
Use a middleware for handling static responses or messages instead of duplicating logic.
- Compression Middleware
Add compression middleware to reduce the size of the response bodies, which can improve performance, especially for larger responses.
- Timeout Handling on Requests
Handle timeouts for the requests made to the target URLs and provide appropriate error responses.
- Security Improvements
Implement security best practices, such as Helmet for setting HTTP headers, which can help protect against well-known vulnerabilities.
- Logging Configuration
Improve logging with different levels (e.g., info, error) using a logging library like winston, which provides more control over logging output.
- Graceful Shutdown
Implement graceful shutdown logic to handle server termination more smoothly, especially during deployment.
- Monitoring and Metrics
Integrate monitoring tools like Prometheus or an APM tool for better insights into the applicationās performance and resource usage.
- Response Schema Validation
Use libraries like
JoiorAjvto validate responses sent back to the client, ensuring they conform to expected formats.Again, this new code is running here in test for a few weeks.
code updated on github or not ?
PW and WS Spirit alive
@DownPW Not yet. One or two bugs left to resolve, then itāll be posted.
Ok Iāll install the old version in the meantimeā¦ Or maybe just wait if itās not too long
@DownPW Coming soonā¦
@DownPW in the coming weeks.
