Improve the consistency of page `<title>`s

ndiego commented 1 year ago

Page <title>s are inconsistent about whether they include (or end in) "WordPress Showcase"; can we define and use a consistent pattern throughout which includes this?

I broke out this comment from #234.

The <title> for individual site pages ends in – WordPress Showcase | WordPress.org (example). But all other pages end in just | WordPress.org. There is no mention of "WordPress Showcase". Not sure how we want to resolve this, but I think the titles should mention "WordPress Showcase" once you get past the Homepage.

Let's also update the <title> on the Homepage to the following. This matches the thumbnail image and the subtext on the Homepage.

Star-studded sites built with WordPress | WordPress.org

cc @eidolonnight

[!Note] Related: https://github.com/WordPress/wporg-showcase-2022/issues/221

thetinyl commented 1 year ago

I think the titles should mention "WordPress Showcase" once you get past the Homepage.

For this iteration, I agree with this direction (for what it's worth 😄).

Generally, however, I wonder if "WordPress Showcase" is resonant enough. Just peeping at a few competitors, seems like they're leveraging that space differently. Ex: "Squarespace Website Examples - Made with Squarespace", "Portfolio Website Examples and Design Ideas" (this is Wix), "Shopify Ecommerce Store Examples".

renintw commented 1 year ago

Let's also update the on the Homepage to the following. This matches the thumbnail image and the subtext on the Homepage. Star-studded sites built with WordPress | WordPress.org</p> </blockquote> <p>Done updating. ps. This can be updated in Dashboard > General Settings.</p> <img width="2676" alt="image" src="https://github.com/WordPress/wporg-showcase-2022/assets/18050944/9b15b8ea-bb06-429f-b981-6395d3f0ecd5"> <hr /> <blockquote> <p>Not sure how we want to resolve this, but I think the titles should mention "WordPress Showcase" once you get past the Homepage.</p> </blockquote> <table> <thead> <tr> <th></th> <th>Homepage</th> <th>~Other pages~ Single Post Page</th> </tr> </thead> <tbody> <tr> <td>Current showcase sites</td> <td>The Best WordPress Sites in the World | WordPress.org</td> <td>Bi-Rite Market Showcase | WordPress.org</td> </tr> <tr> <td>News</td> <td>WordPress News – The latest news about WordPress and the WordPress community</td> <td>WordPress 6.4 Beta 3 – WordPress News</td> </tr> <tr> <td>Theme Dir</td> <td>WordPress Themes | WordPress.org</td> <td>Twenty Twenty-Three - WordPress theme | WordPress.org</td> </tr> <tr> <td>Pattern Dir</td> <td>Block Pattern Directory | WordPress.org</td> <td>Centered image with two-tone background color – Block Pattern | WordPress.org</td> </tr> <tr> <td>Plugins Dir</td> <td>WordPress Plugins | WordPress.org</td> <td>WPZOOM Portfolio – WordPress plugin | WordPress.org</td> </tr> </tbody> </table> <p>From looking at other sites, it seems reasonable to mention "WordPress Showcase" once moving past the homepage.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ndiego"><img src="https://avatars.githubusercontent.com/u/4832319?v=4" />ndiego</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>From looking at other sites, it seems reasonable to mention "WordPress Showcase" once moving past the homepage.</p> </blockquote> <p>That looks good, thanks for investigating @renintw. Let's go with this approach (adding "– WordPress Showcase") for now to keep things consistent. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/renintw"><img src="https://avatars.githubusercontent.com/u/18050944?v=4" />renintw</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@ndiego After taking a closer look into the code, I realized that the title behavior of other sites like the Pattern, Plugin, and Theme Directory is consistent with the current showcase. That is, the titles for home, tags, and categories pages all end with <code>| WordPress</code>, and only on Single Post Pages (i.e., individual site pages in the showcase here) do they display <code>- WordPress theme/plugins/pattern.</code> I apologize for not noticing this particular aspect of these sites during my initial review.</p> <p>Given this, do you think a change is still necessary? I'm inclined to be conservative. Although appending <code>- WordPress Showcase</code> to everything other than homepage seems neat and uniform, I'm uncertain if the original title setup was discussed and decided upon in the past.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ndiego"><img src="https://avatars.githubusercontent.com/u/4832319?v=4" />ndiego</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I'm uncertain if the original title setup was discussed and decided upon in the past.</p> </blockquote> <p>This is a great question. I am not sure. Any ideas @StevenDufresne @eidolonnight?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/renintw"><img src="https://avatars.githubusercontent.com/u/18050944?v=4" />renintw</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>some examples for reference</p> <table> <thead> <tr> <th>Current <Title></th> <th>Pattern Directory</th> <th>Showcase-v2</th> </tr> </thead> <tbody> <tr> <td>Home page</td> <td>Block Pattern Directory | WordPress.org <br> Block Pattern Directory | Page 2 | WordPress.org (<a href="https://wordpress.org/patterns/page/2/">link</a>)</td> <td>Star-studded sites built with WordPress | WordPress.org</td> </tr> <tr> <td>Single post page</td> <td>{Single post title} – Block Pattern | WordPress.org (<a href="https://wordpress.org/patterns/pattern/centered-image-with-two-tone-background-color/">link</a>)</td> <td>{Single post title} – WordPress Showcase | WordPress.org</td> </tr> <tr> <td>Category page</td> <td>Block Patterns: {Category Term} | WordPress.org (<a href="https://wordpress.org/patterns/categories/gallery/">link</a>)</td> <td>Sites categorized as “{category term}” | WordPress.org</td> </tr> <tr> <td>Tag page</td> <td>Tag page seems to be overridden, if there's any, the title should be similar to the one on the category page.</td> <td>Sites tagged as “{tag term}” | WordPress.org</td> </tr> <tr> <td>Search result page</td> <td>Block Pattern Directory | WordPress.org (<a href="https://wordpress.org/patterns/search/Centered/">link</a>)</td> <td>Sites filtered by: {search term} | WordPress.org</td> </tr> <tr> <td>Author page</td> <td>Block Patterns by {author name} | WordPress.org (<a href="https://wordpress.org/patterns/author/richtabor/">link</a>)</td> <td>{Author name} | WordPress.org (<a href="https://wordpress.org/showcase-v2/author/ndiego/">link</a>)</td> </tr> <tr> <td>Page post type</td> <td>{Page Title} | WordPress.org (<a href="https://wordpress.org/patterns/about/">link</a>)</td> <td>{Page Title} | WordPress.org <br>{Page Title} | Page {current page #} of {total page #} | WordPress.org (<a href="http://localhost:8888/browse/">link</a>)</td> </tr> <tr> <td>Archive page (the rule is identical to the Page post type)</td> <td>Archive page = Homepage.</td> <td>All sites | WordPress.org <br>All sites | Page 2 of 13 | WordPress.org (updated in #221)</td> </tr> </tbody> </table> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/StevenDufresne"><img src="https://avatars.githubusercontent.com/u/1657336?v=4" />StevenDufresne</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <p>I'm uncertain if the original title setup was discussed and decided upon in the past.</p> </blockquote> <p>This is a great question. I am not sure. Any ideas @StevenDufresne @eidolonnight?</p> </blockquote> <p>Not specifically for the Showcase.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ndiego"><img src="https://avatars.githubusercontent.com/u/4832319?v=4" />ndiego</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Let's move forward with the following change if we can @renintw. The Pattern directory setup includes "Pattern" in most of the titles, so there is some context. We don't have that for the Showcase, so the following adds context will keeping things inline with the Pattern directory:</p> <table> <thead> <tr> <th>Current <Title></th> <th>Pattern Directory</th> <th>Showcase-v2</th> </tr> </thead> <tbody> <tr> <td>Home page</td> <td>Block Pattern Directory | WordPress.org <br> Block Pattern Directory | Page 2 | WordPress.org (<a href="https://wordpress.org/patterns/page/2/">link</a>)</td> <td>Star-studded sites built with WordPress | WordPress.org</td> </tr> <tr> <td>Single post page</td> <td>{Single post title} – Block Pattern | WordPress.org (<a href="https://wordpress.org/patterns/pattern/centered-image-with-two-tone-background-color/">link</a>)</td> <td>{Single post title} – WordPress Showcase | WordPress.org</td> </tr> <tr> <td>Category page</td> <td>Block Patterns: {Category Term} | WordPress.org (<a href="https://wordpress.org/patterns/categories/gallery/">link</a>)</td> <td>Showcase sites categorized as “{category term}” | WordPress.org</td> </tr> <tr> <td>Tag page</td> <td>Tag page seems to be overridden, if there's any, the title should be similar to the one on the category page.</td> <td>Showcase sites tagged as “{tag term}” | WordPress.org</td> </tr> <tr> <td>Search result page</td> <td>Block Pattern Directory | WordPress.org (<a href="https://wordpress.org/patterns/search/Centered/">link</a>)</td> <td>Showcase sites filtered by: {search term} | WordPress.org</td> </tr> <tr> <td>Author page</td> <td>Block Patterns by {author name} | WordPress.org (<a href="https://wordpress.org/patterns/author/richtabor/">link</a>)</td> <td>Showcase sites by {author name} | WordPress.org (<a href="https://wordpress.org/showcase-v2/author/ndiego/">link</a>)</td> </tr> <tr> <td>Page post type</td> <td>{Page Title} | WordPress.org (<a href="https://wordpress.org/patterns/about/">link</a>)</td> <td>{Page Title} | WordPress.org <br>{Page Title} | Page {current page #} of {total page #} | WordPress.org (<a href="http://localhost:8888/browse/">link</a>)</td> </tr> <tr> <td>Archive page (the rule is identical to the Page post type)</td> <td>Archive page = Homepage.</td> <td>All Showcase Sites | WordPress.org <br>All Showcase Sites | Page 2 of 13 | WordPress.org (updated in #221)</td> </tr> </tbody> </table> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/eidolonnight"><img src="https://avatars.githubusercontent.com/u/115154?v=4" />eidolonnight</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Sorry to chime in late. I wasn't aware we were changing the page title as part of the redesign. As for the recommendation, "star-studded" isn't particularly internationally friendly. Also, my general advisement for these titles is to consider tab size. That is a long title. @thetinyl perhaps you can provide some alternatives?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ndiego"><img src="https://avatars.githubusercontent.com/u/4832319?v=4" />ndiego</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <img width="330" alt="image" src="https://github.com/WordPress/wporg-showcase-2022/assets/4832319/890bf111-7bbc-4635-b2d7-49cd0ff09c34"> <p>I just recommended this given the screenshot above. "The Best WordPress Sites in the World" is kind of a loaded statement. There are definitely other WordPress sites that we have not seen that might be "better". 😅</p> <p>Regardless, this is something we can easily change in the Admin of the site itself, so no code changes are needed for the primary site title. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/thetinyl"><img src="https://avatars.githubusercontent.com/u/100625704?v=4" />thetinyl</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Also, my general advisement for these titles is to consider tab size. That is a long title.</p> </blockquote> <p>@eidolonnight I think the length is actually fine. Seems like, as long as it's within 600 pixels, it should be good/is unlikely to be truncated. </p> <p>Some alternatives to consider based on the sentiment of what's currently there or taking a cue from competitors (for now, anyway):</p> <ol> <li>Beautiful websites built with WordPress | WordPress.org</li> <li>Website examples built with WordPress | WordPress.org</li> <li>WordPress Showcase website examples | WordPress.org</li> </ol> <blockquote> <p>this is something we can easily change in the Admin of the site itself, so no code changes are needed for the primary site title.</p> </blockquote> <p>If any of the above seem fine, I'm happy to toss them in there through the site Admin. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/renintw"><img src="https://avatars.githubusercontent.com/u/18050944?v=4" />renintw</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Reopon it since there's discussion ongoing.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/eidolonnight"><img src="https://avatars.githubusercontent.com/u/115154?v=4" />eidolonnight</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>I think we should be bold and use "best" somewhere here. I agree with @ndiego :</p> <blockquote> <p>"The Best WordPress Sites in the World" is kind of a loaded statement. There are definitely other WordPress sites that we have not seen that might be "better". :sweat_smile:</p> </blockquote> <p>If someone sees the Showcase and thinks "OMG I know sites that are way better than these" then <em>good</em>. It can be motivation for them to submit those sites. We have an issue with there being a low volume of high-quality submissions. Maybe this would encourage those.</p> <p>That said, calling these the "Best WordPress Sites" diminishes what they are. These should be some of the best sites on the web, and they just happen to be built with WordPress. I'd recommend something like this as the page subtext (can be adapted for SEO title):</p> <blockquote> <p>The best websites, built with WordPress.</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ndiego"><img src="https://avatars.githubusercontent.com/u/4832319?v=4" />ndiego</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>I have updated the tagline. Are any additional changes needed to make this live @renintw?</p> <img width="845" alt="image" src="https://github.com/user-attachments/assets/a719eae3-968a-48d4-a9a9-397f1eb137ba"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/renintw"><img src="https://avatars.githubusercontent.com/u/18050944?v=4" />renintw</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>@ndiego The change to the tagline only affects the title on the homepage, and I can see that it's already in effect.</p> <p><img src="https://github.com/user-attachments/assets/8de3cf2f-e4f2-435c-bfde-15617b7efd36" alt="image" /></p> <p>As for the homepage tagline, it's written in the code, and I think the reason is for i18n. If we directly apply the tagline there, it will always remain in English. That said, I found that Showcase has not been activated on the Rosetta sites, and I also haven't seen it on translate.wp.org.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/renintw"><img src="https://avatars.githubusercontent.com/u/18050944?v=4" />renintw</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Close as <a href="https://github.com/WordPress/wporg-showcase-2022/pull/278">https://github.com/WordPress/wporg-showcase-2022/pull/278</a> has been shipped.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

WordPress / wporg-showcase-2022

Improve the consistency of page `<title>`s #243