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

Jump to bottom

[Feature] Add fb:app_id and fb:page_id to Meta component #1717

Closed
gixxerblade opened this issue Jan 29, 2022 · 5 comments
Closed

[Feature] Add fb:app_id and fb:page_id to Meta component #1717

gixxerblade opened this issue Jan 29, 2022 · 5 comments

Comments

@gixxerblade
Copy link

What is the new or updated feature that you are suggesting?

Request add Facebook's open graph markup fb:page_id and fb:app_id to the Meta component.

Why should this feature be included?

When a link is shared to Facebook, the crawler indexes the fb:page_id and fb:app_id if they are present. According to a Guide to Sharing for Webmasters on Facebook's site, they recommend the use of fb:app_id

fb:app_id In order to use Facebook Insights you must add the app ID to your page. Insights lets you view analytics for traffic to your site from Facebook. Find the app ID in your App Dashboard.
@gixxerblade gixxerblade changed the title Add fb:app_id and fb:page_id to Meta component [Feature] Add fb:app_id and fb:page_id to Meta component Jan 29, 2022
@kiliman
Copy link
Collaborator

kiliman commented Feb 25, 2022

It doesn't look like there's consistency in how <meta> tags are used. The HTML standard is to use <meta name="" content=""/>. But apparently there's an RDFa standard that allows <meta property="" content=""/>.

The og:* meta properties, use the property attribute, same with fb:*. I thought that a good heuristic would be to look for : in the property name and if present use property, otherwise use name. Unfortunately that doesn't work, as twitter:* meta tags use name. 😮‍💨

Currently the Remix <Meta> component is hard-coded to check for og: prefix. Every time a new meta property came out, they would need to update this.

It may be better to allow you to specify this in the meta export.

export function meta() {
  return {
    title: 'My title',
    description: 'My description',
    'og:image': 'path/to/image',    // keep for backward compatibility
    'fb:app_id': { property: 'fb:app_id', content: '1234' },  // use object for non-name version
    '@fb:page_id': 'page-id',       // or use a prefix like @ to denote this is 'property'
  }
}

@Ethaan
Copy link

Ethaan commented Mar 4, 2022

So i guess for now this is what we need to do right?

<head>
  <meta charSet="utf8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta property="fb:app_id" content="xxxx" />
  <Meta />
  <Links />
</head>

@kiliman
Copy link
Collaborator

kiliman commented Mar 4, 2022

Yes, for now you would need to manually render those elements yourself.

@norikmb norikmb mentioned this issue Mar 15, 2022
Closed
@kiliman kiliman mentioned this issue Mar 16, 2022
Merged
@14850842
Copy link

This however does not allow you to specify dynamic values such as your deep link:

 <meta property="al:ios:url" content="example://applinks/:id" />

@machour
Copy link
Collaborator

machour commented Nov 28, 2022

@14850842 a PR which should allow that to work was recently merged:
#4610

The feature will be available in next release.

@remix-run remix-run deleted a comment from susanwinters214 Jun 7, 2024
@remix-run remix-run locked as resolved and limited conversation to collaborators Jun 7, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@kiliman @machour @14850842 @Ethaan @gixxerblade