Enabling Rich Link Previews for Applications like Whatsapp, Discord etc

Hello, when sharing for example Videos with links, I wanted to be able to create a rich preview, where an application like WhatsApp, Discord etc. would be able to display the video without having the need to open the link.

This is an example, of what I want to achieve. Here you could play the Video within the Application.

Screenshot 2021-08-20 233404

This is what it looks like now, when you share a Video via the link.

Screenshot 2021-08-20 233752

When you get a shared link for a Video, Nextcloud loads this template:
server/layout.public.php at master · nextcloud/server · GitHub

On Line 28 it gets the headers from this call:

	<?php print_unescaped($_['headers']); ?>

My Question is now, from where is this coming from, so I could change it to my desire.
I’m not too familiar with PHP, so I couldn’t figure it by myself.

1 Like

You could try using Open graph tags: https://ogp.me/ These will have some effect. I’m not sure if the youtube player isn’t just hardcoded for YouTube URL, though.

That’s what I had in mind, YouTube uses also these tags.
This is en example for a YouTube Video:

    <meta property="og:site_name" content="YouTube">
	<meta property="og:url" content="https://www.youtube.com/watch?v=zJ-NYGLMLxs">
	<meta property="og:title" content="Nextcloud 22 introduction and overview">
	<meta property="og:image" content="https://i.ytimg.com/vi/zJ-NYGLMLxs/hqdefault.jpg">
	<meta property="og:image:width" content="480">
	<meta property="og:image:height" content="360">
	<meta property="og:description" content="Nextcloud 22 introduces a wide range of features. In this video we go over what&#39;s new, show it in action and hear from a few customers about their experience...">
	<meta property="al:ios:app_store_id" content="544007664">
	<meta property="al:ios:app_name" content="YouTube">
	<meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=zJ-NYGLMLxs&amp;feature=applinks">
	<meta property="al:android:url" content="vnd.youtube://www.youtube.com/watch?v=zJ-NYGLMLxs&amp;feature=applinks">
	<meta property="al:web:url" content="http://www.youtube.com/watch?v=zJ-NYGLMLxs&amp;feature=applinks">
	<meta property="og:type" content="video.other">
	<meta property="og:video:url" content="https://www.youtube.com/embed/zJ-NYGLMLxs">
	<meta property="og:video:secure_url" content="https://www.youtube.com/embed/zJ-NYGLMLxs">
	<meta property="og:video:type" content="text/html">
	<meta property="og:video:width" content="1280">
	<meta property="og:video:height" content="720">
	<meta property="al:android:app_name" content="YouTube">
	<meta property="al:android:package" content="com.google.android.youtube">
	<meta property="og:video:tag" content="Nextcloud">
	<meta property="og:video:tag" content="privacy">
	<meta property="og:video:tag" content="digital sovereignty">
	<meta property="fb:app_id" content="87741124305">

My Question is, where I can use these tags?

They’re supposed to be added to the HTML header of your web pages. Last I checked, Nextcloud doesn’t have a hook for adding custom meta tags or any custom header tags in general.

Here’s an example of how I hackishly achieved something similar: bookmarks/AugmentedTemplateResponse.php at master · nextcloud/bookmarks · GitHub