Hi fellow staff,
recently a problem occured, that concerns all branches: The preview icon of the wikis in Facebook and porbably other social media where not properly shown. Instead of the SCP-Icon, the little red house of the first link in the sidebar was displayed.
Usually FB and other pages are searching the information for this preview by themselves from the code, and are caching it. The image for example usually seems to be the first image found in the code of the body (the part below the header) of the page. That is why there is this little SCP-logo with a size of 0 pixels in the code of the front page, right below the CSS-block.
Though you can also explicitly tell FB and others, what image, title, description etc. you want to display. In addition to the following meta-tags I suggest to leave the image in the code of the front page though.
I suggest the following Meta-Tags for all branches and sub-sites:
I recommend to only set this tags to the front page. If someone links to an article, let FB search again to display images from that article. You can also add meta-tags to other pages if you want.
- property="og:url" content="exact_url"
- Set the exact url to your site
- property="og:title" content="the_big_text_in_your_header"
- Like "International Translation Archive"
- property="og:description" content="the_small_text_in_your_header"
- Like "of the SCP Foundation" or whatever text you want to display there
- property="og:image" content="your_image_url"
- Set the image that is to display. I suggest an image of the size of 250x250 px. The minimum size for FB is 200x200 px. I suggest this to be the same image in the code of the front page. You can upload another one than the standard-logo, if you like.
In addition I suggest the following:
- Do not remove the image from your front page.
- Remove the meta tag property="description" content="Front Page", if you have set it.
- Add the line [[image url_of_you_preview_image width="0" height="0"]] to your nav:side, above the first link. This way you make sure that FB and others find this image before the red house-icon, if an article without images is shared.
- If you don't want a giant version of your hub-logo to be displayed if the hub is shared, I suggest uploading a 250x250 px version of that logo and
- Add this with size 0 above your normal logo
- Set the og:image meta-tag for your hub.
- You should also add the other meta-tags to your hub. Though doing so is up to each branch.
Once you are done:
- Go to the Facebook debugger, or if you don't have a Facebook account ask somebody who has one, enter your branches address and force FB to update its cached information. It sometimes takes some time for this tool to really update its information. Wait like 30 seconds between each update-attempt.
- Other social media like VK etc. probably also have a function like this.
- Go to the Google testing tool and see if it displays any errors for your site.
Further information:
https://developers.facebook.com/tools/debug/og/object/ Facebook debugger
https://developers.facebook.com/docs/sharing/webmasters Facebook meta-tag guide
https://search.google.com/structured-data/testing-tool Google data testing tool
http://ogp.me/ full documentation of Open Graph meta-tags