agovella Posted October 23, 2020 Share Posted October 23, 2020 Site URL: https://agux.co Is there a way to customize or overwrite the Twitter social image HTML on my site? Currently, when one of my pages is shared to Twitter, Twitter’s displays the standard summary card: I would like Twitter to use the large summary card, so shared pages look like this: Background info: Per Twitter's developer docs, the summary card with the small image is controlled by this HTML in the HEAD of the document: <meta name="twitter:card" content="summary" /> The summary card with a large image is controlled by similar HTML: <meta name="twitter:card" content="summary_large_image"> By default, Squarespace generates the HTML for the standard summary card with the small image. On my site, I have used code injection to add HTML for the summary with a large image into the HEAD of my documents. I did this both site wide as well as on blog pages: However, Twitter still uses the summary card with the small image. Any thoughts? Link to comment
edharris Posted October 24, 2020 Share Posted October 24, 2020 Hi @agovella - if you've implemented the summary_large_card info via code injection then it should be working. Try running the page URL through Twitter's card validator tool – sometimes that's necessary to force Twitter to refresh the cached info it stores about a URL after it's been shared already. https://cards-dev.twitter.com/validator CatherineJoMorgan 1 Link to comment
darrenabrown Posted August 2, 2021 Share Posted August 2, 2021 Hello all thank you for sharing. I have attempted to do this today for my own website, but it does not seem to be working. I have gone into advanced settings and within header typed the following code: <meta name="twitter:card" content="summary_large_image"> This didn't work to create a large image when posting my website html on twitter. So I also included the following: <meta name="twitter:site" content="@twitterhandle"> <meta name="twitter:title" content="twitter handle name"> If anybody has any suggestions to help with this it would be greatly appreciated. I've bene trying to follow the advice from Twitter but i'm not sure what i'm missing. https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image Link to comment
cub76 Posted May 7, 2023 Share Posted May 7, 2023 Is there any solution to this? We are having the same problem Link to comment
KJDel Posted November 10, 2023 Share Posted November 10, 2023 Can squarespace not address this issue for us novice developers? I can't figure out how to get my website generate these twitter tags on its own like it does for facebook. Link to comment
Akram Posted January 16 Share Posted January 16 Injecting the second code <meta name="twitter:card" content="summary_large_image"> doesn't work. All sites today use this type. For it to work developers need to change the line in the source code <meta name="twitter:card" content="summary"> Any news?? Link to comment
CryptologistTM Posted February 11 Share Posted February 11 Has anyone solved this issue yet? Link to comment
PoochKingdom Posted June 23 Share Posted June 23 I've had to fix this myself. Here's some code you can insert in the Website Tools > Code Injection > Header I've commented it as best as possible. You will replace the '***' bits with your "@username", and you need to get the URL for the image you want to use when it's needed. Squarespace seems to not set the twitter:image for regular pages, but does set it for shop items. I use my site logo by default. I'm no expert on JavaScript optimization, but this is a functional script. It is pretty efficient, so it shouldn't affect your site loading by any significant amount. It waits for the document to load, then builds a string containing the HTML that contains some comments, the twitter site, and an image if one does not exist. The twitter card can be left as 'summary' or overwritten to whatever you need ('summary_large_image'). Read the comments. The image meta element is inserted if it does not exist at all, or if it exists but the content is empty. Optionally, you can replace the image URL that has been inserted in store items by Squarespace. Be careful to comment or delete this section of code if it is not applicable. The last line of the function inserts the comment + site + image + ending comment at the end of the <head> section of your page. You can verify with a browser debugging tool. This gives you a working function that ought to be enough for you to complete your use case. Good luck! <!-- Twitter Card Summary Large by Alan Moore (webmaster@poochkingdom.com) --> <script> // Only run this script after the content has loaded // Important that this is here window.addEventListener('DOMContentLoaded', function () { // Optional comments so you can find the injected section var commentStart = '<!-- Injected by Twitter Card Summary Large -->'; var commentEnd = '<!-- End Injected by Twitter Card Summary Large -->'; // Set up the initial comment and the twitter:site value twitterMetaText = commentStart + '<meta name="twitter:site" content="*** Put your @username here ***"/>'; // Change the twitter card type if you want. Delete the line below if you're ok with it being a summary (the default) document.head.querySelector('meta[name="twitter:card"]').setAttribute('content', 'summary_large_image'); // Find the twitter image meta element var twitterMetaImage = document.head.querySelector('meta[name="twitter:image"]'); // If there's no image meta, or there is and the content is empty if(twitterMetaImage == null || (twitterMetaImage && twitterMetaImage.getAttribute('content').length == 0)) { // Insert a default image twitterMetaText += '<meta name="twitter:image" content="https://images.squarespace-cdn.com/*** Path to the image you want to display ***">'; } // Only add this section if you want to overwrite the image that's already been inserted by Squarespace // If there is already an image and you want to replace it else if(twitterMetaImage && twitterMetaImage.getAttribute('content').length > 0) { // The URL to the image can be static, or you can programmatically calculate the value // Uncomment the line below to replace the image // twitterMetaImage.setAttribute('content', 'https://images.squarespace-cdn.com/*** Path to the image you want to display ***'); } // Add the trailing comment twitterMetaText += commentEnd; // Update the document document.head.insertAdjacentHTML("beforeEnd", twitterMetaText); }); </script> <!-- End Twitter Card Summary Large --> Link to comment
PoochKingdom Posted June 24 Share Posted June 24 One thing to note. I have added social media share buttons to our product pages with some JavaScript. When I share to X and pre-populate the subject and URL, the card image does not always populate first time. I realized that it is most likely because X reads the raw Squarespace page looking for the "twitter:" meta tags, and the link provided by default is 1500w, and there's nothing you can do to change it. Also, most importantly, the code above may not work if X reads the raw page. This is because, in the raw page, the card is defaulted to 'summary', and will only have 'summary_large_image' after rendering. I did find, however, that either a) refreshing the X post page will sometimes pull the image, or b) you must reduce the image size by compressing it a little more. The compressed image will still be the same dimensions, but will be a smaller size. We're trying to keep our compressed images under 500Kb. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment