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.

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

Show meta tag for Open Graph Protocol #1271

Merged
merged 4 commits into from
Sep 19, 2023
Merged

Conversation

windymelt
Copy link
Contributor

Hi, Can I contribute some aesthetical enhancement on head tag?

I love Scaladex, but when I embed Scaladex project page, only very few data appears. I'd like to enrich rendering.

Currently we have twitter card meta tag for Scaladex. However, twitter card meta tag is intended to be used in Twitter(X).

Fortunately, there is another open protocol for embedding site: The Open Graph protocol. Though initially it is developed for Facebook, many blog / CMS supports OGP for embedding protocol.

I added some meta tag respecting twitterCard. This Pull-Req enables rich rendering of embedded project.

I hope this pull request will help good experience for Scaladex.

@windymelt
Copy link
Contributor Author

oops, we have to use meta property instead of meta name in OGP...

@adpi2
Copy link
Member

adpi2 commented Sep 11, 2023

Thanks @windymet for your very much welcome contribution. I don't have time to review it now but I'll do it next week.

Do you have a screenshot of the final result?

@windymelt
Copy link
Contributor Author

Hi, thanks for your response!

http://localhost:8080/lampepfl/dotty 's DOM looks like:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>dotty</title>
   <!-- snip -->
    
      <meta name="twitter:card" content="summary">
      <meta name="twitter:site" content="@scala_lang">
      <meta name="twitter:title" content="dotty">
      <meta name="twitter:description" content="The Scala 3 compiler, also known as Dotty.">
      <meta name="twitter:image" content="https://avatars.githubusercontent.com/u/2684793?v=4">    
      <meta property="og:title" content="Scaladex - lampepfl / dotty">
      <meta property="og:url" content="https://index.scala-lang.org/lampepfl/dotty">
      <meta property="og:type" content="article">
      <meta property="og:description" content="The Scala 3 compiler, also known as Dotty.">
      <meta property="og:site_name" content="Scaladex">
      <meta property="og:image" content="https://avatars.githubusercontent.com/u/2684793?v=4">
  </head>

og:***is inserted into head tag.

Then embedded rendering becomes:

from

image

to

image

I tested embedding using Ngrok. Though I embedded into Hatena Blog, one of famous blog service in Japan that recognize OGP, other blog service will render the page well.


I think making attribute string from string interpolation is little bit unsafe; but Twirl will do its sanitize, and name of organization and repository should be safe string.

Copy link
Member

@adpi2 adpi2 left a comment

Choose a reason for hiding this comment

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

Thanks again for your contribution

@adpi2 adpi2 merged commit 3247280 into scalacenter:main Sep 19, 2023
3 checks passed
@windymelt windymelt deleted the introduce-ogp branch September 20, 2023 06:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants