Online-go.com: OGS Links show up as "Play Go at online-go.com! | OGS" in the Forums

Created on 9 Mar 2021 · 5Comments · Source: online-go/online-go.com

TL;DR Please populate og:title with something descriptive!

Describe the bug
The forums try to pull relevant page data from websites that are posted to the forum. When a link is not on its own line, the link text is changed to the Open Graph title. The title for OGS is "Play Go at online-go.com! | OGS", but I believe this could be more descriptive.

Here's how all OGS links show up in the forums (when on the same line as other text):

Screen Shot 2021-03-09 at 12 15 57 PM

To Reproduce
Steps to reproduce the behavior:

Go to Forums
Make a comment with a link in it, but make sure it is on the same line as some other text. e.g. ("Check out the Honinbo tournament: https://online-go.com/tournament/70977")
Note that when you post it, it shows up as "Play Go at online-go.com | OGS"

Expected behavior
A link like https://online-go.com/tournament/70977 should show up as "Honinbo Main Title Tournament 2021" or "Honinbo Main Title Tournament 2021 | OGS".

Additional Context

I looked into fixing this, but OG_TITLE seems to populated differently in prod (Gulpfile.js just populates it with an empty string), and I also can't tell if API calls in the Gulpfile are Kosher.

Source

benjaminpjones

Most helpful comment

Ok it's live now, quick test showed the game name as expected now :)

anoek on 18 Mar 2021

❤2

All 5 comments

That's really great, thanks @anoek :)

One issue: somehow Discourse is still pulling "Play Go at online-go.com | OGS", I wonder if it is pulling the first value of instead of <og:title>. Would it be worth using the same value for <code>PAGE_TITLE</code> as well? I know this is more of a failing on Discourse's end, but since OGS uses discourse for the forums I wanted to bring it up.</p> <p>Discourse (both links to the same game):</p> <p><img width="782" alt="Screen Shot 2021-03-18 at 1 27 59 PM" src="https://user-images.githubusercontent.com/25233703/111671137-ff4af200-87ee-11eb-821a-42218abacb2f.png"></p> <p>The DOM before JavaScript runs:</p> <p><img width="874" alt="Screen Shot 2021-03-18 at 1 32 35 PM" src="https://user-images.githubusercontent.com/25233703/111671166-0b36b400-87ef-11eb-88a5-a364cb38dd00.png"></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/25233703?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="benjaminpjones picture"> <strong>benjaminpjones</strong> <span class="text-muted ml-1">on 18 Mar 2021</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>The fix isn't live yet, i'm actually surprised it closed the issue since it was cross repository, but I guess github is cool like that.</p> <p>When it goes live, it should fix this issue.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/168460?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="anoek picture"> <strong>anoek</strong> <span class="text-muted ml-1">on 18 Mar 2021</span> </div> <div class="col text-right"> 😄<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <blockquote> <p>The fix isn't live yet, i'm actually surprised it closed the issue since it was cross repository, but I guess github is cool like that.</p> </blockquote> <p>Oh got it, I didn't realize <code>og:title</code> was already set for games. Thanks again for addressing!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/25233703?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="benjaminpjones picture"> <strong>benjaminpjones</strong> <span class="text-muted ml-1">on 18 Mar 2021</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Ok it's live now, quick test showed the game name as expected now :)</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/168460?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="anoek picture"> <strong>anoek</strong> <span class="text-muted ml-1">on 18 Mar 2021</span> </div> <div class="col text-right"> ❤<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Truly glorious!</p> <p><img width="795" alt="Screen Shot 2021-03-18 at 2 25 01 PM" src="https://user-images.githubusercontent.com/25233703/111677710-dbd77580-87f5-11eb-8387-ed431777d1dc.png"></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/25233703?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="benjaminpjones picture"> <strong>benjaminpjones</strong> <span class="text-muted ml-1">on 18 Mar 2021</span> </div> <div class="col text-right"> ❤<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(826339570, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(826339570, 1);" onclick="rate(826339570, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(826339570, 2);" onclick="rate(826339570, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(826339570, 3);" onclick="rate(826339570, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(826339570, 4);" onclick="rate(826339570, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(826339570, 5);" onclick="rate(826339570, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/online-go-com/753098736/joseki-layout-broken-when-in-firefox-mobile">Joseki layout broken when in firefox (mobile)</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/25233703?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="benjaminpjones picture"> <strong class="pr-1" dir="ltr">benjaminpjones</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/online-go-com/817449485/multiple-server-login">Multiple server login</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/67241612?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="freysgodi picture"> <strong class="pr-1" dir="ltr">freysgodi</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/online-go-com/210285145/bot-games-don-t-always-smoothly-auto-score">Bot games don't always smoothly auto-score</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/4165289?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="roy7 picture"> <strong class="pr-1" dir="ltr">roy7</strong> · <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/online-go-com/444578699/unable-to-support-ogs-via-paypal">unable to support OGS via paypal</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/12851952?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="popz73 picture"> <strong class="pr-1" dir="ltr">popz73</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/online-go-com/840083505/sorting-gets-broken-on-observe-games-page">Sorting gets broken on 'observe-games' page</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/29932807?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kobakitty picture"> <strong class="pr-1" dir="ltr">kobakitty</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/online-go/online-go.com/issues/1422" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>