Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update & Expand Meta Tags #49872

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+32 −8
Open

Update & Expand Meta Tags #49872

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b0e154f
feat(files_sharing): Add twitter meta tags
solonovamax Dec 15, 2024
e1af281
feat(files_sharing): Add opengraph meta tags for multimedia, change o…
solonovamax Dec 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 32 additions & 8 deletions apps/files_sharing/lib/DefaultPublicShareTemplateProvider.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,7 @@ public function renderPage(IShare $share, string $token, string $path): Template
// Allow external apps to register their scripts
$this->eventDispatcher->dispatchTyped(new BeforeTemplateRenderedEvent($share));

// OpenGraph Support: http://ogp.me/
$this->addOpenGraphHeaders($share);
$this->addMetaHeaders($share);

// CSP to allow office
$csp = new ContentSecurityPolicy();
Expand Down Expand Up @@ -190,15 +189,17 @@ public function renderPage(IShare $share, string $token, string $path): Template
* Add OpenGraph headers to response for preview
* @param IShare $share The share for which to add the headers
*/
protected function addOpenGraphHeaders(IShare $share): void {
protected function addMetaHeaders(IShare $share): void {
$shareNode = $share->getNode();
$token = $share->getToken();
$shareUrl = $this->urlGenerator->linkToRouteAbsolute('files_sharing.sharecontroller.showShare', ['token' => $token]);

// Handle preview generation for OpenGraph
$hasImagePreview = false;
if ($this->previewManager->isMimeSupported($shareNode->getMimetype())) {
// For images we can use direct links
if ($shareNode->getMimePart() === 'image') {
$hasImagePreview = true;
$ogPreview = $this->urlGenerator->linkToRouteAbsolute('files_sharing.publicpreview.directLink', ['token' => $token]);
// Whatsapp is kind of picky about their size requirements
if ($this->request->isUserAgent(['/^WhatsApp/'])) {
Expand Down Expand Up @@ -226,11 +227,34 @@ protected function addOpenGraphHeaders(IShare $share): void {
$ogPreview = $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core', 'favicon-fb.png'));
}

Util::addHeader('meta', ['property' => 'og:title', 'content' => $shareNode->getName()]);
Util::addHeader('meta', ['property' => 'og:description', 'content' => $this->defaults->getName() . ($this->defaults->getSlogan() !== '' ? ' - ' . $this->defaults->getSlogan() : '')]);
Util::addHeader('meta', ['property' => 'og:site_name', 'content' => $this->defaults->getName()]);
$title = $shareNode->getName();
$siteName = $this->defaults->getName();
$description = $siteName . ($this->defaults->getSlogan() !== '' ? ' - ' . $this->defaults->getSlogan() : '');

solonovamax marked this conversation as resolved.
Show resolved Hide resolved
// OpenGraph Support: http://ogp.me/
Util::addHeader('meta', ['property' => 'og:title', 'content' => $title]);
Util::addHeader('meta', ['property' => 'og:description', 'content' => $description]);
Util::addHeader('meta', ['property' => 'og:site_name', 'content' => $siteName]);
Util::addHeader('meta', ['property' => 'og:url', 'content' => $shareUrl]);
Util::addHeader('meta', ['property' => 'og:type', 'content' => 'object']);
Util::addHeader('meta', ['property' => 'og:image', 'content' => $ogPreview]);
Util::addHeader('meta', ['property' => 'og:type', 'content' => 'website']);
Util::addHeader('meta', ['property' => 'og:image', 'content' => $ogPreview]); // recommended to always have the image
if ($shareNode->getMimePart() === 'image') {
Util::addHeader('meta', ['property' => 'og:image:type', 'content' => $shareNode->getMimeType()]);
} elseif ($shareNode->getMimePart() === 'audio') {
$audio = $this->urlGenerator->linkToRouteAbsolute('files_sharing.sharecontroller.downloadshare', ['token' => $token]);
Util::addHeader('meta', ['property' => 'og:audio', 'content' => $audio]);
Util::addHeader('meta', ['property' => 'og:audio:type', 'content' => $shareNode->getMimeType()]);
} elseif ($shareNode->getMimePart() === 'video') {
$video = $this->urlGenerator->linkToRouteAbsolute('files_sharing.sharecontroller.downloadshare', ['token' => $token]);
Util::addHeader('meta', ['property' => 'og:video', 'content' => $video]);
Util::addHeader('meta', ['property' => 'og:video:type', 'content' => $shareNode->getMimeType()]);
}


// Twitter Support: https://developer.x.com/en/docs/x-for-websites/cards/overview/markup
Util::addHeader('meta', ['property' => 'twitter:title', 'content' => $title]);
Util::addHeader('meta', ['property' => 'twitter:description', 'content' => $description]);
Util::addHeader('meta', ['property' => 'twitter:card', 'content' => $hasImagePreview ? 'summary_large_image' : 'summary']);
Util::addHeader('meta', ['property' => 'twitter:image', 'content' => $ogPreview]);
Comment on lines +255 to +258
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we adding twitter specific tags? Can’t it read the standard tags?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we adding twitter specific tags? Can’t it read the standard tags?

It can, however imo it doesn't look as nice. yes, technically only the twitter:card tag is needed as it will fall back to the opengraph tags, however there is no harm in including them. (& there may be some services which only support the twitter tags, or if one of the twitter tags is present, it only uses twitter tags. unsure, as I have not tested this)

}
}